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

chore: build

Browse source
This commit is contained in:
Lucas Larroche 2023-03-15 22:16:47 +07:00
parent 5fb36d98e7
commit d24f3c000c
9 changed files with 288 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

150
css/pico.classless.css
View file

@ -52,8 +52,8 @@
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: #fde7c0;
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #007a50; --pico-ins-color: #1d6a54;
--pico-del-color: #9b2318; --pico-del-color: #883935;
--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);
@ -75,11 +75,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #9b2318; --pico-form-element-invalid-border-color: #b86a6b;
--pico-form-element-invalid-active-border-color: #861d13; --pico-form-element-invalid-active-border-color: #c84f48;
--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: #007a50; --pico-form-element-valid-border-color: #4c9b8a;
--pico-form-element-valid-active-border-color: #006d46; --pico-form-element-valid-active-border-color: #279977;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -116,8 +116,8 @@
--pico-icon-chevron-button-contrast: var(--pico-icon-chevron-button); --pico-icon-chevron-button-contrast: var(--pico-icon-chevron-button);
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 122, 80)' stroke-width='2' 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(29, 106, 84)' stroke-width='2' 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(155, 35, 24)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(136, 57, 53)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: light; color-scheme: light;
@ -183,8 +183,8 @@
--pico-h6-color: #8891a4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #179e71; --pico-ins-color: #62af9a;
--pico-del-color: #d77261; --pico-del-color: #ce7e7b;
--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);
@ -206,11 +206,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #d77261; --pico-form-element-invalid-border-color: #964a50;
--pico-form-element-invalid-active-border-color: #b95046; --pico-form-element-invalid-active-border-color: #b7403b;
--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: #179e71; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #15845e; --pico-form-element-valid-active-border-color: #16896a;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -247,8 +247,8 @@
--pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(23, 158, 113)' stroke-width='2' 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(98, 175, 154)' stroke-width='2' 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(215, 114, 97)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(206, 126, 123)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
@ -307,8 +307,8 @@
--pico-h6-color: #8891a4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #179e71; --pico-ins-color: #62af9a;
--pico-del-color: #d77261; --pico-del-color: #ce7e7b;
--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);
@ -330,11 +330,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #d77261; --pico-form-element-invalid-border-color: #964a50;
--pico-form-element-invalid-active-border-color: #b95046; --pico-form-element-invalid-active-border-color: #b7403b;
--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: #179e71; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #15845e; --pico-form-element-valid-active-border-color: #16896a;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -371,8 +371,8 @@
--pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(23, 158, 113)' stroke-width='2' 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(98, 175, 154)' stroke-width='2' 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(215, 114, 97)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(206, 126, 123)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
@ -1248,10 +1248,14 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.25); margin-bottom: calc(var(--pico-spacing) * 0.375);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5);
}
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
@ -1359,6 +1363,8 @@ textarea[disabled],
} }
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) { :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
--pico-border-color: var(--pico-form-element-valid-active-border-color) !important; --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
}
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
} }
:where(input, select, textarea)[aria-invalid=true] { :where(input, select, textarea)[aria-invalid=true] {
@ -1366,6 +1372,8 @@ textarea[disabled],
} }
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) { :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
--pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
}
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
} }
@ -1443,6 +1451,24 @@ label > :where(input, select, textarea) {
/** /**
* Checkboxes, Radios and Switches * Checkboxes, Radios and Switches
*/ */
label:has([type=checkbox], [type=radio]) {
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
}
label:has([disabled]),
[type=checkbox][disabled] + label,
[type=radio][disabled] + label {
opacity: var(--pico-form-element-disabled-opacity);
pointer-events: none;
}
label:has([disabled]) [type=checkbox],
label:has([disabled]) [type=radio] {
opacity: initial;
}
[type=checkbox], [type=checkbox],
[type=radio] { [type=radio] {
-webkit-appearance: none; -webkit-appearance: none;
@ -1451,12 +1477,8 @@ label > :where(input, select, textarea) {
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em; margin-top: -0.125em;
margin-right: 0.375em; -webkit-margin-end: 0.5em;
margin-left: 0; margin-inline-end: 0.5em;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1479,10 +1501,14 @@ label > :where(input, select, textarea) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-right: 0.375em;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type),
[type=radio] ~ label:not(:last-of-type) {
-webkit-margin-end: 1em;
margin-inline-end: 1em;
}
[type=checkbox]:indeterminate { [type=checkbox]:indeterminate {
--pico-background-color: var(--pico-primary-background); --pico-background-color: var(--pico-primary-background);
@ -1504,7 +1530,6 @@ label > :where(input, select, textarea) {
[type=checkbox][role=switch] { [type=checkbox][role=switch] {
--pico-background-color: var(--pico-switch-background-color); --pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color);
--pico-color: var(--pico-switch-color); --pico-color: var(--pico-switch-color);
width: 2.25em; width: 2.25em;
height: 1.25em; height: 1.25em;
@ -1513,14 +1538,9 @@ label > :where(input, select, textarea) {
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
line-height: 1.25em; line-height: 1.25em;
} }
[type=checkbox][role=switch]:focus { [type=checkbox][role=switch]:not([aria-invalid]) {
--pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color); --pico-border-color: var(--pico-switch-background-color);
} }
[type=checkbox][role=switch]:checked {
--pico-background-color: var(--pico-switch-checked-background-color);
--pico-border-color: var(--pico-switch-checked-background-color);
}
[type=checkbox][role=switch]:before { [type=checkbox][role=switch]:before {
display: block; display: block;
width: calc(1.25em - (var(--pico-border-width) * 2)); width: calc(1.25em - (var(--pico-border-width) * 2));
@ -1530,29 +1550,52 @@ label > :where(input, select, textarea) {
content: ""; content: "";
transition: margin 0.1s ease-in-out; transition: margin 0.1s ease-in-out;
} }
[type=checkbox][role=switch]:focus {
--pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color);
}
[type=checkbox][role=switch]:checked { [type=checkbox][role=switch]:checked {
--pico-background-color: var(--pico-switch-checked-background-color);
--pico-border-color: var(--pico-switch-checked-background-color);
background-image: none; background-image: none;
} }
[type=checkbox][role=switch]:checked::before { [type=checkbox][role=switch]:checked::before {
margin-left: calc(1.125em - var(--pico-border-width));
-webkit-margin-start: calc(1.125em - var(--pico-border-width)); -webkit-margin-start: calc(1.125em - var(--pico-border-width));
margin-inline-start: calc(1.125em - var(--pico-border-width)); margin-inline-start: calc(1.125em - var(--pico-border-width));
} }
[type=checkbox][role=switch][disabled] {
--pico-background-color: var(--pico-border-color);
}
[type=checkbox][aria-invalid=false], [type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
[type=checkbox]:checked[aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked,
[type=radio][aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked:active,
[type=radio]:checked[aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
[type=checkbox][role=switch][aria-invalid=false], --pico-background-color: var(--pico-form-element-valid-border-color);
[type=checkbox][role=switch]:checked[aria-invalid=false] { }
[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true],
[type=checkbox][role=switch]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
--pico-background-color: var(--pico-form-element-invalid-border-color);
}
[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
[type=radio][aria-invalid=false]:checked,
[type=radio][aria-invalid=false]:checked:active,
[type=radio][aria-invalid=false]:checked:focus,
[type=checkbox][role=switch][aria-invalid=false]:checked,
[type=checkbox][role=switch][aria-invalid=false]:checked:active,
[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
--pico-border-color: var(--pico-form-element-valid-border-color); --pico-border-color: var(--pico-form-element-valid-border-color);
} }
[type=checkbox][aria-invalid=true], [type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
[type=checkbox]:checked[aria-invalid=true],
[type=radio][aria-invalid=true],
[type=radio]:checked[aria-invalid=true], [type=radio]:checked[aria-invalid=true],
[type=checkbox][role=switch][aria-invalid=true], [type=radio]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true] { [type=radio]:checked:focus[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true],
[type=checkbox][role=switch]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
--pico-border-color: var(--pico-form-element-invalid-border-color); --pico-border-color: var(--pico-form-element-invalid-border-color);
} }
@ -2086,11 +2129,6 @@ details[role=list][open] summary::before {
} }
[aria-busy=true]:not(input, select, textarea):not(:empty)::before { [aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--pico-spacing) * 0.5); margin-right: calc(var(--pico-spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--pico-spacing) * 0.5);
margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea):empty { [aria-busy=true]:not(input, select, textarea):empty {
text-align: center; text-align: center;

2
css/pico.classless.css.map
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

150
css/pico.css
View file

@ -52,8 +52,8 @@
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: #fde7c0;
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #007a50; --pico-ins-color: #1d6a54;
--pico-del-color: #9b2318; --pico-del-color: #883935;
--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);
@ -75,11 +75,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #9b2318; --pico-form-element-invalid-border-color: #b86a6b;
--pico-form-element-invalid-active-border-color: #861d13; --pico-form-element-invalid-active-border-color: #c84f48;
--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: #007a50; --pico-form-element-valid-border-color: #4c9b8a;
--pico-form-element-valid-active-border-color: #006d46; --pico-form-element-valid-active-border-color: #279977;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -116,8 +116,8 @@
--pico-icon-chevron-button-contrast: var(--pico-icon-chevron-button); --pico-icon-chevron-button-contrast: var(--pico-icon-chevron-button);
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 122, 80)' stroke-width='2' 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(29, 106, 84)' stroke-width='2' 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(155, 35, 24)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(136, 57, 53)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: light; color-scheme: light;
@ -183,8 +183,8 @@
--pico-h6-color: #8891a4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #179e71; --pico-ins-color: #62af9a;
--pico-del-color: #d77261; --pico-del-color: #ce7e7b;
--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);
@ -206,11 +206,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #d77261; --pico-form-element-invalid-border-color: #964a50;
--pico-form-element-invalid-active-border-color: #b95046; --pico-form-element-invalid-active-border-color: #b7403b;
--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: #179e71; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #15845e; --pico-form-element-valid-active-border-color: #16896a;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -247,8 +247,8 @@
--pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(23, 158, 113)' stroke-width='2' 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(98, 175, 154)' stroke-width='2' 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(215, 114, 97)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(206, 126, 123)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
@ -307,8 +307,8 @@
--pico-h6-color: #8891a4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #179e71; --pico-ins-color: #62af9a;
--pico-del-color: #d77261; --pico-del-color: #ce7e7b;
--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);
@ -330,11 +330,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #d77261; --pico-form-element-invalid-border-color: #964a50;
--pico-form-element-invalid-active-border-color: #b95046; --pico-form-element-invalid-active-border-color: #b7403b;
--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: #179e71; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #15845e; --pico-form-element-valid-active-border-color: #16896a;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -371,8 +371,8 @@
--pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(23, 158, 113)' stroke-width='2' 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(98, 175, 154)' stroke-width='2' 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(215, 114, 97)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(206, 126, 123)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
@ -1339,10 +1339,14 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.25); margin-bottom: calc(var(--pico-spacing) * 0.375);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5);
}
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
@ -1450,6 +1454,8 @@ textarea[disabled],
} }
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) { :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
--pico-border-color: var(--pico-form-element-valid-active-border-color) !important; --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
}
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
} }
:where(input, select, textarea)[aria-invalid=true] { :where(input, select, textarea)[aria-invalid=true] {
@ -1457,6 +1463,8 @@ textarea[disabled],
} }
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) { :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
--pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
}
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
} }
@ -1534,6 +1542,24 @@ label > :where(input, select, textarea) {
/** /**
* Checkboxes, Radios and Switches * Checkboxes, Radios and Switches
*/ */
label:has([type=checkbox], [type=radio]) {
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
}
label:has([disabled]),
[type=checkbox][disabled] + label,
[type=radio][disabled] + label {
opacity: var(--pico-form-element-disabled-opacity);
pointer-events: none;
}
label:has([disabled]) [type=checkbox],
label:has([disabled]) [type=radio] {
opacity: initial;
}
[type=checkbox], [type=checkbox],
[type=radio] { [type=radio] {
-webkit-appearance: none; -webkit-appearance: none;
@ -1542,12 +1568,8 @@ label > :where(input, select, textarea) {
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em; margin-top: -0.125em;
margin-right: 0.375em; -webkit-margin-end: 0.5em;
margin-left: 0; margin-inline-end: 0.5em;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1570,10 +1592,14 @@ label > :where(input, select, textarea) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-right: 0.375em;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type),
[type=radio] ~ label:not(:last-of-type) {
-webkit-margin-end: 1em;
margin-inline-end: 1em;
}
[type=checkbox]:indeterminate { [type=checkbox]:indeterminate {
--pico-background-color: var(--pico-primary-background); --pico-background-color: var(--pico-primary-background);
@ -1595,7 +1621,6 @@ label > :where(input, select, textarea) {
[type=checkbox][role=switch] { [type=checkbox][role=switch] {
--pico-background-color: var(--pico-switch-background-color); --pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color);
--pico-color: var(--pico-switch-color); --pico-color: var(--pico-switch-color);
width: 2.25em; width: 2.25em;
height: 1.25em; height: 1.25em;
@ -1604,14 +1629,9 @@ label > :where(input, select, textarea) {
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
line-height: 1.25em; line-height: 1.25em;
} }
[type=checkbox][role=switch]:focus { [type=checkbox][role=switch]:not([aria-invalid]) {
--pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color); --pico-border-color: var(--pico-switch-background-color);
} }
[type=checkbox][role=switch]:checked {
--pico-background-color: var(--pico-switch-checked-background-color);
--pico-border-color: var(--pico-switch-checked-background-color);
}
[type=checkbox][role=switch]:before { [type=checkbox][role=switch]:before {
display: block; display: block;
width: calc(1.25em - (var(--pico-border-width) * 2)); width: calc(1.25em - (var(--pico-border-width) * 2));
@ -1621,29 +1641,52 @@ label > :where(input, select, textarea) {
content: ""; content: "";
transition: margin 0.1s ease-in-out; transition: margin 0.1s ease-in-out;
} }
[type=checkbox][role=switch]:focus {
--pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color);
}
[type=checkbox][role=switch]:checked { [type=checkbox][role=switch]:checked {
--pico-background-color: var(--pico-switch-checked-background-color);
--pico-border-color: var(--pico-switch-checked-background-color);
background-image: none; background-image: none;
} }
[type=checkbox][role=switch]:checked::before { [type=checkbox][role=switch]:checked::before {
margin-left: calc(1.125em - var(--pico-border-width));
-webkit-margin-start: calc(1.125em - var(--pico-border-width)); -webkit-margin-start: calc(1.125em - var(--pico-border-width));
margin-inline-start: calc(1.125em - var(--pico-border-width)); margin-inline-start: calc(1.125em - var(--pico-border-width));
} }
[type=checkbox][role=switch][disabled] {
--pico-background-color: var(--pico-border-color);
}
[type=checkbox][aria-invalid=false], [type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
[type=checkbox]:checked[aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked,
[type=radio][aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked:active,
[type=radio]:checked[aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
[type=checkbox][role=switch][aria-invalid=false], --pico-background-color: var(--pico-form-element-valid-border-color);
[type=checkbox][role=switch]:checked[aria-invalid=false] { }
[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true],
[type=checkbox][role=switch]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
--pico-background-color: var(--pico-form-element-invalid-border-color);
}
[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
[type=radio][aria-invalid=false]:checked,
[type=radio][aria-invalid=false]:checked:active,
[type=radio][aria-invalid=false]:checked:focus,
[type=checkbox][role=switch][aria-invalid=false]:checked,
[type=checkbox][role=switch][aria-invalid=false]:checked:active,
[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
--pico-border-color: var(--pico-form-element-valid-border-color); --pico-border-color: var(--pico-form-element-valid-border-color);
} }
[type=checkbox][aria-invalid=true], [type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
[type=checkbox]:checked[aria-invalid=true],
[type=radio][aria-invalid=true],
[type=radio]:checked[aria-invalid=true], [type=radio]:checked[aria-invalid=true],
[type=checkbox][role=switch][aria-invalid=true], [type=radio]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true] { [type=radio]:checked:focus[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true],
[type=checkbox][role=switch]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
--pico-border-color: var(--pico-form-element-invalid-border-color); --pico-border-color: var(--pico-form-element-invalid-border-color);
} }
@ -2195,11 +2238,6 @@ details[role=list][open] summary::before {
} }
[aria-busy=true]:not(input, select, textarea):not(:empty)::before { [aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--pico-spacing) * 0.5); margin-right: calc(var(--pico-spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--pico-spacing) * 0.5);
margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea):empty { [aria-busy=true]:not(input, select, textarea):empty {
text-align: center; text-align: center;

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -52,8 +52,8 @@
--pico-h6-color: #646b79; --pico-h6-color: #646b79;
--pico-mark-background-color: #fde7c0; --pico-mark-background-color: #fde7c0;
--pico-mark-color: #0f1114; --pico-mark-color: #0f1114;
--pico-ins-color: #007a50; --pico-ins-color: #1d6a54;
--pico-del-color: #9b2318; --pico-del-color: #883935;
--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);
@ -75,11 +75,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #9b2318; --pico-form-element-invalid-border-color: #b86a6b;
--pico-form-element-invalid-active-border-color: #861d13; --pico-form-element-invalid-active-border-color: #c84f48;
--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: #007a50; --pico-form-element-valid-border-color: #4c9b8a;
--pico-form-element-valid-active-border-color: #006d46; --pico-form-element-valid-active-border-color: #279977;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -116,8 +116,8 @@
--pico-icon-chevron-button-contrast: var(--pico-icon-chevron-button); --pico-icon-chevron-button-contrast: var(--pico-icon-chevron-button);
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 122, 80)' stroke-width='2' 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(29, 106, 84)' stroke-width='2' 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(155, 35, 24)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(136, 57, 53)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: light; color-scheme: light;
@ -183,8 +183,8 @@
--pico-h6-color: #8891a4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #179e71; --pico-ins-color: #62af9a;
--pico-del-color: #d77261; --pico-del-color: #ce7e7b;
--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);
@ -206,11 +206,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #d77261; --pico-form-element-invalid-border-color: #964a50;
--pico-form-element-invalid-active-border-color: #b95046; --pico-form-element-invalid-active-border-color: #b7403b;
--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: #179e71; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #15845e; --pico-form-element-valid-active-border-color: #16896a;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -247,8 +247,8 @@
--pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(23, 158, 113)' stroke-width='2' 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(98, 175, 154)' stroke-width='2' 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(215, 114, 97)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(206, 126, 123)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
@ -307,8 +307,8 @@
--pico-h6-color: #8891a4; --pico-h6-color: #8891a4;
--pico-mark-background-color: #014063; --pico-mark-background-color: #014063;
--pico-mark-color: #fff; --pico-mark-color: #fff;
--pico-ins-color: #179e71; --pico-ins-color: #62af9a;
--pico-del-color: #d77261; --pico-del-color: #ce7e7b;
--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);
@ -330,11 +330,11 @@
--pico-form-element-disabled-background-color: var(--pico-form-element-background-color); --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
--pico-form-element-disabled-border-color: var(--pico-form-element-border-color); --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
--pico-form-element-disabled-opacity: 0.5; --pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #d77261; --pico-form-element-invalid-border-color: #964a50;
--pico-form-element-invalid-active-border-color: #b95046; --pico-form-element-invalid-active-border-color: #b7403b;
--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: #179e71; --pico-form-element-valid-border-color: #2a7b6f;
--pico-form-element-valid-active-border-color: #15845e; --pico-form-element-valid-active-border-color: #16896a;
--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-color: var(--pico-primary-inverse); --pico-switch-color: var(--pico-primary-inverse);
@ -371,8 +371,8 @@
--pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-chevron-button-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(23, 158, 113)' stroke-width='2' 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(98, 175, 154)' stroke-width='2' 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(215, 114, 97)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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(206, 126, 123)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='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-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark; color-scheme: dark;
@ -1218,10 +1218,14 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--pico-spacing) * 0.25); margin-bottom: calc(var(--pico-spacing) * 0.375);
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
} }
fieldset legend {
margin-bottom: calc(var(--pico-spacing) * 0.5);
}
input:not([type=checkbox], [type=radio]), input:not([type=checkbox], [type=radio]),
select, select,
textarea { textarea {
@ -1329,6 +1333,8 @@ textarea[disabled],
} }
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) { :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
--pico-border-color: var(--pico-form-element-valid-active-border-color) !important; --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
}
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
} }
:where(input, select, textarea)[aria-invalid=true] { :where(input, select, textarea)[aria-invalid=true] {
@ -1336,6 +1342,8 @@ textarea[disabled],
} }
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) { :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
--pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
}
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) {
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
} }
@ -1413,6 +1421,24 @@ label > :where(input, select, textarea) {
/** /**
* Checkboxes, Radios and Switches * Checkboxes, Radios and Switches
*/ */
label:has([type=checkbox], [type=radio]) {
width: -moz-fit-content;
width: fit-content;
cursor: pointer;
}
label:has([disabled]),
[type=checkbox][disabled] + label,
[type=radio][disabled] + label {
opacity: var(--pico-form-element-disabled-opacity);
pointer-events: none;
}
label:has([disabled]) [type=checkbox],
label:has([disabled]) [type=radio] {
opacity: initial;
}
[type=checkbox], [type=checkbox],
[type=radio] { [type=radio] {
-webkit-appearance: none; -webkit-appearance: none;
@ -1421,12 +1447,8 @@ label > :where(input, select, textarea) {
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em; margin-top: -0.125em;
margin-right: 0.375em; -webkit-margin-end: 0.5em;
margin-left: 0; margin-inline-end: 0.5em;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--pico-border-width); border-width: var(--pico-border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1449,10 +1471,14 @@ label > :where(input, select, textarea) {
[type=checkbox] ~ label, [type=checkbox] ~ label,
[type=radio] ~ label { [type=radio] ~ label {
display: inline-block; display: inline-block;
margin-right: 0.375em;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
} }
[type=checkbox] ~ label:not(:last-of-type),
[type=radio] ~ label:not(:last-of-type) {
-webkit-margin-end: 1em;
margin-inline-end: 1em;
}
[type=checkbox]:indeterminate { [type=checkbox]:indeterminate {
--pico-background-color: var(--pico-primary-background); --pico-background-color: var(--pico-primary-background);
@ -1474,7 +1500,6 @@ label > :where(input, select, textarea) {
[type=checkbox][role=switch] { [type=checkbox][role=switch] {
--pico-background-color: var(--pico-switch-background-color); --pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color);
--pico-color: var(--pico-switch-color); --pico-color: var(--pico-switch-color);
width: 2.25em; width: 2.25em;
height: 1.25em; height: 1.25em;
@ -1483,14 +1508,9 @@ label > :where(input, select, textarea) {
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
line-height: 1.25em; line-height: 1.25em;
} }
[type=checkbox][role=switch]:focus { [type=checkbox][role=switch]:not([aria-invalid]) {
--pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color); --pico-border-color: var(--pico-switch-background-color);
} }
[type=checkbox][role=switch]:checked {
--pico-background-color: var(--pico-switch-checked-background-color);
--pico-border-color: var(--pico-switch-checked-background-color);
}
[type=checkbox][role=switch]:before { [type=checkbox][role=switch]:before {
display: block; display: block;
width: calc(1.25em - (var(--pico-border-width) * 2)); width: calc(1.25em - (var(--pico-border-width) * 2));
@ -1500,29 +1520,52 @@ label > :where(input, select, textarea) {
content: ""; content: "";
transition: margin 0.1s ease-in-out; transition: margin 0.1s ease-in-out;
} }
[type=checkbox][role=switch]:focus {
--pico-background-color: var(--pico-switch-background-color);
--pico-border-color: var(--pico-switch-background-color);
}
[type=checkbox][role=switch]:checked { [type=checkbox][role=switch]:checked {
--pico-background-color: var(--pico-switch-checked-background-color);
--pico-border-color: var(--pico-switch-checked-background-color);
background-image: none; background-image: none;
} }
[type=checkbox][role=switch]:checked::before { [type=checkbox][role=switch]:checked::before {
margin-left: calc(1.125em - var(--pico-border-width));
-webkit-margin-start: calc(1.125em - var(--pico-border-width)); -webkit-margin-start: calc(1.125em - var(--pico-border-width));
margin-inline-start: calc(1.125em - var(--pico-border-width)); margin-inline-start: calc(1.125em - var(--pico-border-width));
} }
[type=checkbox][role=switch][disabled] {
--pico-background-color: var(--pico-border-color);
}
[type=checkbox][aria-invalid=false], [type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
[type=checkbox]:checked[aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked,
[type=radio][aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked:active,
[type=radio]:checked[aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
[type=checkbox][role=switch][aria-invalid=false], --pico-background-color: var(--pico-form-element-valid-border-color);
[type=checkbox][role=switch]:checked[aria-invalid=false] { }
[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true],
[type=checkbox][role=switch]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
--pico-background-color: var(--pico-form-element-invalid-border-color);
}
[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
[type=radio][aria-invalid=false]:checked,
[type=radio][aria-invalid=false]:checked:active,
[type=radio][aria-invalid=false]:checked:focus,
[type=checkbox][role=switch][aria-invalid=false]:checked,
[type=checkbox][role=switch][aria-invalid=false]:checked:active,
[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
--pico-border-color: var(--pico-form-element-valid-border-color); --pico-border-color: var(--pico-form-element-valid-border-color);
} }
[type=checkbox][aria-invalid=true], [type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
[type=checkbox]:checked[aria-invalid=true],
[type=radio][aria-invalid=true],
[type=radio]:checked[aria-invalid=true], [type=radio]:checked[aria-invalid=true],
[type=checkbox][role=switch][aria-invalid=true], [type=radio]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true] { [type=radio]:checked:focus[aria-invalid=true],
[type=checkbox][role=switch]:checked[aria-invalid=true],
[type=checkbox][role=switch]:checked:active[aria-invalid=true],
[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
--pico-border-color: var(--pico-form-element-invalid-border-color); --pico-border-color: var(--pico-form-element-invalid-border-color);
} }
@ -2056,11 +2099,6 @@ details[role=list][open] summary::before {
} }
[aria-busy=true]:not(input, select, textarea):not(:empty)::before { [aria-busy=true]:not(input, select, textarea):not(:empty)::before {
margin-right: calc(var(--pico-spacing) * 0.5); margin-right: calc(var(--pico-spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--pico-spacing) * 0.5);
margin-inline-end: calc(var(--pico-spacing) * 0.5);
} }
[aria-busy=true]:not(input, select, textarea):empty { [aria-busy=true]:not(input, select, textarea):empty {
text-align: center; text-align: center;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long