mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

surpressimg sass warnings

Browse source
This commit is contained in:
Yohn 2024-11-10 11:27:44 -05:00
parent 4825b265c7
commit a085c20d2f
247 changed files with 9469 additions and 10096 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.node-version
View file

@ -1 +1 @@
18.19.0 20

2
.nvmrc
View file

@ -1 +1 @@
18.19.0 20

183
css/pico.amber.css
View file

@ -230,7 +230,7 @@ details summary[role=button]:not(.outline)::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(183, 136, 0, 0.25); --pico-text-selection-color: rgba(183, 136, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #876400; --pico-primary: #876400;
--pico-primary-background: #ffbf00; --pico-primary-background: #ffbf00;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ details summary[role=button]:not(.outline)::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ details summary[role=button]:not(.outline)::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ details summary[role=button]:not(.outline)::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ details summary[role=button]:not(.outline)::after {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ details summary[role=button]:not(.outline)::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875); --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ details summary[role=button]:not(.outline)::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ details summary[role=button]:not(.outline)::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ details summary[role=button]:not(.outline)::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ details summary[role=button]:not(.outline)::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875); --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ details summary[role=button]:not(.outline)::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ details summary[role=button]:not(.outline)::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ details summary[role=button]:not(.outline)::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ textarea[aria-invalid] {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
:where(input, select, textarea, fieldset, .grid) + small { :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
:where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ details.dropdown {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
details.dropdown summary::after, details.dropdown > summary::after,
details.dropdown > button::after, details.dropdown > button::after,
details.dropdown > a::after { details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ nav details.dropdown {
margin-bottom: 0; margin-bottom: 0;
} }
details.dropdown summary:not([role]) { details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ details.dropdown summary:not([role]) {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus { details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
details.dropdown summary:not([role]):focus { details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
details.dropdown summary:not([role]):focus-visible { details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
details.dropdown summary:not([role])[aria-invalid=false] { details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
details.dropdown summary:not([role])[aria-invalid=true] { details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ nav details.dropdown {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
nav details.dropdown summary::after { nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
nav details.dropdown summary:not([role]) { nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav details.dropdown summary:not([role]):focus-visible { nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
details.dropdown summary + ul { details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ details.dropdown summary + ul {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
details.dropdown summary + ul[dir=rtl] { details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
details.dropdown summary + ul li { details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
details.dropdown summary + ul li:first-of-type { details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
details.dropdown summary + ul li:last-of-type { details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
details.dropdown summary + ul li a { details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ details.dropdown summary + ul li a {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
details.dropdown summary + ul li label { details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
details.dropdown summary + ul li:has(label):hover { details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
details.dropdown[open] summary { details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
details.dropdown[open] summary + ul { details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
details.dropdown[open] summary::before { details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ label > details.dropdown {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ label > details.dropdown {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header .close, dialog article > header :is(a, button)[rel=prev] { dialog > article > header .close, dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article .close, dialog article :is(a, button)[rel=prev] { dialog > article .close, dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ dialog article .close, dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ dialog:not([open]), dialog[open=false] {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

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

File diff suppressed because one or more lines are too long

183
css/pico.blue.css
View file

@ -230,7 +230,7 @@ details summary[role=button]:not(.outline)::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(116, 139, 248, 0.25); --pico-text-selection-color: rgba(116, 139, 248, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #2060df; --pico-primary: #2060df;
--pico-primary-background: #2060df; --pico-primary-background: #2060df;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ details summary[role=button]:not(.outline)::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ details summary[role=button]:not(.outline)::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ details summary[role=button]:not(.outline)::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ details summary[role=button]:not(.outline)::after {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ details summary[role=button]:not(.outline)::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875); --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ details summary[role=button]:not(.outline)::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ details summary[role=button]:not(.outline)::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ details summary[role=button]:not(.outline)::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ details summary[role=button]:not(.outline)::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875); --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ details summary[role=button]:not(.outline)::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ details summary[role=button]:not(.outline)::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ details summary[role=button]:not(.outline)::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ textarea[aria-invalid] {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
:where(input, select, textarea, fieldset, .grid) + small { :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
:where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
:where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ details.dropdown {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
details.dropdown summary::after, details.dropdown > summary::after,
details.dropdown > button::after, details.dropdown > button::after,
details.dropdown > a::after { details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ nav details.dropdown {
margin-bottom: 0; margin-bottom: 0;
} }
details.dropdown summary:not([role]) { details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ details.dropdown summary:not([role]) {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus { details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
details.dropdown summary:not([role]):focus { details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
details.dropdown summary:not([role]):focus-visible { details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
details.dropdown summary:not([role])[aria-invalid=false] { details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
details.dropdown summary:not([role])[aria-invalid=true] { details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ nav details.dropdown {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
nav details.dropdown summary::after { nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
nav details.dropdown summary:not([role]) { nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
nav details.dropdown summary:not([role]):focus-visible { nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
details.dropdown summary + ul { details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ details.dropdown summary + ul {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
details.dropdown summary + ul[dir=rtl] { details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
details.dropdown summary + ul li { details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
details.dropdown summary + ul li:first-of-type { details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
details.dropdown summary + ul li:last-of-type { details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
details.dropdown summary + ul li a { details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ details.dropdown summary + ul li a {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
details.dropdown summary + ul li label { details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
details.dropdown summary + ul li:has(label):hover { details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
details.dropdown[open] summary { details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
details.dropdown[open] summary + ul { details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
details.dropdown[open] summary::before { details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ label > details.dropdown {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ label > details.dropdown {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header .close, dialog article > header :is(a, button)[rel=prev] { dialog > article > header .close, dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article .close, dialog article :is(a, button)[rel=prev] { dialog > article .close, dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ dialog article .close, dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ dialog:not([open]), dialog[open=false] {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

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

File diff suppressed because one or more lines are too long

133
css/pico.classless.amber.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(183, 136, 0, 0.25); --pico-text-selection-color: rgba(183, 136, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #876400; --pico-primary: #876400;
--pico-primary-background: #ffbf00; --pico-primary-background: #ffbf00;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875); --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875); --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.amber.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.blue.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(116, 139, 248, 0.25); --pico-text-selection-color: rgba(116, 139, 248, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #2060df; --pico-primary: #2060df;
--pico-primary-background: #2060df; --pico-primary-background: #2060df;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875); --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875); --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.blue.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.amber.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(183, 136, 0, 0.25); --pico-text-selection-color: rgba(183, 136, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #876400; --pico-primary: #876400;
--pico-primary-background: #ffbf00; --pico-primary-background: #ffbf00;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875); --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875); --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.amber.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.blue.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(116, 139, 248, 0.25); --pico-text-selection-color: rgba(116, 139, 248, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #2060df; --pico-primary: #2060df;
--pico-primary-background: #2060df; --pico-primary-background: #2060df;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875); --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875); --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.blue.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.cyan.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(5, 162, 162, 0.25); --pico-text-selection-color: rgba(5, 162, 162, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #047878; --pico-primary: #047878;
--pico-primary-background: #047878; --pico-primary-background: #047878;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(10, 177, 177, 0.1875); --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(10, 177, 177, 0.1875); --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.cyan.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.fuchsia.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(247, 72, 183, 0.25); --pico-text-selection-color: rgba(247, 72, 183, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c1208b; --pico-primary: #c1208b;
--pico-primary-background: #c1208b; --pico-primary-background: #c1208b;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(248, 105, 191, 0.1875); --pico-text-selection-color: rgba(248, 105, 191, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(248, 105, 191, 0.1875); --pico-text-selection-color: rgba(248, 105, 191, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.fuchsia.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.green.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(71, 164, 23, 0.25); --pico-text-selection-color: rgba(71, 164, 23, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #33790f; --pico-primary: #33790f;
--pico-primary-background: #398712; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(78, 179, 27, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(78, 179, 27, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.green.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.grey.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(145, 145, 145, 0.25); --pico-text-selection-color: rgba(145, 145, 145, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #6a6a6a; --pico-primary: #6a6a6a;
--pico-primary-background: #ababab; --pico-primary-background: #ababab;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(158, 158, 158, 0.1875); --pico-text-selection-color: rgba(158, 158, 158, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(158, 158, 158, 0.1875); --pico-text-selection-color: rgba(158, 158, 158, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.grey.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.indigo.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(148, 134, 225, 0.25); --pico-text-selection-color: rgba(148, 134, 225, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #655cd6; --pico-primary: #655cd6;
--pico-primary-background: #524ed2; --pico-primary-background: #524ed2;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(162, 148, 229, 0.1875); --pico-text-selection-color: rgba(162, 148, 229, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(162, 148, 229, 0.1875); --pico-text-selection-color: rgba(162, 148, 229, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.indigo.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.jade.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(0, 166, 110, 0.25); --pico-text-selection-color: rgba(0, 166, 110, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #007a50; --pico-primary: #007a50;
--pico-primary-background: #007a50; --pico-primary-background: #007a50;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(0, 180, 120, 0.1875); --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(0, 180, 120, 0.1875); --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.jade.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.lime.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(119, 156, 0, 0.25); --pico-text-selection-color: rgba(119, 156, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #577400; --pico-primary: #577400;
--pico-primary-background: #a5d601; --pico-primary-background: #a5d601;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(130, 171, 0, 0.1875); --pico-text-selection-color: rgba(130, 171, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(130, 171, 0, 0.1875); --pico-text-selection-color: rgba(130, 171, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.lime.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.orange.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(244, 93, 44, 0.25); --pico-text-selection-color: rgba(244, 93, 44, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #bd3c13; --pico-primary: #bd3c13;
--pico-primary-background: #d24317; --pico-primary-background: #d24317;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(245, 107, 61, 0.1875); --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(245, 107, 61, 0.1875); --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.orange.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.pink.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(246, 84, 126, 0.25); --pico-text-selection-color: rgba(246, 84, 126, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c72259; --pico-primary: #c72259;
--pico-primary-background: #d92662; --pico-primary-background: #d92662;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(247, 112, 142, 0.1875); --pico-text-selection-color: rgba(247, 112, 142, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(247, 112, 142, 0.1875); --pico-text-selection-color: rgba(247, 112, 142, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.pink.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.pumpkin.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(210, 122, 1, 0.25); --pico-text-selection-color: rgba(210, 122, 1, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #9c5900; --pico-primary: #9c5900;
--pico-primary-background: #ff9500; --pico-primary-background: #ff9500;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(228, 133, 0, 0.1875); --pico-text-selection-color: rgba(228, 133, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(228, 133, 0, 0.1875); --pico-text-selection-color: rgba(228, 133, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.pumpkin.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.purple.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(205, 104, 224, 0.25); --pico-text-selection-color: rgba(205, 104, 224, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #aa40bf; --pico-primary: #aa40bf;
--pico-primary-background: #9236a4; --pico-primary-background: #9236a4;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(212, 125, 228, 0.1875); --pico-text-selection-color: rgba(212, 125, 228, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(212, 125, 228, 0.1875); --pico-text-selection-color: rgba(212, 125, 228, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.purple.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.red.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(240, 96, 72, 0.25); --pico-text-selection-color: rgba(240, 96, 72, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c52f21; --pico-primary: #c52f21;
--pico-primary-background: #c52f21; --pico-primary-background: #c52f21;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(241, 121, 97, 0.1875); --pico-text-selection-color: rgba(241, 121, 97, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(241, 121, 97, 0.1875); --pico-text-selection-color: rgba(241, 121, 97, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.red.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.sand.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(149, 144, 130, 0.25); --pico-text-selection-color: rgba(149, 144, 130, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #6e6a60; --pico-primary: #6e6a60;
--pico-primary-background: #ccc6b4; --pico-primary-background: #ccc6b4;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(163, 158, 143, 0.1875); --pico-text-selection-color: rgba(163, 158, 143, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(163, 158, 143, 0.1875); --pico-text-selection-color: rgba(163, 158, 143, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.sand.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.slate.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(129, 145, 181, 0.25); --pico-text-selection-color: rgba(129, 145, 181, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #5d6b89; --pico-primary: #5d6b89;
--pico-primary-background: #525f7a; --pico-primary-background: #525f7a;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(144, 158, 190, 0.1875); --pico-text-selection-color: rgba(144, 158, 190, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(144, 158, 190, 0.1875); --pico-text-selection-color: rgba(144, 158, 190, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.slate.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.violet.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(167, 128, 212, 0.25); --pico-text-selection-color: rgba(167, 128, 212, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #8352c5; --pico-primary: #8352c5;
--pico-primary-background: #7540bf; --pico-primary-background: #7540bf;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(178, 144, 217, 0.1875); --pico-text-selection-color: rgba(178, 144, 217, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(178, 144, 217, 0.1875); --pico-text-selection-color: rgba(178, 144, 217, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.violet.min.css vendored
View file

File diff suppressed because one or more lines are too long

137
css/pico.classless.conditional.yellow.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(158, 146, 0, 0.25); --pico-text-selection-color: rgba(158, 146, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #756b00; --pico-primary: #756b00;
--pico-primary-background: #f2df0d; --pico-primary-background: #f2df0d;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(173, 159, 0, 0.1875); --pico-text-selection-color: rgba(173, 159, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -318,7 +318,7 @@ input:not([type=submit],
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(173, 159, 0, 0.5); --pico-primary-underline: rgba(173, 159, 0, 0.5);
--pico-primary-hover: #caba01; --pico-primary-hover: #caba01;
--pico-primary-hover-background: #f8e861; --pico-primary-hover-background: rgb(247.5, 232, 96.5);
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(173, 159, 0, 0.375); --pico-primary-focus: rgba(173, 159, 0, 0.375);
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(173, 159, 0, 0.1875); --pico-text-selection-color: rgba(173, 159, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -426,7 +426,7 @@ input:not([type=submit],
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(173, 159, 0, 0.5); --pico-primary-underline: rgba(173, 159, 0, 0.5);
--pico-primary-hover: #caba01; --pico-primary-hover: #caba01;
--pico-primary-hover-background: #f8e861; --pico-primary-hover-background: rgb(247.5, 232, 96.5);
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(173, 159, 0, 0.375); --pico-primary-focus: rgba(173, 159, 0, 0.375);
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.yellow.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.conditional.zinc.css
View file

@ -197,7 +197,7 @@ input:not([type=submit],
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(136, 145, 164, 0.25); --pico-text-selection-color: rgba(136, 145, 164, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #646b79; --pico-primary: #646b79;
--pico-primary-background: #646b79; --pico-primary-background: #646b79;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ input:not([type=submit],
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ input:not([type=submit],
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ input:not([type=submit],
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ input:not([type=submit],
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(150, 158, 175, 0.1875); --pico-text-selection-color: rgba(150, 158, 175, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ input:not([type=submit],
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(150, 158, 175, 0.1875); --pico-text-selection-color: rgba(150, 158, 175, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ input:not([type=submit],
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ input:not([type=submit],
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ input:not([type=submit],
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article :is(a, button)[rel=prev] { .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.conditional.zinc.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(2, 154, 232, 0.25); --pico-text-selection-color: rgba(2, 154, 232, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #0172ad; --pico-primary: #0172ad;
--pico-primary-background: #0172ad; --pico-primary-background: #0172ad;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(1, 170, 255, 0.1875); --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(1, 170, 255, 0.1875); --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

133
css/pico.classless.cyan.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(5, 162, 162, 0.25); --pico-text-selection-color: rgba(5, 162, 162, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #047878; --pico-primary: #047878;
--pico-primary-background: #047878; --pico-primary-background: #047878;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(10, 177, 177, 0.1875); --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(10, 177, 177, 0.1875); --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.cyan.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.fuchsia.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(247, 72, 183, 0.25); --pico-text-selection-color: rgba(247, 72, 183, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c1208b; --pico-primary: #c1208b;
--pico-primary-background: #c1208b; --pico-primary-background: #c1208b;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(248, 105, 191, 0.1875); --pico-text-selection-color: rgba(248, 105, 191, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(248, 105, 191, 0.1875); --pico-text-selection-color: rgba(248, 105, 191, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.fuchsia.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.green.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(71, 164, 23, 0.25); --pico-text-selection-color: rgba(71, 164, 23, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #33790f; --pico-primary: #33790f;
--pico-primary-background: #398712; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(78, 179, 27, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(78, 179, 27, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.green.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.grey.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(145, 145, 145, 0.25); --pico-text-selection-color: rgba(145, 145, 145, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #6a6a6a; --pico-primary: #6a6a6a;
--pico-primary-background: #ababab; --pico-primary-background: #ababab;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(158, 158, 158, 0.1875); --pico-text-selection-color: rgba(158, 158, 158, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(158, 158, 158, 0.1875); --pico-text-selection-color: rgba(158, 158, 158, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.grey.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.indigo.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(148, 134, 225, 0.25); --pico-text-selection-color: rgba(148, 134, 225, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #655cd6; --pico-primary: #655cd6;
--pico-primary-background: #524ed2; --pico-primary-background: #524ed2;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(162, 148, 229, 0.1875); --pico-text-selection-color: rgba(162, 148, 229, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(162, 148, 229, 0.1875); --pico-text-selection-color: rgba(162, 148, 229, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.indigo.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.jade.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(0, 166, 110, 0.25); --pico-text-selection-color: rgba(0, 166, 110, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #007a50; --pico-primary: #007a50;
--pico-primary-background: #007a50; --pico-primary-background: #007a50;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(0, 180, 120, 0.1875); --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(0, 180, 120, 0.1875); --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.jade.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.lime.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(119, 156, 0, 0.25); --pico-text-selection-color: rgba(119, 156, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #577400; --pico-primary: #577400;
--pico-primary-background: #a5d601; --pico-primary-background: #a5d601;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(130, 171, 0, 0.1875); --pico-text-selection-color: rgba(130, 171, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(130, 171, 0, 0.1875); --pico-text-selection-color: rgba(130, 171, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.lime.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

133
css/pico.classless.orange.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(244, 93, 44, 0.25); --pico-text-selection-color: rgba(244, 93, 44, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #bd3c13; --pico-primary: #bd3c13;
--pico-primary-background: #d24317; --pico-primary-background: #d24317;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(245, 107, 61, 0.1875); --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(245, 107, 61, 0.1875); --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.orange.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.pink.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(246, 84, 126, 0.25); --pico-text-selection-color: rgba(246, 84, 126, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c72259; --pico-primary: #c72259;
--pico-primary-background: #d92662; --pico-primary-background: #d92662;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(247, 112, 142, 0.1875); --pico-text-selection-color: rgba(247, 112, 142, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(247, 112, 142, 0.1875); --pico-text-selection-color: rgba(247, 112, 142, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.pink.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.pumpkin.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(210, 122, 1, 0.25); --pico-text-selection-color: rgba(210, 122, 1, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #9c5900; --pico-primary: #9c5900;
--pico-primary-background: #ff9500; --pico-primary-background: #ff9500;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(228, 133, 0, 0.1875); --pico-text-selection-color: rgba(228, 133, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(228, 133, 0, 0.1875); --pico-text-selection-color: rgba(228, 133, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.pumpkin.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.purple.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(205, 104, 224, 0.25); --pico-text-selection-color: rgba(205, 104, 224, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #aa40bf; --pico-primary: #aa40bf;
--pico-primary-background: #9236a4; --pico-primary-background: #9236a4;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(212, 125, 228, 0.1875); --pico-text-selection-color: rgba(212, 125, 228, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(212, 125, 228, 0.1875); --pico-text-selection-color: rgba(212, 125, 228, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.purple.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.red.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(240, 96, 72, 0.25); --pico-text-selection-color: rgba(240, 96, 72, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c52f21; --pico-primary: #c52f21;
--pico-primary-background: #c52f21; --pico-primary-background: #c52f21;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(241, 121, 97, 0.1875); --pico-text-selection-color: rgba(241, 121, 97, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(241, 121, 97, 0.1875); --pico-text-selection-color: rgba(241, 121, 97, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.red.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.sand.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(149, 144, 130, 0.25); --pico-text-selection-color: rgba(149, 144, 130, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #6e6a60; --pico-primary: #6e6a60;
--pico-primary-background: #ccc6b4; --pico-primary-background: #ccc6b4;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(163, 158, 143, 0.1875); --pico-text-selection-color: rgba(163, 158, 143, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(163, 158, 143, 0.1875); --pico-text-selection-color: rgba(163, 158, 143, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.sand.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.slate.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(129, 145, 181, 0.25); --pico-text-selection-color: rgba(129, 145, 181, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #5d6b89; --pico-primary: #5d6b89;
--pico-primary-background: #525f7a; --pico-primary-background: #525f7a;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(144, 158, 190, 0.1875); --pico-text-selection-color: rgba(144, 158, 190, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(144, 158, 190, 0.1875); --pico-text-selection-color: rgba(144, 158, 190, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.slate.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.violet.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(167, 128, 212, 0.25); --pico-text-selection-color: rgba(167, 128, 212, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #8352c5; --pico-primary: #8352c5;
--pico-primary-background: #7540bf; --pico-primary-background: #7540bf;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(178, 144, 217, 0.1875); --pico-text-selection-color: rgba(178, 144, 217, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(178, 144, 217, 0.1875); --pico-text-selection-color: rgba(178, 144, 217, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.violet.min.css vendored
View file

File diff suppressed because one or more lines are too long

137
css/pico.classless.yellow.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(158, 146, 0, 0.25); --pico-text-selection-color: rgba(158, 146, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #756b00; --pico-primary: #756b00;
--pico-primary-background: #f2df0d; --pico-primary-background: #f2df0d;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(173, 159, 0, 0.1875); --pico-text-selection-color: rgba(173, 159, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -318,7 +318,7 @@ details summary[role=button]::after {
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(173, 159, 0, 0.5); --pico-primary-underline: rgba(173, 159, 0, 0.5);
--pico-primary-hover: #caba01; --pico-primary-hover: #caba01;
--pico-primary-hover-background: #f8e861; --pico-primary-hover-background: rgb(247.5, 232, 96.5);
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(173, 159, 0, 0.375); --pico-primary-focus: rgba(173, 159, 0, 0.375);
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(173, 159, 0, 0.1875); --pico-text-selection-color: rgba(173, 159, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -426,7 +426,7 @@ details summary[role=button]::after {
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(173, 159, 0, 0.5); --pico-primary-underline: rgba(173, 159, 0, 0.5);
--pico-primary-hover: #caba01; --pico-primary-hover: #caba01;
--pico-primary-hover-background: #f8e861; --pico-primary-hover-background: rgb(247.5, 232, 96.5);
--pico-primary-hover-border: var(--pico-primary-hover-background); --pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover); --pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(173, 159, 0, 0.375); --pico-primary-focus: rgba(173, 159, 0, 0.375);
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.yellow.min.css vendored
View file

File diff suppressed because one or more lines are too long

133
css/pico.classless.zinc.css
View file

@ -197,7 +197,7 @@ details summary[role=button]::after {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(136, 145, 164, 0.25); --pico-text-selection-color: rgba(136, 145, 164, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #646b79; --pico-primary: #646b79;
--pico-primary-background: #646b79; --pico-primary-background: #646b79;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -235,21 +235,21 @@ details summary[role=button]::after {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -258,11 +258,11 @@ details summary[role=button]::after {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -280,15 +280,15 @@ details summary[role=button]::after {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb; --pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -308,7 +308,7 @@ details summary[role=button]::after {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(150, 158, 175, 0.1875); --pico-text-selection-color: rgba(150, 158, 175, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -343,7 +343,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -353,31 +353,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -395,15 +395,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -416,7 +416,7 @@ details summary[role=button]::after {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(150, 158, 175, 0.1875); --pico-text-selection-color: rgba(150, 158, 175, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -451,7 +451,7 @@ details summary[role=button]::after {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -461,31 +461,31 @@ details summary[role=button]::after {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -503,15 +503,15 @@ details summary[role=button]::after {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -952,8 +952,8 @@ tfoot td {
border-bottom: 0; border-bottom: 0;
} }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd of :not([hidden])) th,
table.striped tbody tr:nth-child(odd) td { table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1160,7 +1160,7 @@ textarea {
border-width: 0; border-width: 0;
} }
input:not([type=checkbox], [type=radio], [type=range]) { input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1951,10 +1951,10 @@ article > footer {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
[aria-busy=true]:not(input, select, textarea, html) { [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
[aria-busy=true]:not(input, select, textarea, html)::before { [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -1964,10 +1964,10 @@ article > footer {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea, html):empty { [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -1988,7 +1988,7 @@ a[aria-busy=true] {
} }
dialog { dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2001,50 +2001,49 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
dialog article { dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
dialog article { dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
dialog article { dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
dialog article > header > * { dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header :is(a, button)[rel=prev] { dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
dialog article > footer { dialog > article > footer {
text-align: right; text-align: right;
} }
dialog article > footer button, dialog > article > footer button,
dialog article > footer [role=button] { dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > footer button:not(:first-of-type), dialog > article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article :is(a, button)[rel=prev] { dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2060,11 +2059,19 @@ dialog article :is(a, button)[rel=prev] {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
dialog:not([open]) article, dialog[open=false] article {
transform: scale(0.7);
}
body:has(dialog[open]) {
overflow: hidden;
} }
/** /**
@ -2240,7 +2247,7 @@ progress::-moz-progress-bar {
[data-tooltip] { [data-tooltip] {
position: relative; position: relative;
} }
[data-tooltip]:not(a, button, input) { [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.classless.zinc.min.css vendored
View file

File diff suppressed because one or more lines are too long

183
css/pico.conditional.amber.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(183, 136, 0, 0.25); --pico-text-selection-color: rgba(183, 136, 0, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #876400; --pico-primary: #876400;
--pico-primary-background: #ffbf00; --pico-primary-background: #ffbf00;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875); --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875); --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.conditional.amber.min.css vendored
View file

File diff suppressed because one or more lines are too long

183
css/pico.conditional.blue.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(116, 139, 248, 0.25); --pico-text-selection-color: rgba(116, 139, 248, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #2060df; --pico-primary: #2060df;
--pico-primary-background: #2060df; --pico-primary-background: #2060df;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875); --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(137, 153, 249, 0.1875); --pico-text-selection-color: rgba(137, 153, 249, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.conditional.blue.min.css vendored
View file

File diff suppressed because one or more lines are too long

183
css/pico.conditional.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(2, 154, 232, 0.25); --pico-text-selection-color: rgba(2, 154, 232, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #0172ad; --pico-primary: #0172ad;
--pico-primary-background: #0172ad; --pico-primary-background: #0172ad;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(1, 170, 255, 0.1875); --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(1, 170, 255, 0.1875); --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

183
css/pico.conditional.cyan.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(5, 162, 162, 0.25); --pico-text-selection-color: rgba(5, 162, 162, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #047878; --pico-primary: #047878;
--pico-primary-background: #047878; --pico-primary-background: #047878;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(10, 177, 177, 0.1875); --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(10, 177, 177, 0.1875); --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.conditional.cyan.min.css vendored
View file

File diff suppressed because one or more lines are too long

183
css/pico.conditional.fuchsia.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(247, 72, 183, 0.25); --pico-text-selection-color: rgba(247, 72, 183, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #c1208b; --pico-primary: #c1208b;
--pico-primary-background: #c1208b; --pico-primary-background: #c1208b;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(248, 105, 191, 0.1875); --pico-text-selection-color: rgba(248, 105, 191, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(248, 105, 191, 0.1875); --pico-text-selection-color: rgba(248, 105, 191, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.conditional.fuchsia.min.css vendored
View file

File diff suppressed because one or more lines are too long

183
css/pico.conditional.green.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(71, 164, 23, 0.25); --pico-text-selection-color: rgba(71, 164, 23, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #33790f; --pico-primary: #33790f;
--pico-primary-background: #398712; --pico-primary-background: #398712;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(78, 179, 27, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(78, 179, 27, 0.1875); --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.conditional.green.min.css vendored
View file

File diff suppressed because one or more lines are too long

183
css/pico.conditional.grey.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(145, 145, 145, 0.25); --pico-text-selection-color: rgba(145, 145, 145, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #6a6a6a; --pico-primary: #6a6a6a;
--pico-primary-background: #ababab; --pico-primary-background: #ababab;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(158, 158, 158, 0.1875); --pico-text-selection-color: rgba(158, 158, 158, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(158, 158, 158, 0.1875); --pico-text-selection-color: rgba(158, 158, 158, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.conditional.grey.min.css vendored
View file

File diff suppressed because one or more lines are too long

183
css/pico.conditional.indigo.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(148, 134, 225, 0.25); --pico-text-selection-color: rgba(148, 134, 225, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #655cd6; --pico-primary: #655cd6;
--pico-primary-background: #524ed2; --pico-primary-background: #524ed2;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(162, 148, 229, 0.1875); --pico-text-selection-color: rgba(162, 148, 229, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(162, 148, 229, 0.1875); --pico-text-selection-color: rgba(162, 148, 229, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

2
css/pico.conditional.indigo.min.css vendored
View file

File diff suppressed because one or more lines are too long

183
css/pico.conditional.jade.css
View file

@ -230,7 +230,7 @@ nav details.dropdown summary:focus-visible {
--pico-color: #373c44; --pico-color: #373c44;
--pico-text-selection-color: rgba(0, 166, 110, 0.25); --pico-text-selection-color: rgba(0, 166, 110, 0.25);
--pico-muted-color: #646b79; --pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0; --pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #007a50; --pico-primary: #007a50;
--pico-primary-background: #007a50; --pico-primary-background: #007a50;
--pico-primary-border: var(--pico-primary-background); --pico-primary-border: var(--pico-primary-background);
@ -268,21 +268,21 @@ nav details.dropdown summary:focus-visible {
--pico-h4-color: #4d535e; --pico-h4-color: #4d535e;
--pico-h5-color: #5c6370; --pico-h5-color: #5c6370;
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #1d6a54; --pico-ins-color: rgb(28.5, 105.5, 84);
--pico-del-color: #883935; --pico-del-color: rgb(136, 56.5, 53);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #f3f5f7; --pico-code-background-color: rgb(243, 244.5, 246.75);
--pico-code-color: #646b79; --pico-code-color: #646b79;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #fbfcfc; --pico-form-element-background-color: rgb(251, 251.5, 252.25);
--pico-form-element-selected-background-color: #dfe3eb; --pico-form-element-selected-background-color: #dfe3eb;
--pico-form-element-border-color: #cfd5e2; --pico-form-element-border-color: #cfd5e2;
--pico-form-element-color: #23262c; --pico-form-element-color: #23262c;
@ -291,11 +291,11 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b86a6b; --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
--pico-form-element-invalid-active-border-color: #c84f48; --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #4c9b8a; --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
--pico-form-element-valid-active-border-color: #279977; --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #bfc7d9; --pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -313,7 +313,7 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: var(--pico-background-color); --pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color); --pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--pico-dropdown-background-color: #fff; --pico-dropdown-background-color: #fff;
--pico-dropdown-border-color: #eff1f4; --pico-dropdown-border-color: #eff1f4;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
@ -325,8 +325,8 @@ nav details.dropdown summary:focus-visible {
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(200, 79, 72)' 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"); --pico-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(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=light] input:is([type=submit], [data-theme=light] input:is([type=submit],
[type=button], [type=button],
@ -346,7 +346,7 @@ nav details.dropdown summary:focus-visible {
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]) {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(0, 180, 120, 0.1875); --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -381,7 +381,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -391,31 +391,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -433,20 +433,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
:root:not([data-theme]) input:is([type=submit], :root:not([data-theme]) input:is([type=submit],
[type=button], [type=button],
@ -469,7 +469,7 @@ nav details.dropdown summary:focus-visible {
} }
[data-theme=dark] { [data-theme=dark] {
color-scheme: dark; color-scheme: dark;
--pico-background-color: #13171f; --pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0; --pico-color: #c2c7d0;
--pico-text-selection-color: rgba(0, 180, 120, 0.1875); --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
--pico-muted-color: #7b8495; --pico-muted-color: #7b8495;
@ -504,7 +504,7 @@ nav details.dropdown summary:focus-visible {
--pico-contrast-hover-underline: var(--pico-contrast-hover); --pico-contrast-hover-underline: var(--pico-contrast-hover);
--pico-contrast-focus: rgba(207, 213, 226, 0.25); --pico-contrast-focus: rgba(207, 213, 226, 0.25);
--pico-contrast-inverse: #000; --pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
--pico-h1-color: #f0f1f3; --pico-h1-color: #f0f1f3;
--pico-h2-color: #e0e3e7; --pico-h2-color: #e0e3e7;
--pico-h3-color: #c2c7d0; --pico-h3-color: #c2c7d0;
@ -514,31 +514,31 @@ nav details.dropdown summary:focus-visible {
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #62af9a; --pico-ins-color: #62af9a;
--pico-del-color: #ce7e7b; --pico-del-color: rgb(205.5, 126, 123);
--pico-blockquote-border-color: var(--pico-muted-border-color); --pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color); --pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color); --pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
--pico-code-background-color: #1a1f28; --pico-code-background-color: rgb(26, 30.5, 40.25);
--pico-code-color: #8891a4; --pico-code-color: #8891a4;
--pico-code-kbd-background-color: var(--pico-color); --pico-code-kbd-background-color: var(--pico-color);
--pico-code-kbd-color: var(--pico-background-color); --pico-code-kbd-color: var(--pico-background-color);
--pico-form-element-background-color: #1c212c; --pico-form-element-background-color: rgb(28, 33, 43.5);
--pico-form-element-selected-background-color: #2a3140; --pico-form-element-selected-background-color: #2a3140;
--pico-form-element-border-color: #2a3140; --pico-form-element-border-color: #2a3140;
--pico-form-element-color: #e0e3e7; --pico-form-element-color: #e0e3e7;
--pico-form-element-placeholder-color: #8891a4; --pico-form-element-placeholder-color: #8891a4;
--pico-form-element-active-background-color: #1a1f28; --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
--pico-form-element-active-border-color: var(--pico-primary-border); --pico-form-element-active-border-color: var(--pico-primary-border);
--pico-form-element-focus-color: var(--pico-primary-border); --pico-form-element-focus-color: var(--pico-primary-border);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #964a50; --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
--pico-form-element-invalid-active-border-color: #b7403b; --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
--pico-form-element-valid-border-color: #2a7b6f; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #16896a; --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
--pico-switch-background-color: #333c4e; --pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background); --pico-switch-checked-background-color: var(--pico-primary-background);
@ -556,20 +556,20 @@ nav details.dropdown summary:focus-visible {
--pico-card-background-color: #181c25; --pico-card-background-color: #181c25;
--pico-card-border-color: var(--pico-card-background-color); --pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #1a1f28; --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
--pico-dropdown-background-color: #181c25; --pico-dropdown-background-color: #181c25;
--pico-dropdown-border-color: #202632; --pico-dropdown-border-color: #202632;
--pico-dropdown-box-shadow: var(--pico-box-shadow); --pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color); --pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632; --pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5; --pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632; --pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background); --pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background); --pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse); --pico-tooltip-color: var(--pico-contrast-inverse);
--pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --pico-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(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-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(150, 74, 80)' 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"); --pico-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(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
} }
[data-theme=dark] input:is([type=submit], [data-theme=dark] input:is([type=submit],
[type=button], [type=button],
@ -1118,8 +1118,8 @@ main {
border-bottom: 0; border-bottom: 0;
} }
.pico table.striped tbody tr:nth-child(odd) th, .pico table.striped tbody tr:nth-child(odd of :not([hidden])) th,
.pico table.striped tbody tr:nth-child(odd) td { .pico table.striped tbody tr:nth-child(odd of :not([hidden])) td {
background-color: var(--pico-table-row-stripped-background-color); background-color: var(--pico-table-row-stripped-background-color);
} }
@ -1326,7 +1326,7 @@ main {
border-width: 0; border-width: 0;
} }
.pico input:not([type=checkbox], [type=radio], [type=range]) { .pico input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
} }
@ -1528,17 +1528,17 @@ main {
background-size: 1rem var(--pico-icon-height) !important; background-size: 1rem var(--pico-icon-height) !important;
} }
.pico :where(input, select, textarea, fieldset, .grid) + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown) + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--pico-spacing) * -0.75); margin-top: calc(var(--pico-spacing) * -0.75);
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color); color: var(--pico-muted-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=false] + small {
color: var(--pico-ins-color); color: var(--pico-ins-color);
} }
.pico :where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { .pico :where(input, select, textarea, fieldset, .grid, .dropdown)[aria-invalid=true] + small {
color: var(--pico-del-color); color: var(--pico-del-color);
} }
@ -1993,7 +1993,7 @@ main {
position: relative; position: relative;
border-bottom: none; border-bottom: none;
} }
.pico details.dropdown summary::after, .pico details.dropdown > summary::after,
.pico details.dropdown > button::after, .pico details.dropdown > button::after,
.pico details.dropdown > a::after { .pico details.dropdown > a::after {
display: block; display: block;
@ -2013,7 +2013,7 @@ main {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown summary:not([role]) { .pico details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
border: var(--pico-border-width) solid var(--pico-form-element-border-color); border: var(--pico-border-width) solid var(--pico-form-element-border-color);
@ -2027,22 +2027,22 @@ main {
user-select: none; user-select: none;
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
} }
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
border-color: var(--pico-form-element-active-border-color); border-color: var(--pico-form-element-active-border-color);
background-color: var(--pico-form-element-active-background-color); background-color: var(--pico-form-element-active-background-color);
} }
.pico details.dropdown summary:not([role]):focus { .pico details.dropdown > summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
} }
.pico details.dropdown summary:not([role]):focus-visible { .pico details.dropdown > summary:not([role]):focus-visible {
outline: none; outline: none;
} }
.pico details.dropdown summary:not([role])[aria-invalid=false] { .pico details.dropdown > summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color); --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
} }
.pico details.dropdown summary:not([role])[aria-invalid=true] { .pico details.dropdown > summary:not([role])[aria-invalid=true] {
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color); --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
@ -2052,18 +2052,18 @@ main {
display: inline; display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
} }
.pico nav details.dropdown summary::after { .pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem); transform: rotate(0deg) translateX(0rem);
} }
.pico nav details.dropdown summary:not([role]) { .pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
} }
.pico nav details.dropdown summary:not([role]):focus-visible { .pico nav details.dropdown > summary:not([role]):focus-visible {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
} }
.pico details.dropdown summary + ul { .pico details.dropdown > summary + ul {
display: flex; display: flex;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
@ -2084,23 +2084,23 @@ main {
opacity: 0; opacity: 0;
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
} }
.pico details.dropdown summary + ul[dir=rtl] { .pico details.dropdown > summary + ul[dir=rtl] {
right: 0; right: 0;
left: auto; left: auto;
} }
.pico details.dropdown summary + ul li { .pico details.dropdown > summary + ul li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
list-style: none; list-style: none;
} }
.pico details.dropdown summary + ul li:first-of-type { .pico details.dropdown > summary + ul li:first-of-type {
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li:last-of-type { .pico details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
} }
.pico details.dropdown summary + ul li a { .pico details.dropdown > summary + ul li a {
display: block; display: block;
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
@ -2110,27 +2110,27 @@ main {
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { .pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown summary + ul li label { .pico details.dropdown > summary + ul li label {
width: 100%; width: 100%;
} }
.pico details.dropdown summary + ul li:has(label):hover { .pico details.dropdown > summary + ul li:has(label):hover {
background-color: var(--pico-dropdown-hover-background-color); background-color: var(--pico-dropdown-hover-background-color);
} }
.pico details.dropdown[open] summary { .pico details.dropdown[open] > summary {
margin-bottom: 0; margin-bottom: 0;
} }
.pico details.dropdown[open] summary + ul { .pico details.dropdown[open] > summary + ul {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
} }
.pico details.dropdown[open] summary::before { .pico details.dropdown[open] > summary::before {
display: block; display: block;
z-index: 1; z-index: 1;
position: fixed; position: fixed;
@ -2277,10 +2277,10 @@ main {
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
.pico [aria-busy=true]:not(input, select, textarea, html) { .pico [aria-busy=true]:not(input, select, textarea, html, form) {
white-space: nowrap; white-space: nowrap;
} }
.pico [aria-busy=true]:not(input, select, textarea, html)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form)::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2290,10 +2290,10 @@ main {
content: ""; content: "";
vertical-align: -0.125em; vertical-align: -0.125em;
} }
.pico [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { .pico [aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
margin-inline-end: calc(var(--pico-spacing) * 0.5); margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
.pico [aria-busy=true]:not(input, select, textarea, html):empty { .pico [aria-busy=true]:not(input, select, textarea, html, form):empty {
text-align: center; text-align: center;
} }
@ -2314,7 +2314,7 @@ main {
} }
.pico dialog { .pico dialog {
display: flex; display: grid;
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
@ -2327,50 +2327,49 @@ main {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: 0; padding: var(--pico-spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter); backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color); background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color); color: var(--pico-color);
transform: scale(1);
transition: transform var(--pico-transition);
} }
.pico dialog article { .pico dialog > article {
width: 100%; width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.pico dialog article { .pico dialog > article {
max-width: 510px; max-width: 510px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.pico dialog article { .pico dialog > article {
max-width: 700px; max-width: 700px;
} }
} }
.pico dialog article > header > * { .pico dialog > article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] { .pico dialog > article > header .close, .pico dialog > article > header :is(a, button)[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
.pico dialog article > footer { .pico dialog > article > footer {
text-align: right; text-align: right;
} }
.pico dialog article > footer button, .pico dialog > article > footer button,
.pico dialog article > footer [role=button] { .pico dialog > article > footer [role=button] {
margin-bottom: 0; margin-bottom: 0;
} }
.pico dialog article > footer button:not(:first-of-type), .pico dialog > article > footer button:not(:first-of-type),
.pico dialog article > footer [role=button]:not(:first-of-type) { .pico dialog > article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] { .pico dialog > article .close, .pico dialog > article :is(a, button)[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2386,11 +2385,15 @@ main {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { .pico dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
.pico dialog:not([open]), .pico dialog[open=false] { .pico dialog:not([open]), .pico dialog[open=false] {
display: none; visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
} }
.modal-is-open { .modal-is-open {
@ -2404,6 +2407,10 @@ main {
touch-action: auto; touch-action: auto;
} }
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s; animation-duration: 0.2s;
@ -2611,7 +2618,7 @@ main {
.pico [data-tooltip] { .pico [data-tooltip] {
position: relative; position: relative;
} }
.pico [data-tooltip]:not(a, button, input) { .pico [data-tooltip]:not(a, button, input, [role=button]) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;

Some files were not shown because too many files have changed in this diff Show more