mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #231 from picocss/dev

Browse source 
v1.5.4
This commit is contained in:
Lucas Larroche 2022-09-11 21:46:22 +07:00 • committed by GitHub
commit 867621deb9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 2819 additions and 3285 deletions
Download patch file Download diff file Expand all files Collapse all files

402
css/pico.classless.css
View file

@ -1,6 +1,6 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* Pico.css v1.5.3 (https://picocss.com) * Pico.css v1.5.4 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2022 - Licensed under MIT
*/ */
/** /**
@ -28,6 +28,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -179,7 +180,7 @@ tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead):not(tfoot) > * > td { :not(thead, tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -198,7 +199,6 @@ kbd {
[data-theme=light], [data-theme=light],
:root:not([data-theme=dark]) { :root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #fff; --background-color: #fff;
--color: hsl(205deg, 20%, 32%); --color: hsl(205deg, 20%, 32%);
--h1-color: hsl(205deg, 30%, 15%); --h1-color: hsl(205deg, 30%, 15%);
@ -283,28 +283,28 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(65, 84, 98)' 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-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"); --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='rgb(198, 40, 40)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(56, 142, 60)' 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");
color-scheme: light;
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme=light]) {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -390,27 +390,27 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
} }
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -496,23 +496,31 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--primary);
} }
/** /**
@ -537,13 +545,13 @@ kbd {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; text-size-adjust: 100%;
text-rendering: optimizeLegibility;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-weight: var(--font-weight); font-weight: var(--font-weight);
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); line-height: var(--line-height);
font-family: var(--font-family); font-family: var(--font-family);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; overflow-wrap: break-word;
cursor: default; cursor: default;
-moz-tab-size: 4; -moz-tab-size: 4;
@ -1026,7 +1034,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { input:not([type=checkbox], [type=radio], [type=range]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
} }
@ -1044,13 +1052,13 @@ fieldset legend {
font-weight: var(--form-label-font-weight, var(--font-weight)); font-weight: var(--form-label-font-weight, var(--font-weight));
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
width: 100%; width: 100%;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select, select,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
@ -1076,33 +1084,33 @@ textarea {
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); 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]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) { :where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color); --background-color: var(--form-element-active-background-color);
} }
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) { :where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color); --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, input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
input:not([type=submit]):not([type=button]):not([type=reset])[disabled], input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) { :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important; -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
@ -1113,10 +1121,10 @@ textarea[disabled],
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
background-image: var(--icon-valid); background-image: var(--icon-valid);
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid); background-image: var(--icon-invalid);
} }
:where(input, select, textarea)[aria-invalid=false] { :where(input, select, textarea)[aria-invalid=false] {
@ -1134,7 +1142,7 @@ textarea[disabled],
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important; --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
} }
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { [dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
@ -1147,7 +1155,7 @@ select:invalid {
opacity: 1; opacity: 1;
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
@ -1157,7 +1165,7 @@ select::-ms-expand {
border: 0; border: 0;
background-color: transparent; background-color: transparent;
} }
select:not([multiple]):not([size]) { select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1170,7 +1178,7 @@ select:not([multiple]):not([size]) {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
[dir=rtl] select:not([multiple]):not([size]) { [dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
@ -1323,7 +1331,7 @@ label > :where(input, select, textarea) {
border-radius: calc(var(--border-radius) * 0.5); border-radius: calc(var(--border-radius) * 0.5);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--icon-position: 0.75rem; --icon-position: 0.75rem;
--icon-width: 1rem; --icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position)); padding-right: calc(var(--icon-width) + var(--icon-position));
@ -1332,7 +1340,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: var(--icon-width) auto; background-size: var(--icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
background-image: var(--icon-time); background-image: var(--icon-time);
} }
@ -1557,7 +1565,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
transform: scale(1.25); transform: scale(1.25);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem; border-radius: 5rem;
@ -1566,15 +1574,15 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem; background-position: center left 1.125rem, center right 0.75rem;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
background-image: var(--icon-search), var(--icon-valid); background-image: var(--icon-search), var(--icon-valid);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
background-image: var(--icon-search), var(--icon-invalid); background-image: var(--icon-search), var(--icon-invalid);
} }
@ -1583,10 +1591,10 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
display: none; display: none;
} }
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] { [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
background-position: center right 1.125rem; background-position: center right 1.125rem;
} }
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] { [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem; background-position: center right 1.125rem, center left 0.75rem;
} }
@ -1837,6 +1845,8 @@ dialog {
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(--spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
color: var(--color); color: var(--color);
} }
@ -1928,6 +1938,23 @@ nav :where(a, [role=link]) {
nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) { nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
text-decoration: none; text-decoration: none;
} }
nav[aria-label=breadcrumb] {
align-items: center;
justify-content: left;
}
nav[aria-label=breadcrumb] ul li {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after {
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
content: "/";
color: var(--muted-color);
}
nav[aria-label=breadcrumb] a[aria-current=page] {
color: inherit;
}
nav [role=button] { nav [role=button] {
margin-right: inherit; margin-right: inherit;
margin-left: inherit; margin-left: inherit;
@ -1985,8 +2012,8 @@ progress::-moz-progress-bar {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
progress:indeterminate { 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; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
-webkit-animation: progressIndeterminate 1s linear infinite; -webkit-animation: progress-indeterminate 1s linear infinite;
animation: progressIndeterminate 1s linear infinite; animation: progress-indeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -2002,7 +2029,7 @@ progress::-moz-progress-bar {
} }
} }
@-webkit-keyframes progressIndeterminate { @-webkit-keyframes progress-indeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -2011,7 +2038,7 @@ progress::-moz-progress-bar {
} }
} }
@keyframes progressIndeterminate { @keyframes progress-indeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -2197,7 +2224,7 @@ li[role=list] > a::after {
cursor: progress; cursor: progress;
} }
[aria-busy=true]:not(input):not(select):not(textarea)::before { [aria-busy=true]:not(input, select, textarea)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2211,7 +2238,7 @@ li[role=list] > a::after {
animation: spinner 0.75s linear infinite; animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity); opacity: var(--loading-spinner-opacity);
} }
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before { [aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0; -webkit-margin-start: 0;
@ -2219,7 +2246,7 @@ li[role=list] > a::after {
-webkit-margin-end: calc(var(--spacing) * 0.5); -webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
} }
[aria-busy=true]:not(input):not(select):not(textarea):empty { [aria-busy=true]:not(input, select, textarea):empty {
text-align: center; text-align: center;
} }
@ -2248,12 +2275,12 @@ a[aria-busy=true] {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a):not(button):not(input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
[data-tooltip]::before, [data-tooltip]::after { [data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
display: block; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2275,7 +2302,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2286,23 +2313,86 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; animation-name: tooltip-caret-slide-top;
}
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-bottom;
animation-name: tooltip-slide-bottom;
}
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-name: tooltip-caret-slide-bottom;
animation-name: tooltip-caret-slide-bottom;
}
[data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-left;
animation-name: tooltip-slide-left;
}
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-name: tooltip-caret-slide-left;
animation-name: tooltip-caret-slide-left;
}
[data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-right;
animation-name: tooltip-slide-right;
}
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-name: tooltip-caret-slide-right;
animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top {
@-webkit-keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2312,8 +2402,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top {
@keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2323,7 +2412,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2336,7 +2425,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2349,6 +2438,145 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

436
css/pico.css
View file

@ -1,6 +1,6 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* Pico.css v1.5.3 (https://picocss.com) * Pico.css v1.5.4 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2022 - Licensed under MIT
*/ */
/** /**
@ -30,6 +30,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -184,7 +185,7 @@ tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead):not(tfoot) > * > td { :not(thead, tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -203,7 +204,6 @@ kbd {
[data-theme=light], [data-theme=light],
:root:not([data-theme=dark]) { :root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #fff; --background-color: #fff;
--color: hsl(205deg, 20%, 32%); --color: hsl(205deg, 20%, 32%);
--h1-color: hsl(205deg, 30%, 15%); --h1-color: hsl(205deg, 30%, 15%);
@ -288,28 +288,28 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(65, 84, 98)' 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-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"); --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='rgb(198, 40, 40)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(56, 142, 60)' 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");
color-scheme: light;
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme=light]) {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -395,27 +395,27 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
} }
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -501,23 +501,31 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--primary);
} }
/** /**
@ -542,13 +550,13 @@ kbd {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; text-size-adjust: 100%;
text-rendering: optimizeLegibility;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-weight: var(--font-weight); font-weight: var(--font-weight);
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); line-height: var(--line-height);
font-family: var(--font-family); font-family: var(--font-family);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; overflow-wrap: break-word;
cursor: default; cursor: default;
-moz-tab-size: 4; -moz-tab-size: 4;
@ -1129,7 +1137,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { input:not([type=checkbox], [type=radio], [type=range]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
} }
@ -1147,13 +1155,13 @@ fieldset legend {
font-weight: var(--form-label-font-weight, var(--font-weight)); font-weight: var(--form-label-font-weight, var(--font-weight));
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
width: 100%; width: 100%;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select, select,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
@ -1179,33 +1187,33 @@ textarea {
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); 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]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) { :where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color); --background-color: var(--form-element-active-background-color);
} }
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) { :where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color); --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, input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
input:not([type=submit]):not([type=button]):not([type=reset])[disabled], input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) { :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important; -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
@ -1216,10 +1224,10 @@ textarea[disabled],
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
background-image: var(--icon-valid); background-image: var(--icon-valid);
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid); background-image: var(--icon-invalid);
} }
:where(input, select, textarea)[aria-invalid=false] { :where(input, select, textarea)[aria-invalid=false] {
@ -1237,7 +1245,7 @@ textarea[disabled],
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important; --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
} }
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { [dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
@ -1250,7 +1258,7 @@ select:invalid {
opacity: 1; opacity: 1;
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
@ -1260,7 +1268,7 @@ select::-ms-expand {
border: 0; border: 0;
background-color: transparent; background-color: transparent;
} }
select:not([multiple]):not([size]) { select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1273,7 +1281,7 @@ select:not([multiple]):not([size]) {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
[dir=rtl] select:not([multiple]):not([size]) { [dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
@ -1426,7 +1434,7 @@ label > :where(input, select, textarea) {
border-radius: calc(var(--border-radius) * 0.5); border-radius: calc(var(--border-radius) * 0.5);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--icon-position: 0.75rem; --icon-position: 0.75rem;
--icon-width: 1rem; --icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position)); padding-right: calc(var(--icon-width) + var(--icon-position));
@ -1435,7 +1443,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: var(--icon-width) auto; background-size: var(--icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
background-image: var(--icon-time); background-image: var(--icon-time);
} }
@ -1660,7 +1668,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
transform: scale(1.25); transform: scale(1.25);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem; border-radius: 5rem;
@ -1669,15 +1677,15 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem; background-position: center left 1.125rem, center right 0.75rem;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
background-image: var(--icon-search), var(--icon-valid); background-image: var(--icon-search), var(--icon-valid);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
background-image: var(--icon-search), var(--icon-invalid); background-image: var(--icon-search), var(--icon-invalid);
} }
@ -1686,10 +1694,10 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
display: none; display: none;
} }
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] { [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
background-position: center right 1.125rem; background-position: center right 1.125rem;
} }
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] { [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem; background-position: center right 1.125rem, center left 0.75rem;
} }
@ -1943,6 +1951,8 @@ dialog {
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(--spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
color: var(--color); color: var(--color);
} }
@ -2023,14 +2033,14 @@ dialog:not([open]), dialog[open=false] {
:where(.modal-is-opening, .modal-is-closing) dialog { :where(.modal-is-opening, .modal-is-closing) dialog {
-webkit-animation-duration: 0.8s; -webkit-animation-duration: 0.8s;
animation-duration: 0.8s; animation-duration: 0.8s;
-webkit-animation-name: fadeIn; -webkit-animation-name: modal-overlay;
animation-name: fadeIn; animation-name: modal-overlay;
} }
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
-webkit-animation-delay: 0.2s; -webkit-animation-delay: 0.2s;
animation-delay: 0.2s; animation-delay: 0.2s;
-webkit-animation-name: slideInDown; -webkit-animation-name: modal;
animation-name: slideInDown; animation-name: modal;
} }
.modal-is-closing dialog, .modal-is-closing dialog,
@ -2040,42 +2050,32 @@ dialog:not([open]), dialog[open=false] {
animation-direction: reverse; animation-direction: reverse;
} }
@-webkit-keyframes fadeIn { @-webkit-keyframes modal-overlay {
from { from {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: transparent; background-color: transparent;
} }
to {
background-color: var(--modal-overlay-background-color);
}
} }
@keyframes fadeIn { @keyframes modal-overlay {
from { from {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: transparent; background-color: transparent;
} }
to {
background-color: var(--modal-overlay-background-color);
}
} }
@-webkit-keyframes slideInDown { @-webkit-keyframes modal {
from { from {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
to {
transform: translateY(0);
opacity: 1;
}
} }
@keyframes slideInDown { @keyframes modal {
from { from {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
to {
transform: translateY(0);
opacity: 1;
}
} }
/** /**
* Nav * Nav
@ -2126,6 +2126,23 @@ nav :where(a, [role=link]) {
nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) { nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
text-decoration: none; text-decoration: none;
} }
nav[aria-label=breadcrumb] {
align-items: center;
justify-content: left;
}
nav[aria-label=breadcrumb] ul li {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after {
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
content: "/";
color: var(--muted-color);
}
nav[aria-label=breadcrumb] a[aria-current=page] {
color: inherit;
}
nav [role=button] { nav [role=button] {
margin-right: inherit; margin-right: inherit;
margin-left: inherit; margin-left: inherit;
@ -2183,8 +2200,8 @@ progress::-moz-progress-bar {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
progress:indeterminate { 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; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
-webkit-animation: progressIndeterminate 1s linear infinite; -webkit-animation: progress-indeterminate 1s linear infinite;
animation: progressIndeterminate 1s linear infinite; animation: progress-indeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -2200,7 +2217,7 @@ progress::-moz-progress-bar {
} }
} }
@-webkit-keyframes progressIndeterminate { @-webkit-keyframes progress-indeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -2209,7 +2226,7 @@ progress::-moz-progress-bar {
} }
} }
@keyframes progressIndeterminate { @keyframes progress-indeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -2395,7 +2412,7 @@ li[role=list] > a::after {
cursor: progress; cursor: progress;
} }
[aria-busy=true]:not(input):not(select):not(textarea)::before { [aria-busy=true]:not(input, select, textarea)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2409,7 +2426,7 @@ li[role=list] > a::after {
animation: spinner 0.75s linear infinite; animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity); opacity: var(--loading-spinner-opacity);
} }
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before { [aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0; -webkit-margin-start: 0;
@ -2417,7 +2434,7 @@ li[role=list] > a::after {
-webkit-margin-end: calc(var(--spacing) * 0.5); -webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
} }
[aria-busy=true]:not(input):not(select):not(textarea):empty { [aria-busy=true]:not(input, select, textarea):empty {
text-align: center; text-align: center;
} }
@ -2446,12 +2463,12 @@ a[aria-busy=true] {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a):not(button):not(input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
[data-tooltip]::before, [data-tooltip]::after { [data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
display: block; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2473,7 +2490,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2484,23 +2501,86 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; animation-name: tooltip-caret-slide-top;
}
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-bottom;
animation-name: tooltip-slide-bottom;
}
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-name: tooltip-caret-slide-bottom;
animation-name: tooltip-caret-slide-bottom;
}
[data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-left;
animation-name: tooltip-slide-left;
}
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-name: tooltip-caret-slide-left;
animation-name: tooltip-caret-slide-left;
}
[data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-right;
animation-name: tooltip-slide-right;
}
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-name: tooltip-caret-slide-right;
animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top {
@-webkit-keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2510,8 +2590,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top {
@keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2521,7 +2600,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2534,7 +2613,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2547,6 +2626,145 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

402
css/pico.fluid.classless.css
View file

@ -1,6 +1,6 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* Pico.css v1.5.3 (https://picocss.com) * Pico.css v1.5.4 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2022 - Licensed under MIT
*/ */
/** /**
@ -28,6 +28,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -179,7 +180,7 @@ tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead):not(tfoot) > * > td { :not(thead, tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -198,7 +199,6 @@ kbd {
[data-theme=light], [data-theme=light],
:root:not([data-theme=dark]) { :root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #fff; --background-color: #fff;
--color: hsl(205deg, 20%, 32%); --color: hsl(205deg, 20%, 32%);
--h1-color: hsl(205deg, 30%, 15%); --h1-color: hsl(205deg, 30%, 15%);
@ -283,28 +283,28 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(65, 84, 98)' 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-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"); --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='rgb(198, 40, 40)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(56, 142, 60)' 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");
color-scheme: light;
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme=light]) {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -390,27 +390,27 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
} }
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -496,23 +496,31 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--primary);
} }
/** /**
@ -537,13 +545,13 @@ kbd {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; text-size-adjust: 100%;
text-rendering: optimizeLegibility;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-weight: var(--font-weight); font-weight: var(--font-weight);
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); line-height: var(--line-height);
font-family: var(--font-family); font-family: var(--font-family);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; overflow-wrap: break-word;
cursor: default; cursor: default;
-moz-tab-size: 4; -moz-tab-size: 4;
@ -996,7 +1004,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { input:not([type=checkbox], [type=radio], [type=range]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
} }
@ -1014,13 +1022,13 @@ fieldset legend {
font-weight: var(--form-label-font-weight, var(--font-weight)); font-weight: var(--form-label-font-weight, var(--font-weight));
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
width: 100%; width: 100%;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select, select,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
@ -1046,33 +1054,33 @@ textarea {
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); 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]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) { :where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color); --background-color: var(--form-element-active-background-color);
} }
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) { :where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color); --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, input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
input:not([type=submit]):not([type=button]):not([type=reset])[disabled], input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) { :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important; -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
@ -1083,10 +1091,10 @@ textarea[disabled],
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
background-image: var(--icon-valid); background-image: var(--icon-valid);
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid); background-image: var(--icon-invalid);
} }
:where(input, select, textarea)[aria-invalid=false] { :where(input, select, textarea)[aria-invalid=false] {
@ -1104,7 +1112,7 @@ textarea[disabled],
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important; --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
} }
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { [dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
@ -1117,7 +1125,7 @@ select:invalid {
opacity: 1; opacity: 1;
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
@ -1127,7 +1135,7 @@ select::-ms-expand {
border: 0; border: 0;
background-color: transparent; background-color: transparent;
} }
select:not([multiple]):not([size]) { select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1140,7 +1148,7 @@ select:not([multiple]):not([size]) {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
[dir=rtl] select:not([multiple]):not([size]) { [dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
@ -1293,7 +1301,7 @@ label > :where(input, select, textarea) {
border-radius: calc(var(--border-radius) * 0.5); border-radius: calc(var(--border-radius) * 0.5);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] { input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
--icon-position: 0.75rem; --icon-position: 0.75rem;
--icon-width: 1rem; --icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position)); padding-right: calc(var(--icon-width) + var(--icon-position));
@ -1302,7 +1310,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: var(--icon-width) auto; background-size: var(--icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
background-image: var(--icon-time); background-image: var(--icon-time);
} }
@ -1527,7 +1535,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
transform: scale(1.25); transform: scale(1.25);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem; border-radius: 5rem;
@ -1536,15 +1544,15 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
background-position: center left 1.125rem, center right 0.75rem; background-position: center left 1.125rem, center right 0.75rem;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
background-image: var(--icon-search), var(--icon-valid); background-image: var(--icon-search), var(--icon-valid);
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] { input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
background-image: var(--icon-search), var(--icon-invalid); background-image: var(--icon-search), var(--icon-invalid);
} }
@ -1553,10 +1561,10 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
display: none; display: none;
} }
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] { [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
background-position: center right 1.125rem; background-position: center right 1.125rem;
} }
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] { [dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem; background-position: center right 1.125rem, center left 0.75rem;
} }
@ -1807,6 +1815,8 @@ dialog {
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(--spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
color: var(--color); color: var(--color);
} }
@ -1898,6 +1908,23 @@ nav :where(a, [role=link]) {
nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) { nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
text-decoration: none; text-decoration: none;
} }
nav[aria-label=breadcrumb] {
align-items: center;
justify-content: left;
}
nav[aria-label=breadcrumb] ul li {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
nav[aria-label=breadcrumb] ul li:not(:last-child) a::after {
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
content: "/";
color: var(--muted-color);
}
nav[aria-label=breadcrumb] a[aria-current=page] {
color: inherit;
}
nav [role=button] { nav [role=button] {
margin-right: inherit; margin-right: inherit;
margin-left: inherit; margin-left: inherit;
@ -1955,8 +1982,8 @@ progress::-moz-progress-bar {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
progress:indeterminate { 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; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
-webkit-animation: progressIndeterminate 1s linear infinite; -webkit-animation: progress-indeterminate 1s linear infinite;
animation: progressIndeterminate 1s linear infinite; animation: progress-indeterminate 1s linear infinite;
} }
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -1972,7 +1999,7 @@ progress::-moz-progress-bar {
} }
} }
@-webkit-keyframes progressIndeterminate { @-webkit-keyframes progress-indeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -1981,7 +2008,7 @@ progress::-moz-progress-bar {
} }
} }
@keyframes progressIndeterminate { @keyframes progress-indeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }
@ -2167,7 +2194,7 @@ li[role=list] > a::after {
cursor: progress; cursor: progress;
} }
[aria-busy=true]:not(input):not(select):not(textarea)::before { [aria-busy=true]:not(input, select, textarea)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2181,7 +2208,7 @@ li[role=list] > a::after {
animation: spinner 0.75s linear infinite; animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity); opacity: var(--loading-spinner-opacity);
} }
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before { [aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(--spacing) * 0.5);
margin-left: 0; margin-left: 0;
-webkit-margin-start: 0; -webkit-margin-start: 0;
@ -2189,7 +2216,7 @@ li[role=list] > a::after {
-webkit-margin-end: calc(var(--spacing) * 0.5); -webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(--spacing) * 0.5);
} }
[aria-busy=true]:not(input):not(select):not(textarea):empty { [aria-busy=true]:not(input, select, textarea):empty {
text-align: center; text-align: center;
} }
@ -2218,12 +2245,12 @@ a[aria-busy=true] {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a):not(button):not(input) { [data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
[data-tooltip]::before, [data-tooltip]::after { [data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
display: block; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2245,7 +2272,7 @@ a[aria-busy=true] {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
[data-tooltip]::after { [data-tooltip][data-placement=top]::after, [data-tooltip]::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
@ -2256,23 +2283,86 @@ a[aria-busy=true] {
content: ""; content: "";
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement=bottom]:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement=left]:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement=right]:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
-webkit-animation-duration: 0.2s; -webkit-animation-duration: 0.2s;
animation-duration: 0.2s; animation-duration: 0.2s;
-webkit-animation-name: slide; -webkit-animation-name: tooltip-slide-top;
animation-name: slide; animation-name: tooltip-slide-top;
} }
[data-tooltip]:focus::after, [data-tooltip]:hover::after { [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {
-webkit-animation-name: slideCaret; -webkit-animation-name: tooltip-caret-slide-top;
animation-name: slideCaret; animation-name: tooltip-caret-slide-top;
}
[data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-bottom;
animation-name: tooltip-slide-bottom;
}
[data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
-webkit-animation-name: tooltip-caret-slide-bottom;
animation-name: tooltip-caret-slide-bottom;
}
[data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-left;
animation-name: tooltip-slide-left;
}
[data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
-webkit-animation-name: tooltip-caret-slide-left;
animation-name: tooltip-caret-slide-left;
}
[data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-name: tooltip-slide-right;
animation-name: tooltip-slide-right;
}
[data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
-webkit-animation-name: tooltip-caret-slide-right;
animation-name: tooltip-caret-slide-right;
} }
} }
@-webkit-keyframes tooltip-slide-top {
@-webkit-keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2282,8 +2372,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-top {
@keyframes slide {
from { from {
transform: translate(-50%, 0.75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
@ -2293,7 +2382,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes slideCaret { @-webkit-keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2306,7 +2395,7 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -2319,6 +2408,145 @@ a[aria-busy=true] {
opacity: 1; opacity: 1;
} }
} }
@-webkit-keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@-webkit-keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

122
css/pico.slim.css
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.5.3 (https://picocss.com) * Pico.css v1.5.4 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2022 - Licensed under MIT
* *
* Slim version example * Slim version example
@ -32,6 +32,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -115,7 +116,7 @@ tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead):not(tfoot) > * > td { :not(thead, tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -134,7 +135,6 @@ kbd {
[data-theme=light], [data-theme=light],
:root:not([data-theme=dark]) { :root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #fff; --background-color: #fff;
--color: hsl(205deg, 20%, 32%); --color: hsl(205deg, 20%, 32%);
--h1-color: hsl(205deg, 30%, 15%); --h1-color: hsl(205deg, 30%, 15%);
@ -219,28 +219,28 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(65, 84, 98)' 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-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"); --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='rgb(198, 40, 40)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(56, 142, 60)' 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");
color-scheme: light;
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme=light]) {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -326,27 +326,27 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
} }
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -432,23 +432,31 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--primary);
} }
/** /**
@ -473,13 +481,13 @@ kbd {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; text-size-adjust: 100%;
text-rendering: optimizeLegibility;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-weight: var(--font-weight); font-weight: var(--font-weight);
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); line-height: var(--line-height);
font-family: var(--font-family); font-family: var(--font-family);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; overflow-wrap: break-word;
cursor: default; cursor: default;
-moz-tab-size: 4; -moz-tab-size: 4;
@ -1056,7 +1064,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { input:not([type=checkbox], [type=radio], [type=range]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
} }
@ -1074,13 +1082,13 @@ fieldset legend {
font-weight: var(--form-label-font-weight, var(--font-weight)); font-weight: var(--form-label-font-weight, var(--font-weight));
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
width: 100%; width: 100%;
} }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select, select,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
@ -1105,33 +1113,33 @@ textarea {
font-weight: var(--font-weight); font-weight: var(--font-weight);
} }
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) { :where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color); --background-color: var(--form-element-active-background-color);
} }
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus), input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) { :where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color); --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, input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
} }
input:not([type=submit]):not([type=button]):not([type=reset])[disabled], input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) { :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1142,10 +1150,10 @@ textarea[disabled],
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=false] {
background-image: var(--icon-valid); background-image: var(--icon-valid);
} }
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] { :where(input, select, textarea):not([type=checkbox], [type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid); background-image: var(--icon-invalid);
} }
:where(input, select, textarea)[aria-invalid=false] { :where(input, select, textarea)[aria-invalid=false] {
@ -1163,7 +1171,7 @@ textarea[disabled],
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color); --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
} }
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { [dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
@ -1176,7 +1184,7 @@ select:invalid {
opacity: 1; opacity: 1;
} }
input:not([type=checkbox]):not([type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
@ -1186,7 +1194,7 @@ select::-ms-expand {
border: 0; border: 0;
background-color: transparent; background-color: transparent;
} }
select:not([multiple]):not([size]) { select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal); -webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1199,7 +1207,7 @@ select:not([multiple]):not([size]) {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
[dir=rtl] select:not([multiple]):not([size]) { [dir=rtl] select:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

88
css/themes/default.css
View file

@ -25,6 +25,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -179,7 +180,7 @@ tfoot td {
--border-width: 3px; --border-width: 3px;
} }
:not(thead):not(tfoot) > * > td { :not(thead, tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -198,7 +199,6 @@ kbd {
[data-theme=light], [data-theme=light],
:root:not([data-theme=dark]) { :root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #fff; --background-color: #fff;
--color: hsl(205deg, 20%, 32%); --color: hsl(205deg, 20%, 32%);
--h1-color: hsl(205deg, 30%, 15%); --h1-color: hsl(205deg, 30%, 15%);
@ -283,28 +283,28 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(65, 84, 98)' 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-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"); --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='rgb(198, 40, 40)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(65, 84, 98)' 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-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-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='rgb(56, 142, 60)' 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");
color-scheme: light;
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { :root:not([data-theme=light]) {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -390,27 +390,27 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
} }
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark;
--background-color: #11191f; --background-color: #11191f;
--color: hsl(205deg, 16%, 77%); --color: hsl(205deg, 16%, 77%);
--h1-color: hsl(205deg, 20%, 94%); --h1-color: hsl(205deg, 20%, 94%);
@ -496,23 +496,31 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data: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.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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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='rgb(162, 175, 185)' 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-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"); --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='rgb(183, 28, 28)' 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");
--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-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='rgb(255, 255, 255)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(162, 175, 185)' 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-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-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='rgb(46, 125, 50)' 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");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--primary);
} }
/*# sourceMappingURL=default.css.map */ /*# sourceMappingURL=default.css.map */

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long

8
docs/css/pico.docs.css
View file

@ -5,8 +5,8 @@
* Theme: Additions for docs * Theme: Additions for docs
*/ */
:root { :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-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='rgb(115, 130, 140)' 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: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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"); --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");
} }
@ -70,7 +70,7 @@ body > main div[role=document] {
min-width: 0; min-width: 0;
} }
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after { div[role=document] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after {
display: inline-block; display: inline-block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -180,7 +180,7 @@ main > aside details summary::after {
main > aside details[open] > summary { main > aside details[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
main > aside details[open] > summary:not([role=button]):not(:focus) { main > aside details[open] > summary:not([role=button], :focus) {
color: var(--h1-color); color: var(--h1-color);
} }

2
docs/css/pico.docs.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/css/pico.docs.min.css.map
View file

File diff suppressed because one or more lines are too long

44
docs/js/customization.min.js vendored
View file

File diff suppressed because one or more lines are too long

16
docs/js/grid.min.js vendored
View file

@ -1 +1,15 @@
"use strict";const grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init(){this.addButtons(),this.generateGrid()},addButtons(){let t=document.createElement("P");t.innerHTML='\n <button class="secondary add">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"></line>\n <line x1="5" y1="12" x2="19" y2="12">\'</line>\n </svg>\n '.concat(this.buttons.text.add,'\n </button>\n\n <button class="secondary remove">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="5" y1="12" x2="19" y2="12"></line>\n </svg>\n ').concat(this.buttons.text.remove,"\n </button>"),document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",()=>{this.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",()=>{this.removeColumn()},!1)},generateGrid(){let e="",r='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';for(let t=0;t<this.grid.current;t++)e+="<div>"+(t+1)+"</div>",r+=" &lt;<b>div</b>&gt;"+(t+1)+"&lt;/<b>div</b>&gt;\n";r+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=r},addColumn(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init(); "use strict";const grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init(){this.addButtons(),this.generateGrid()},addButtons(){let t=document.createElement("P");t.innerHTML=`
<button class="secondary add">
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12">'</line>
</svg>
${this.buttons.text.add}
</button>
<button class="secondary remove">
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
${this.buttons.text.remove}
</button>`,document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",()=>{this.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",()=>{this.removeColumn()},!1)},generateGrid(){let e="",r='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';for(let t=0;t<this.grid.current;t++)e+="<div>"+(t+1)+"</div>",r+=" &lt;<b>div</b>&gt;"+(t+1)+"&lt;/<b>div</b>&gt;\n";r+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=r},addColumn(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();

2
docs/js/modal.min.js vendored
View file

@ -1 +1 @@
"use strict";const isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400;let visibleModal=null;const toggleModal=e=>{e.preventDefault();e=document.getElementById(e.currentTarget.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=e=>!(!e.hasAttribute("open")||"false"==e.getAttribute("open")),openModal=e=>{isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width","".concat(getScrollbarWidth(),"px")),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(()=>{visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=e=>{visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(()=>{document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)},getScrollbarWidth=(document.addEventListener("click",e=>{if(null!=visibleModal){const t=visibleModal.querySelector("article");t.contains(e.target)||closeModal(visibleModal)}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{const e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=document.createElement("div"),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height; "use strict";const isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400;let visibleModal=null;const toggleModal=e=>{e.preventDefault();e=document.getElementById(e.currentTarget.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=e=>!(!e.hasAttribute("open")||"false"==e.getAttribute("open")),openModal=e=>{isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width",getScrollbarWidth()+"px"),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(()=>{visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=e=>{visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(()=>{document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)},getScrollbarWidth=(document.addEventListener("click",e=>{if(null!=visibleModal){const t=visibleModal.querySelector("article");t.contains(e.target)||closeModal(visibleModal)}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{const e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=document.createElement("div"),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height;

8
docs/navs.html
View file

@ -25,4 +25,10 @@
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt; &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt; &lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt; &lt;/<b>nav</b>&gt;
&lt;/<b>aside</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html> &lt;/<b>aside</b>&gt;</code></pre></footer></article><p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb, specifying the current page with: <code><i>aria-current</i>=<u>"page"</u></code>.</p><article aria-label="breadcrumb nav example"><nav aria-label="breadcrumb"><ul><li><a href="#">First link</a></li><li><a href="#">Second link</a></li><li><a aria-current="page">Last link</a></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Second link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>aria-current</i>=<u>"page"</u>&gt;Last link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>

2
docs/rtl.html
View file

File diff suppressed because one or more lines are too long

2
docs/scss/layout/_aside.scss
View file

@ -122,7 +122,7 @@ main > aside {
> summary { > summary {
margin-bottom: 0; margin-bottom: 0;
&:not([role=button]):not(:focus) { &:not([role=button], :focus) {
color: var(--h1-color); color: var(--h1-color);
} }
} }

2
docs/scss/layout/_main.scss
View file

@ -31,7 +31,7 @@ body > main {
} }
// External links // External links
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after
{ {
display: inline-block; display: inline-block;
width: 1rem; width: 1rem;

8
docs/scss/themes/docs/_icons.scss
View file

@ -1,7 +1,9 @@
@import "../../../../scss/functions";
// Icons // Icons
// Source: https://feathericons.com/ // Source: https://feathericons.com/
:root { :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-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='#{to-rgb($grey-500)}' 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: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' 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"); --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($black, 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");
} }

36
docs/src/navs.html
View file

@ -116,6 +116,39 @@
</footer> </footer>
</article> </article>
<p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb, specifying the current page with: <code><i>aria-current</i>=<u>"page"</u></code>.</p>
<article aria-label="breadcrumb nav example">
<nav aria-label="breadcrumb">
<ul>
<li>
<a href="#">First link</a>
</li>
<li>
<a href="#">Second link</a>
</li>
<li>
<a aria-current="page">
Last link
</a>
</li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;First link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Second link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>aria-current</i>=<u>"page"</u>&gt;Last link&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
</section> </section>
${require('./_footer.html')} ${require('./_footer.html')}
@ -123,5 +156,6 @@
</div> </div>
</main> </main>
<script src="js/commons.min.js"></script> <script src="js/commons.min.js"></script>
</body> </body>
</html> </html>

2
docs/src/rtl.html
View file

@ -20,7 +20,7 @@
<h1>RTL</h1> <h1>RTL</h1>
<h2>Support for right-to-left text in Pico.</h2> <h2>Support for right-to-left text in Pico.</h2>
</hgroup> </hgroup>
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code>&lt;<b>html</b>&gt</code> element.</p> <p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code>&lt;<b>html</b>&gt</code> element (<a href="https://picocss.com/examples/preview-rtl/">example</a>).</p>
<pre><code><em>&lt;!doctype html&gt;</em> <pre><code><em>&lt;!doctype html&gt;</em>
&lt;<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>&gt; &lt;<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>&gt;

24
docs/src/tooltips.html
View file

@ -28,10 +28,32 @@
<pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt; <pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt; &lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre> &lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;
</code></pre>
</footer> </footer>
</article> </article>
<p><code><i>data-placement</i></code> with the values <code><u>top</u></code>, <code><u>right</u></code>, <code><u>bottom</u></code> or <code><u>left</u></code> is used to control the position of the tooltip.</p>
<article aria-label="Tooltips examples">
<div class="grid">
<div class="top"><button data-tooltip="Top" data-placement="top">Top</button></div>
<div class="right"><button data-tooltip="Right" data-placement="right">Right</button></div>
<div class="bottom"><button data-tooltip="Bottom" data-placement="bottom">Bottom</button></div>
<div class="left"><button data-tooltip="Left" data-placement="left">Left</button></div>
</div>
<footer class="code">
<pre><code>&lt;<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>&gt;Top&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>&gt;Right&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>&gt;Bottom&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>&gt;Left&lt;/<b>button</b>&gt;
</code></pre>
</footer>
</article>
</section> </section>
${require('./_footer.html')} ${require('./_footer.html')}

7
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long

3983
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

26
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@picocss/pico", "name": "@picocss/pico",
"version": "1.5.3", "version": "1.5.4",
"description": "Minimal CSS Framework for semantic HTML", "description": "Minimal CSS Framework for semantic HTML",
"author": "Lucas Larroche", "author": "Lucas Larroche",
"main": "css/pico.min.css", "main": "css/pico.min.css",
@ -79,21 +79,21 @@
"watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'" "watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10", "@babel/cli": "^7.18.10",
"@babel/core": "^7.18.2", "@babel/core": "^7.19.0",
"@babel/preset-env": "^7.18.2", "@babel/preset-env": "^7.19.0",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.8",
"clean-css-cli": "^5.6.0", "clean-css-cli": "^5.6.1",
"css-declaration-sorter": "^6.3.0", "css-declaration-sorter": "^6.3.1",
"html-includes": "^4.4.1", "html-includes": "^4.4.1",
"nodemon": "^2.0.16", "nodemon": "^2.0.19",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.4.14", "postcss": "^8.4.16",
"postcss-cli": "^9.1.0", "postcss-cli": "^10.0.0",
"postcss-scss": "^4.0.4", "postcss-scss": "^4.0.4",
"rollup": "^2.75.6", "rollup": "^2.79.0",
"sass": "^1.52.3", "sass": "^1.54.9",
"uglify-js": "^3.16.0" "uglify-js": "^3.17.0"
}, },
"browserslist": [ "browserslist": [
">= 0.5%", ">= 0.5%",

4
scss/_functions.scss Normal file
View file

@ -0,0 +1,4 @@
// Output color in RGB format
@function to-rgb($color) {
@return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
}

17
scss/components/_modal.scss
View file

@ -22,6 +22,7 @@ dialog {
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(--spacing);
border: 0; border: 0;
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
color: var(--color); color: var(--color);
@ -134,11 +135,11 @@ dialog {
dialog { dialog {
animation-duration: ($animation-duration * 4); animation-duration: ($animation-duration * 4);
animation-name: fadeIn; animation-name: modal-overlay ;
> article { > article {
animation-delay: $animation-duration; animation-delay: $animation-duration;
animation-name: slideInDown; animation-name: modal;
} }
} }
} }
@ -151,23 +152,17 @@ dialog {
} }
} }
@keyframes fadeIn { @keyframes modal-overlay {
from { from {
backdrop-filter: none;
background-color: transparent; background-color: transparent;
} }
to {
background-color: var(--modal-overlay-background-color);
}
} }
@keyframes slideInDown { @keyframes modal {
from { from {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
to {
transform: translateY(0);
opacity: 1;
}
} }
} }

23
scss/components/_nav.scss
View file

@ -63,13 +63,34 @@ nav {
} }
} }
// Breadcrumb
&[aria-label="breadcrumb"] {
align-items: center;
justify-content: left;
& ul li {
padding-inline-start: 0;
&:not(:last-child) {
a::after {
padding-inline-start: 0.5rem;
content: "/";
color: var(--muted-color);
}
}
}
& a[aria-current="page"] {
color: inherit;
}
}
// Minimal support for role="button" // Minimal support for role="button"
[role="button"] { [role="button"] {
margin-right: inherit; margin-right: inherit;
margin-left: inherit; margin-left: inherit;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
} }
} }
// Vertical Nav // Vertical Nav

4
scss/components/_progress.scss
View file

@ -59,7 +59,7 @@ progress {
var(--progress-background-color) 30% var(--progress-background-color) 30%
) )
top left / 150% 150% no-repeat; top left / 150% 150% no-repeat;
animation: progressIndeterminate 1s linear infinite; animation: progress-indeterminate 1s linear infinite;
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -79,7 +79,7 @@ progress {
} }
} }
@keyframes progressIndeterminate { @keyframes progress-indeterminate {
0% { 0% {
background-position: 200% 0; background-position: 200% 0;
} }

12
scss/content/_form-alt-input-types.scss
View file

@ -35,12 +35,8 @@
// Date & Time // Date & Time
// :not() are needed to add Specificity and avoid !important on padding // :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="date"], &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
&[type="datetime-local"],
&[type="month"],
&[type="time"],
&[type="week"] {
--icon-position: 0.75rem; --icon-position: 0.75rem;
--icon-width: 1rem; --icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position)); padding-right: calc(var(--icon-width) + var(--icon-position));
@ -224,7 +220,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
// Search // Search
// :not() are needed to add Specificity and avoid !important on padding // :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] { &[type="search"] {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem; border-radius: 5rem;
@ -263,7 +259,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
[dir="rtl"] { [dir="rtl"] {
:where(input) { :where(input) {
&:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] { &[type="search"] {
background-position: center right 1.125rem; background-position: center right 1.125rem;

30
scss/content/_form.scss
View file

@ -109,7 +109,7 @@ textarea {
// –––––––––––––––––––– // ––––––––––––––––––––
// Force height for alternatives input types // Force height for alternatives input types
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc( height: calc(
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
(var(--border-width) * 2) (var(--border-width) * 2)
@ -133,14 +133,14 @@ fieldset legend {
} }
// Blocks, 100% // Blocks, 100%
input:not([type="checkbox"]):not([type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
textarea { textarea {
width: 100%; width: 100%;
} }
// Reset appearance (Not Checkboxes, Radios, Range and File) // Reset appearance (Not Checkboxes, Radios, Range and File)
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select, select,
textarea { textarea {
appearance: none; appearance: none;
@ -172,7 +172,7 @@ textarea {
} }
// Active & Focus // Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]), input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
:where(select, textarea) { :where(select, textarea) {
&:is(:active, :focus) { &:is(:active, :focus) {
--background-color: var(--form-element-active-background-color); --background-color: var(--form-element-active-background-color);
@ -180,7 +180,7 @@ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="c
} }
// Active & Focus // Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]), input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
:where(select, textarea) { :where(select, textarea) {
&:is(:active, :focus) { &:is(:active, :focus) {
--border-color: var(--form-element-active-border-color); --border-color: var(--form-element-active-border-color);
@ -188,7 +188,7 @@ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="s
} }
// Focus // Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]), input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
select, select,
textarea { textarea {
&:focus { &:focus {
@ -197,10 +197,10 @@ textarea {
} }
// Disabled // Disabled
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], input:not([type="submit"], [type="button"], [type="reset"])[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) { :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity); opacity: var(--form-element-disabled-opacity);
@ -209,7 +209,7 @@ textarea[disabled],
// Aria-invalid // Aria-invalid
:where(input, select, textarea) { :where(input, select, textarea) {
&:not([type="checkbox"]):not([type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
padding-right: calc( padding-right: calc(
@ -274,10 +274,8 @@ textarea[disabled],
[dir="rtl"] { [dir="rtl"] {
:where(input, select, textarea) { :where(input, select, textarea) {
&:not([type="checkbox"]):not([type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
&[aria-invalid], &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"] ){
&[aria-invalid="true"],
&[aria-invalid="false"] {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
} }
@ -295,7 +293,7 @@ select:invalid {
} }
// Margin bottom (Not Checkboxes and Radios) // Margin bottom (Not Checkboxes and Radios)
input:not([type="checkbox"]):not([type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
textarea { textarea {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
@ -309,7 +307,7 @@ select {
background-color: transparent; background-color: transparent;
} }
&:not([multiple]):not([size]) { &:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(--form-element-spacing-horizontal);
@ -323,7 +321,7 @@ select {
[dir="rtl"] { [dir="rtl"] {
select { select {
&:not([multiple]):not([size]) { &:not([multiple], [size]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
} }

2
scss/layout/_document.scss
View file

@ -35,13 +35,13 @@
-webkit-tap-highlight-color: transparent; // 5 -webkit-tap-highlight-color: transparent; // 5
-webkit-text-size-adjust: 100%; // 6 -webkit-text-size-adjust: 100%; // 6
text-size-adjust: 100%; // 6 text-size-adjust: 100%; // 6
text-rendering: optimizeLegibility;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-weight: var(--font-weight); font-weight: var(--font-weight);
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); // 2 line-height: var(--line-height); // 2
font-family: var(--font-family); font-family: var(--font-family);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 3 overflow-wrap: break-word; // 3
cursor: default; // 1 cursor: default; // 1
tab-size: 4; // 4 tab-size: 4; // 4

2
scss/pico.scss
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.5.3 (https://picocss.com) * Pico.css v1.5.4 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2022 - Licensed under MIT
*/ */

2
scss/pico.slim.scss
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.5.3 (https://picocss.com) * Pico.css v1.5.4 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2022 - Licensed under MIT
* *
* Slim version example * Slim version example

8
scss/themes/default.scss
View file

@ -27,3 +27,11 @@
[data-theme="dark"] { [data-theme="dark"] {
@include dark; @include dark;
} }
// Accent-color
progress,
[type="checkbox"],
[type="radio"],
[type="range"] {
accent-color: var(--primary);
}

31
scss/themes/default/_dark.scss
View file

@ -1,7 +1,7 @@
@import "../../functions";
// Default: Dark theme // Default: Dark theme
@mixin dark { @mixin dark {
// Document
color-scheme: dark;
--background-color: #{mix($black, $grey-900, 37.5%)}; --background-color: #{mix($black, $grey-900, 37.5%)};
// Texts colors // Texts colors
@ -128,7 +128,7 @@
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)}; --dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)}; --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
// Progress // Progress
--progress-background-color: #{mix($grey-900, $grey-800)}; --progress-background-color: #{mix($grey-900, $grey-800)};
@ -142,15 +142,18 @@
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
// Icons // Icons
--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-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='#{to-rgb($white)}' 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-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($grey-300, .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-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='#{to-rgb($grey-300)}' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($black, .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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' 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-close: url("data: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)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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($grey-300, .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-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='#{to-rgb($grey-300)}' 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-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($red-900, .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"); --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='#{to-rgb($red-900)}' 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");
--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-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='#{to-rgb($white)}' 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-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($grey-300, .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-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='#{to-rgb($grey-300)}' 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-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($grey-300, .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-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='#{to-rgb($grey-300)}' 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-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($green-800, .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-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='#{to-rgb($green-800)}' 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");
// Document
color-scheme: dark;
} }

33
scss/themes/default/_light.scss
View file

@ -1,8 +1,8 @@
@import "../../functions";
// Default: Light theme // Default: Light theme
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
// Document
color-scheme: light;
--background-color: #{$white}; --background-color: #{$white};
// Texts colors // Texts colors
@ -118,7 +118,7 @@
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))}, #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)}, #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )}; 0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)}; --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">) // Dropdown (<details role="list">)
--dropdown-background-color: #{mix($grey-50, $white, 25%)}; --dropdown-background-color: #{mix($grey-50, $white, 25%)};
@ -128,7 +128,7 @@
--dropdown-hover-background-color: #{$grey-50}; --dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)}; --modal-overlay-background-color: #{rgba($grey-100, 0.7)};
// Progress // Progress
--progress-background-color: #{$grey-100}; --progress-background-color: #{$grey-100};
@ -142,15 +142,18 @@
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);
// Icons // Icons
--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-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='#{to-rgb($white)}' 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-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($grey-700, .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-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='#{to-rgb($grey-700)}' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' 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-close: url("data: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)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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($grey-700, .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-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='#{to-rgb($grey-700)}' 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-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($red-800, .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"); --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='#{to-rgb($red-800)}' 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");
--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-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='#{to-rgb($white)}' 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-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($grey-700, .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-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='#{to-rgb($grey-700)}' 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-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($grey-700, .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-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='#{to-rgb($grey-700)}' 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-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($green-700, .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-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='#{to-rgb($green-700)}' 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");
// Document
color-scheme: light;
} }

5
scss/themes/default/_styles.scss
View file

@ -70,6 +70,9 @@
// Transitions // Transitions
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
// Modal (<dialog>)
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
// Responsives spacings // Responsives spacings
@ -225,7 +228,7 @@ tfoot {
} }
} }
:not(thead):not(tfoot) > * > td { :not(thead, tfoot) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }

2
scss/utilities/_loading.scss
View file

@ -9,7 +9,7 @@
} }
// Everyting except form elements // Everyting except form elements
[aria-busy="true"]:not(input):not(select):not(textarea) { [aria-busy="true"]:not(input, select, textarea) {
&::before { &::before {
display: inline-block; display: inline-block;

195
scss/utilities/_tooltip.scss
View file

@ -5,12 +5,14 @@
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
&:not(a):not(button):not(input) { &:not(a, button, input) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
&[data-placement="top"]::before,
&[data-placement="top"]::after,
&::before, &::before,
&::after { &::after {
display: block; display: block;
@ -36,6 +38,7 @@
} }
// Caret // Caret
&[data-placement="top"]::after,
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
@ -48,6 +51,55 @@
color: var(--tooltip-background-color); color: var(--tooltip-background-color);
} }
&[data-placement="bottom"] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, .25rem);
}
&:after{
transform: translate(-50%, -.3rem);
border: .3rem solid transparent;
border-bottom: .3rem solid;
}
}
&[data-placement="left"] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-.25rem, -50%);
}
&:after{
transform: translate(.3rem, -50%);
border: .3rem solid transparent;
border-left: .3rem solid;
}
}
&[data-placement="right"] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(.25rem, -50%);
}
&:after{
transform: translate(-.3rem, -50%);
border: .3rem solid transparent;
border-right: .3rem solid;
}
}
// Display // Display
&:focus, &:focus,
&:hover { &:hover {
@ -57,28 +109,73 @@
} }
} }
// Animations, excluding touch devices
@if $enable-transitions { @if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&[data-placement="bottom"]:focus,
&[data-placement="bottom"]:hover
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: .2s;
animation-name: slide; animation-name: tooltip-slide-top;
} }
&::after { &::after {
animation-name: slideCaret; animation-name: tooltip-caret-slide-top;
} }
} }
}
}
}
// Animations &[data-placement="bottom"] {
@if $enable-transitions { &:focus,
@keyframes slide { &:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-bottom;
}
&::after {
animation-name: tooltip-caret-slide-bottom;
}
}
}
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-left;
}
&::after {
animation-name: tooltip-caret-slide-left;
}
}
}
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-right;
}
&::after {
animation-name: tooltip-caret-slide-right;
}
}
}
}
@keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, .75rem); transform: translate(-50%, .75rem);
opacity: 0; opacity: 0;
@ -89,7 +186,7 @@
} }
} }
@keyframes slideCaret { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
@ -102,4 +199,80 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -.75rem);
opacity: 0;
}
to {
transform: translate(-50%, .25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -.3rem);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(.05rem, -50%);
opacity: 0;
}
to {
transform: translate(.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-.75rem, -50%);
opacity: 0;
}
to {
transform: translate(.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-.3rem, -50%);
opacity: 1;
}
}
}
} }