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

refactor: modules and css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-23 10:47:50 +07:00
parent 2e4d6c66ec
commit ce2ed6826d
46 changed files with 3874 additions and 3534 deletions
Download patch file Download diff file Expand all files Collapse all files

689
css/pico.classless.css
View file

@ -3,6 +3,309 @@
* Pico ✨ v2.0.0-alpha1 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
*/
/**
* Color schemes
*/
[data-theme=light],
:root:not([data-theme=dark]) {
--pico-background-color: #fff;
--pico-color: hsl(205deg, 20%, 32%);
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: hsl(205deg, 20%, 94%);
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 90%, 32%);
--pico-primary-focus: rgba(16, 149, 193, 0.125);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 20%, 32%);
--pico-secondary-focus: rgba(89, 107, 120, 0.125);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 30%, 15%);
--pico-contrast-hover: #000;
--pico-contrast-focus: rgba(89, 107, 120, 0.125);
--pico-contrast-inverse: #fff;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--pico-h1-color: hsl(205deg, 30%, 15%);
--pico-h2-color: #24333e;
--pico-h3-color: hsl(205deg, 25%, 23%);
--pico-h4-color: #374956;
--pico-h5-color: hsl(205deg, 20%, 32%);
--pico-h6-color: #4d606d;
--pico-mark-background-color: #fff2ca;
--pico-mark-color: #543a26;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: #f6f8f9;
--pico-code-background-color: hsl(205deg, 20%, 94%);
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 40%, 50%);
--pico-code-property-color: hsl(185deg, 40%, 40%);
--pico-code-value-color: hsl(40deg, 20%, 50%);
--pico-code-comment-color: hsl(205deg, 14%, 68%);
--pico-form-element-background-color: transparent;
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: transparent;
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%);
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #c62828;
--pico-form-element-invalid-active-border-color: #d32f2f;
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
--pico-form-element-valid-border-color: #388e3c;
--pico-form-element-valid-active-border-color: #43a047;
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
--pico-switch-background-color: hsl(205deg, 16%, 77%);
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: hsl(205deg, 18%, 86%);
--pico-range-active-border-color: hsl(205deg, 16%, 77%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #fbfbfc;
--pico-dropdown-background-color: #fbfbfc;
--pico-dropdown-border-color: #e1e6eb;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--pico-progress-background-color: hsl(205deg, 18%, 86%);
--pico-progress-color: var(--pico-primary);
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: light;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--pico-background-color: #11191f;
--pico-color: hsl(205deg, 16%, 77%);
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: #1f2d38;
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 80%, 50%);
--pico-primary-focus: rgba(16, 149, 193, 0.25);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 10%, 50%);
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%);
--pico-contrast-hover: #fff;
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
--pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-h1-color: hsl(205deg, 20%, 94%);
--pico-h2-color: #e1e6eb;
--pico-h3-color: hsl(205deg, 18%, 86%);
--pico-h4-color: #c8d1d8;
--pico-h5-color: hsl(205deg, 16%, 77%);
--pico-h6-color: #afbbc4;
--pico-mark-background-color: #d1c284;
--pico-mark-color: #11191f;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--pico-code-background-color: #18232c;
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 30%, 50%);
--pico-code-property-color: hsl(185deg, 30%, 50%);
--pico-code-value-color: hsl(40deg, 10%, 50%);
--pico-code-comment-color: #4d606d;
--pico-form-element-background-color: #11191f;
--pico-form-element-border-color: #374956;
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c;
--pico-form-element-invalid-active-border-color: #c62828;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--pico-form-element-valid-border-color: #2e7d32;
--pico-form-element-valid-active-border-color: #388e3c;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--pico-switch-background-color: #374956;
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: #24333e;
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26;
--pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #18232c;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
--pico-dropdown-border-color: #24333e;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--pico-progress-background-color: #24333e;
--pico-progress-color: var(--pico-primary);
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark;
}
}
[data-theme=dark] {
--pico-background-color: #11191f;
--pico-color: hsl(205deg, 16%, 77%);
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: #1f2d38;
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 80%, 50%);
--pico-primary-focus: rgba(16, 149, 193, 0.25);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 10%, 50%);
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%);
--pico-contrast-hover: #fff;
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
--pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-h1-color: hsl(205deg, 20%, 94%);
--pico-h2-color: #e1e6eb;
--pico-h3-color: hsl(205deg, 18%, 86%);
--pico-h4-color: #c8d1d8;
--pico-h5-color: hsl(205deg, 16%, 77%);
--pico-h6-color: #afbbc4;
--pico-mark-background-color: #d1c284;
--pico-mark-color: #11191f;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--pico-code-background-color: #18232c;
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 30%, 50%);
--pico-code-property-color: hsl(185deg, 30%, 50%);
--pico-code-value-color: hsl(40deg, 10%, 50%);
--pico-code-comment-color: #4d606d;
--pico-form-element-background-color: #11191f;
--pico-form-element-border-color: #374956;
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c;
--pico-form-element-invalid-active-border-color: #c62828;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--pico-form-element-valid-border-color: #2e7d32;
--pico-form-element-valid-active-border-color: #388e3c;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--pico-switch-background-color: #374956;
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: #24333e;
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26;
--pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #18232c;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
--pico-dropdown-border-color: #24333e;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--pico-progress-background-color: #24333e;
--pico-progress-color: var(--pico-primary);
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--pico-primary);
}
/**
* Styles
*/
:root {
--pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--pico-line-height: 1.5;
@ -11,19 +314,18 @@
--pico-border-radius: 0.25rem;
--pico-border-width: 1px;
--pico-outline-width: 3px;
--pico-transition: 0.2s ease-in-out;
--pico-spacing: 1rem;
--pico-typography-spacing-vertical: 1.5rem;
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
--pico-block-spacing-horizontal: var(--pico-spacing);
--pico-form-element-spacing-vertical: 0.75rem;
--pico-form-element-spacing-horizontal: 1rem;
--pico-modal-overlay-backdrop-filter: blur(0.25rem);
--pico-nav-element-spacing-vertical: 1rem;
--pico-nav-element-spacing-horizontal: 0.5rem;
--pico-nav-link-spacing-vertical: 0.5rem;
--pico-nav-link-spacing-horizontal: 0.5rem;
--pico-form-label-font-weight: var(--pico-font-weight);
--pico-transition: 0.2s ease-in-out;
--pico-modal-overlay-backdrop-filter: blur(0.25rem);
}
@media (min-width: 576px) {
:root {
@ -162,15 +464,6 @@ h5 {
--pico-typography-spacing-vertical: 1.6875rem;
}
[type=checkbox],
[type=radio] {
--pico-border-width: 2px;
}
[type=checkbox][role=switch] {
--pico-border-width: 3px;
}
thead th,
thead td,
tfoot th,
@ -193,309 +486,13 @@ kbd {
--pico-font-weight: bolder;
}
[data-theme=light],
:root:not([data-theme=dark]) {
--pico-background-color: #fff;
--pico-color: hsl(205deg, 20%, 32%);
--pico-h1-color: hsl(205deg, 30%, 15%);
--pico-h2-color: #24333e;
--pico-h3-color: hsl(205deg, 25%, 23%);
--pico-h4-color: #374956;
--pico-h5-color: hsl(205deg, 20%, 32%);
--pico-h6-color: #4d606d;
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: hsl(205deg, 20%, 94%);
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 90%, 32%);
--pico-primary-focus: rgba(16, 149, 193, 0.125);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 20%, 32%);
--pico-secondary-focus: rgba(89, 107, 120, 0.125);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 30%, 15%);
--pico-contrast-hover: #000;
--pico-contrast-focus: rgba(89, 107, 120, 0.125);
--pico-contrast-inverse: #fff;
--pico-mark-background-color: #fff2ca;
--pico-mark-color: #543a26;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-form-element-background-color: transparent;
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: transparent;
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%);
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #c62828;
--pico-form-element-invalid-active-border-color: #d32f2f;
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
--pico-form-element-valid-border-color: #388e3c;
--pico-form-element-valid-active-border-color: #43a047;
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
--pico-switch-background-color: hsl(205deg, 16%, 77%);
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: hsl(205deg, 18%, 86%);
--pico-range-active-border-color: hsl(205deg, 16%, 77%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: #f6f8f9;
--pico-code-background-color: hsl(205deg, 20%, 94%);
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 40%, 50%);
--pico-code-property-color: hsl(185deg, 40%, 40%);
--pico-code-value-color: hsl(40deg, 20%, 50%);
--pico-code-comment-color: hsl(205deg, 14%, 68%);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--pico-card-sectionning-background-color: #fbfbfc;
--pico-dropdown-background-color: #fbfbfc;
--pico-dropdown-border-color: #e1e6eb;
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--pico-progress-background-color: hsl(205deg, 18%, 86%);
--pico-progress-color: var(--pico-primary);
--pico-loading-spinner-opacity: 0.5;
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: light;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--pico-background-color: #11191f;
--pico-color: hsl(205deg, 16%, 77%);
--pico-h1-color: hsl(205deg, 20%, 94%);
--pico-h2-color: #e1e6eb;
--pico-h3-color: hsl(205deg, 18%, 86%);
--pico-h4-color: #c8d1d8;
--pico-h5-color: hsl(205deg, 16%, 77%);
--pico-h6-color: #afbbc4;
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: #1f2d38;
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 80%, 50%);
--pico-primary-focus: rgba(16, 149, 193, 0.25);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 10%, 50%);
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%);
--pico-contrast-hover: #fff;
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
--pico-contrast-inverse: #000;
--pico-mark-background-color: #d1c284;
--pico-mark-color: #11191f;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-form-element-background-color: #11191f;
--pico-form-element-border-color: #374956;
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c;
--pico-form-element-invalid-active-border-color: #c62828;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--pico-form-element-valid-border-color: #2e7d32;
--pico-form-element-valid-active-border-color: #388e3c;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--pico-switch-background-color: #374956;
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: #24333e;
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--pico-code-background-color: #18232c;
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 30%, 50%);
--pico-code-property-color: hsl(185deg, 30%, 50%);
--pico-code-value-color: hsl(40deg, 10%, 50%);
--pico-code-comment-color: #4d606d;
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26;
--pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-card-sectionning-background-color: #18232c;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
--pico-dropdown-border-color: #24333e;
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--pico-progress-background-color: #24333e;
--pico-progress-color: var(--pico-primary);
--pico-loading-spinner-opacity: 0.5;
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: dark;
}
}
[data-theme=dark] {
--pico-background-color: #11191f;
--pico-color: hsl(205deg, 16%, 77%);
--pico-h1-color: hsl(205deg, 20%, 94%);
--pico-h2-color: #e1e6eb;
--pico-h3-color: hsl(205deg, 18%, 86%);
--pico-h4-color: #c8d1d8;
--pico-h5-color: hsl(205deg, 16%, 77%);
--pico-h6-color: #afbbc4;
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: #1f2d38;
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 80%, 50%);
--pico-primary-focus: rgba(16, 149, 193, 0.25);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 10%, 50%);
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%);
--pico-contrast-hover: #fff;
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
--pico-contrast-inverse: #000;
--pico-mark-background-color: #d1c284;
--pico-mark-color: #11191f;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-form-element-background-color: #11191f;
--pico-form-element-border-color: #374956;
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c;
--pico-form-element-invalid-active-border-color: #c62828;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--pico-form-element-valid-border-color: #2e7d32;
--pico-form-element-valid-active-border-color: #388e3c;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--pico-switch-background-color: #374956;
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: #24333e;
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--pico-code-background-color: #18232c;
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 30%, 50%);
--pico-code-property-color: hsl(185deg, 30%, 50%);
--pico-code-value-color: hsl(40deg, 10%, 50%);
--pico-code-comment-color: #4d606d;
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26;
--pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-card-sectionning-background-color: #18232c;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
--pico-dropdown-border-color: #24333e;
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--pico-progress-background-color: #24333e;
--pico-progress-color: var(--pico-primary);
--pico-loading-spinner-opacity: 0.5;
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--pico-primary);
[type=radio] {
--pico-border-width: 2px;
}
[type=checkbox][role=switch] {
--pico-border-width: 3px;
}
/**
@ -535,17 +532,17 @@ progress,
}
/**
* Sectioning
* Container and responsive spacings for header, main, footer
* Landmarks
*/
main {
display: block;
}
body {
width: 100%;
margin: 0;
}
main {
display: block;
}
body > header,
body > main,
body > footer {
@ -587,7 +584,6 @@ body > footer {
/**
* Section
* Responsive spacings for section
*/
section {
margin-bottom: var(--pico-block-spacing-vertical);
@ -607,6 +603,32 @@ figure figcaption {
color: var(--pico-muted-color);
}
/**
* Link
*/
a,
[role=link] {
--pico-color: var(--pico-primary);
--pico-background-color: transparent;
outline: none;
background-color: var(--pico-background-color);
color: var(--pico-color);
-webkit-text-decoration: var(--pico-text-decoration);
text-decoration: var(--pico-text-decoration);
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
}
a:is([aria-current], :hover, :active, :focus),
[role=link]:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover);
--pico-text-decoration: underline;
}
a:focus,
[role=link]:focus {
--pico-background-color: var(--pico-primary-focus);
}
/**
* Typography
*/
@ -649,29 +671,6 @@ ul {
font-size: var(--pico-font-size);
}
a,
[role=link] {
--pico-color: var(--pico-primary);
--pico-background-color: transparent;
outline: none;
background-color: var(--pico-background-color);
color: var(--pico-color);
-webkit-text-decoration: var(--pico-text-decoration);
text-decoration: var(--pico-text-decoration);
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
}
a:is([aria-current], :hover, :active, :focus),
[role=link]:is([aria-current], :hover, :active, :focus) {
--pico-color: var(--pico-primary-hover);
--pico-text-decoration: underline;
}
a:focus,
[role=link]:focus {
--pico-background-color: var(--pico-primary-focus);
}
h1,
h2,
h3,
@ -1800,7 +1799,7 @@ li[role=list] > ul {
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--pico-dropdown-background-color);
box-shadow: var(--pico-card-box-shadow);
box-shadow: var(--pico-dropdown-box-shadow);
color: var(--pico-dropdown-color);
white-space: nowrap;
}

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

730
css/pico.css
View file

@ -3,6 +3,309 @@
* Pico ✨ v2.0.0-alpha1 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT
*/
/**
* Color schemes
*/
[data-theme=light],
:root:not([data-theme=dark]) {
--pico-background-color: #fff;
--pico-color: hsl(205deg, 20%, 32%);
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: hsl(205deg, 20%, 94%);
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 90%, 32%);
--pico-primary-focus: rgba(16, 149, 193, 0.125);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 20%, 32%);
--pico-secondary-focus: rgba(89, 107, 120, 0.125);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 30%, 15%);
--pico-contrast-hover: #000;
--pico-contrast-focus: rgba(89, 107, 120, 0.125);
--pico-contrast-inverse: #fff;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--pico-h1-color: hsl(205deg, 30%, 15%);
--pico-h2-color: #24333e;
--pico-h3-color: hsl(205deg, 25%, 23%);
--pico-h4-color: #374956;
--pico-h5-color: hsl(205deg, 20%, 32%);
--pico-h6-color: #4d606d;
--pico-mark-background-color: #fff2ca;
--pico-mark-color: #543a26;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: #f6f8f9;
--pico-code-background-color: hsl(205deg, 20%, 94%);
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 40%, 50%);
--pico-code-property-color: hsl(185deg, 40%, 40%);
--pico-code-value-color: hsl(40deg, 20%, 50%);
--pico-code-comment-color: hsl(205deg, 14%, 68%);
--pico-form-element-background-color: transparent;
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: transparent;
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%);
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #c62828;
--pico-form-element-invalid-active-border-color: #d32f2f;
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
--pico-form-element-valid-border-color: #388e3c;
--pico-form-element-valid-active-border-color: #43a047;
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
--pico-switch-background-color: hsl(205deg, 16%, 77%);
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: hsl(205deg, 18%, 86%);
--pico-range-active-border-color: hsl(205deg, 16%, 77%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #fbfbfc;
--pico-dropdown-background-color: #fbfbfc;
--pico-dropdown-border-color: #e1e6eb;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--pico-progress-background-color: hsl(205deg, 18%, 86%);
--pico-progress-color: var(--pico-primary);
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: light;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--pico-background-color: #11191f;
--pico-color: hsl(205deg, 16%, 77%);
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: #1f2d38;
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 80%, 50%);
--pico-primary-focus: rgba(16, 149, 193, 0.25);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 10%, 50%);
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%);
--pico-contrast-hover: #fff;
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
--pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-h1-color: hsl(205deg, 20%, 94%);
--pico-h2-color: #e1e6eb;
--pico-h3-color: hsl(205deg, 18%, 86%);
--pico-h4-color: #c8d1d8;
--pico-h5-color: hsl(205deg, 16%, 77%);
--pico-h6-color: #afbbc4;
--pico-mark-background-color: #d1c284;
--pico-mark-color: #11191f;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--pico-code-background-color: #18232c;
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 30%, 50%);
--pico-code-property-color: hsl(185deg, 30%, 50%);
--pico-code-value-color: hsl(40deg, 10%, 50%);
--pico-code-comment-color: #4d606d;
--pico-form-element-background-color: #11191f;
--pico-form-element-border-color: #374956;
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c;
--pico-form-element-invalid-active-border-color: #c62828;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--pico-form-element-valid-border-color: #2e7d32;
--pico-form-element-valid-active-border-color: #388e3c;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--pico-switch-background-color: #374956;
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: #24333e;
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26;
--pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #18232c;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
--pico-dropdown-border-color: #24333e;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--pico-progress-background-color: #24333e;
--pico-progress-color: var(--pico-primary);
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark;
}
}
[data-theme=dark] {
--pico-background-color: #11191f;
--pico-color: hsl(205deg, 16%, 77%);
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: #1f2d38;
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 80%, 50%);
--pico-primary-focus: rgba(16, 149, 193, 0.25);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 10%, 50%);
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%);
--pico-contrast-hover: #fff;
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
--pico-contrast-inverse: #000;
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-h1-color: hsl(205deg, 20%, 94%);
--pico-h2-color: #e1e6eb;
--pico-h3-color: hsl(205deg, 18%, 86%);
--pico-h4-color: #c8d1d8;
--pico-h5-color: hsl(205deg, 16%, 77%);
--pico-h6-color: #afbbc4;
--pico-mark-background-color: #d1c284;
--pico-mark-color: #11191f;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--pico-code-background-color: #18232c;
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 30%, 50%);
--pico-code-property-color: hsl(185deg, 30%, 50%);
--pico-code-value-color: hsl(40deg, 10%, 50%);
--pico-code-comment-color: #4d606d;
--pico-form-element-background-color: #11191f;
--pico-form-element-border-color: #374956;
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c;
--pico-form-element-invalid-active-border-color: #c62828;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--pico-form-element-valid-border-color: #2e7d32;
--pico-form-element-valid-active-border-color: #388e3c;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--pico-switch-background-color: #374956;
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: #24333e;
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26;
--pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectionning-background-color: #18232c;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
--pico-dropdown-border-color: #24333e;
--pico-dropdown-box-shadow: var(--pico-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--pico-progress-background-color: #24333e;
--pico-progress-color: var(--pico-primary);
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--pico-primary);
}
/**
* Styles
*/
:root {
--pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--pico-line-height: 1.5;
@ -11,6 +314,7 @@
--pico-border-radius: 0.25rem;
--pico-border-width: 1px;
--pico-outline-width: 3px;
--pico-transition: 0.2s ease-in-out;
--pico-spacing: 1rem;
--pico-typography-spacing-vertical: 1.5rem;
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
@ -19,13 +323,11 @@
--pico-grid-spacing-horizontal: var(--pico-spacing);
--pico-form-element-spacing-vertical: 0.75rem;
--pico-form-element-spacing-horizontal: 1rem;
--pico-modal-overlay-backdrop-filter: blur(0.25rem);
--pico-nav-element-spacing-vertical: 1rem;
--pico-nav-element-spacing-horizontal: 0.5rem;
--pico-nav-link-spacing-vertical: 0.5rem;
--pico-nav-link-spacing-horizontal: 0.5rem;
--pico-form-label-font-weight: var(--pico-font-weight);
--pico-transition: 0.2s ease-in-out;
--pico-modal-overlay-backdrop-filter: blur(0.25rem);
}
@media (min-width: 576px) {
:root {
@ -164,15 +466,6 @@ h5 {
--pico-typography-spacing-vertical: 1.6875rem;
}
[type=checkbox],
[type=radio] {
--pico-border-width: 2px;
}
[type=checkbox][role=switch] {
--pico-border-width: 3px;
}
thead th,
thead td,
tfoot th,
@ -195,309 +488,13 @@ kbd {
--pico-font-weight: bolder;
}
[data-theme=light],
:root:not([data-theme=dark]) {
--pico-background-color: #fff;
--pico-color: hsl(205deg, 20%, 32%);
--pico-h1-color: hsl(205deg, 30%, 15%);
--pico-h2-color: #24333e;
--pico-h3-color: hsl(205deg, 25%, 23%);
--pico-h4-color: #374956;
--pico-h5-color: hsl(205deg, 20%, 32%);
--pico-h6-color: #4d606d;
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: hsl(205deg, 20%, 94%);
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 90%, 32%);
--pico-primary-focus: rgba(16, 149, 193, 0.125);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 20%, 32%);
--pico-secondary-focus: rgba(89, 107, 120, 0.125);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 30%, 15%);
--pico-contrast-hover: #000;
--pico-contrast-focus: rgba(89, 107, 120, 0.125);
--pico-contrast-inverse: #fff;
--pico-mark-background-color: #fff2ca;
--pico-mark-color: #543a26;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-form-element-background-color: transparent;
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: transparent;
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%);
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #c62828;
--pico-form-element-invalid-active-border-color: #d32f2f;
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
--pico-form-element-valid-border-color: #388e3c;
--pico-form-element-valid-active-border-color: #43a047;
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
--pico-switch-background-color: hsl(205deg, 16%, 77%);
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: hsl(205deg, 18%, 86%);
--pico-range-active-border-color: hsl(205deg, 16%, 77%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: #f6f8f9;
--pico-code-background-color: hsl(205deg, 20%, 94%);
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 40%, 50%);
--pico-code-property-color: hsl(185deg, 40%, 40%);
--pico-code-value-color: hsl(40deg, 20%, 50%);
--pico-code-comment-color: hsl(205deg, 14%, 68%);
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: var(--pico-background-color);
--pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--pico-card-sectionning-background-color: #fbfbfc;
--pico-dropdown-background-color: #fbfbfc;
--pico-dropdown-border-color: #e1e6eb;
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--pico-progress-background-color: hsl(205deg, 18%, 86%);
--pico-progress-color: var(--pico-primary);
--pico-loading-spinner-opacity: 0.5;
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: light;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--pico-background-color: #11191f;
--pico-color: hsl(205deg, 16%, 77%);
--pico-h1-color: hsl(205deg, 20%, 94%);
--pico-h2-color: #e1e6eb;
--pico-h3-color: hsl(205deg, 18%, 86%);
--pico-h4-color: #c8d1d8;
--pico-h5-color: hsl(205deg, 16%, 77%);
--pico-h6-color: #afbbc4;
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: #1f2d38;
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 80%, 50%);
--pico-primary-focus: rgba(16, 149, 193, 0.25);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 10%, 50%);
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%);
--pico-contrast-hover: #fff;
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
--pico-contrast-inverse: #000;
--pico-mark-background-color: #d1c284;
--pico-mark-color: #11191f;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-form-element-background-color: #11191f;
--pico-form-element-border-color: #374956;
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c;
--pico-form-element-invalid-active-border-color: #c62828;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--pico-form-element-valid-border-color: #2e7d32;
--pico-form-element-valid-active-border-color: #388e3c;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--pico-switch-background-color: #374956;
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: #24333e;
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--pico-code-background-color: #18232c;
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 30%, 50%);
--pico-code-property-color: hsl(185deg, 30%, 50%);
--pico-code-value-color: hsl(40deg, 10%, 50%);
--pico-code-comment-color: #4d606d;
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26;
--pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-card-sectionning-background-color: #18232c;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
--pico-dropdown-border-color: #24333e;
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--pico-progress-background-color: #24333e;
--pico-progress-color: var(--pico-primary);
--pico-loading-spinner-opacity: 0.5;
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: dark;
}
}
[data-theme=dark] {
--pico-background-color: #11191f;
--pico-color: hsl(205deg, 16%, 77%);
--pico-h1-color: hsl(205deg, 20%, 94%);
--pico-h2-color: #e1e6eb;
--pico-h3-color: hsl(205deg, 18%, 86%);
--pico-h4-color: #c8d1d8;
--pico-h5-color: hsl(205deg, 16%, 77%);
--pico-h6-color: #afbbc4;
--pico-muted-color: hsl(205deg, 10%, 50%);
--pico-muted-border-color: #1f2d38;
--pico-primary: hsl(195deg, 85%, 41%);
--pico-primary-hover: hsl(195deg, 80%, 50%);
--pico-primary-focus: rgba(16, 149, 193, 0.25);
--pico-primary-inverse: #fff;
--pico-secondary: hsl(205deg, 15%, 41%);
--pico-secondary-hover: hsl(205deg, 10%, 50%);
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
--pico-secondary-inverse: #fff;
--pico-contrast: hsl(205deg, 20%, 94%);
--pico-contrast-hover: #fff;
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
--pico-contrast-inverse: #000;
--pico-mark-background-color: #d1c284;
--pico-mark-color: #11191f;
--pico-ins-color: #388e3c;
--pico-del-color: #c62828;
--pico-blockquote-border-color: var(--pico-muted-border-color);
--pico-blockquote-footer-color: var(--pico-muted-color);
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-form-element-background-color: #11191f;
--pico-form-element-border-color: #374956;
--pico-form-element-color: var(--pico-color);
--pico-form-element-placeholder-color: var(--pico-muted-color);
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
--pico-form-element-active-border-color: var(--pico-primary);
--pico-form-element-focus-color: var(--pico-primary-focus);
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
--pico-form-element-disabled-opacity: 0.5;
--pico-form-element-invalid-border-color: #b71c1c;
--pico-form-element-invalid-active-border-color: #c62828;
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--pico-form-element-valid-border-color: #2e7d32;
--pico-form-element-valid-active-border-color: #388e3c;
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--pico-switch-background-color: #374956;
--pico-switch-color: var(--pico-primary-inverse);
--pico-switch-checked-background-color: var(--pico-primary);
--pico-range-border-color: #24333e;
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
--pico-range-thumb-border-color: var(--pico-background-color);
--pico-range-thumb-color: var(--pico-secondary);
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
--pico-range-thumb-active-color: var(--pico-primary);
--pico-table-border-color: var(--pico-muted-border-color);
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--pico-code-background-color: #18232c;
--pico-code-color: var(--pico-muted-color);
--pico-code-kbd-background-color: var(--pico-contrast);
--pico-code-kbd-color: var(--pico-contrast-inverse);
--pico-code-tag-color: hsl(330deg, 30%, 50%);
--pico-code-property-color: hsl(185deg, 30%, 50%);
--pico-code-value-color: hsl(40deg, 10%, 50%);
--pico-code-comment-color: #4d606d;
--pico-accordion-border-color: var(--pico-muted-border-color);
--pico-accordion-active-summary-color: var(--pico-primary);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: #141e26;
--pico-card-border-color: var(--pico-card-background-color);
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--pico-card-sectionning-background-color: #18232c;
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
--pico-dropdown-border-color: #24333e;
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--pico-progress-background-color: #24333e;
--pico-progress-color: var(--pico-primary);
--pico-loading-spinner-opacity: 0.5;
--pico-tooltip-background-color: var(--pico-contrast);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: dark;
}
progress,
[type=checkbox],
[type=radio],
[type=range] {
accent-color: var(--pico-primary);
[type=radio] {
--pico-border-width: 2px;
}
[type=checkbox][role=switch] {
--pico-border-width: 3px;
}
/**
@ -537,23 +534,20 @@ progress,
}
/**
* Sectioning
* Container and responsive spacings for header, main, footer
* Landmarks
*/
main {
display: block;
}
body {
width: 100%;
margin: 0;
}
main {
display: block;
}
body > header,
body > main,
body > footer {
width: 100%;
margin-right: auto;
margin-left: auto;
padding: var(--pico-block-spacing-vertical) 0;
}
@ -594,7 +588,6 @@ body > footer {
/**
* Section
* Responsive spacings for section
*/
section {
margin-bottom: var(--pico-block-spacing-vertical);
@ -635,47 +628,8 @@ figure figcaption {
}
/**
* Typography
* Link
*/
b,
strong {
font-weight: bolder;
}
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
margin-top: 0;
margin-bottom: var(--pico-typography-spacing-vertical);
color: var(--pico-color);
font-style: normal;
font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
}
a,
[role=link] {
--pico-color: var(--pico-primary);
@ -723,6 +677,48 @@ a.contrast:focus,
--pico-background-color: var(--pico-contrast-focus);
}
/**
* Typography
*/
b,
strong {
font-weight: bolder;
}
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
margin-top: 0;
margin-bottom: var(--pico-typography-spacing-vertical);
color: var(--pico-color);
font-style: normal;
font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
}
h1,
h2,
h3,
@ -1902,7 +1898,7 @@ li[role=list] > ul {
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--pico-dropdown-background-color);
box-shadow: var(--pico-card-box-shadow);
box-shadow: var(--pico-dropdown-box-shadow);
color: var(--pico-dropdown-color);
white-space: nowrap;
}
@ -2160,8 +2156,8 @@ dialog article .close {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--pico-block-spacing-vertical) * -0.5);
margin-bottom: var(--pico-typography-spacing-vertical);
margin-top: calc(var(--pico-spacing) * -1);
margin-bottom: var(--pico-spacing);
margin-left: auto;
background-image: var(--pico-icon-close);
background-position: center;

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

77
scss/_settings.scss
View file

@ -1,21 +1,19 @@
@use "sass:map";
// Config
// Settings
// ––––––––––––––––––––
// Prefix for CSS variables
$css-var-prefix: "pico-" !default;
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
// Define the root element used to target <header>, <main>, <footer>
// with $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default;
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: false !default;
// Enable .container and .container-fluid
$enable-class-container: true !default;
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
// Fluid layout if disabled
$enable-viewport: true !default;
@ -31,9 +29,6 @@ $enable-responsive-typography: true !default;
// .classless version if disabled
$enable-classes: true !default;
// Enable .grid class
$enable-grid: true !default;
// Enable transitions
$enable-transitions: true !default;
@ -45,32 +40,86 @@ $breakpoints: () !default;
$breakpoints: map.deep-merge(
(
// Small (landscape phones)
sm: (
sm:
(
breakpoint: 576px,
viewport: 510px,
root-font-size: 17px,
),
// Medium (tablets)
md: (
md:
(
breakpoint: 768px,
viewport: 700px,
root-font-size: 18px,
),
// Large (desktops)
lg: (
lg:
(
breakpoint: 992px,
viewport: 920px,
root-font-size: 19px,
),
// Extra large (large desktops)
xl: (
xl:
(
breakpoint: 1200px,
viewport: 1130px,
root-font-size: 20px,
),
)
),
$breakpoints
);
// Modules to export
$modules: () !default;
$modules: map.merge(
(
// Theme
"themes/default": true,
// Layout
"layout/document": true,
"layout/landmarks": true,
"layout/container": true,
"layout/section": true,
"layout/grid": true,
"layout/scroller": true,
// Content
"content/link": true,
"content/typography": true,
"content/embedded": true,
"content/button": true,
"content/table": true,
"content/code": true,
"content/miscs": true,
// Forms
"forms/basics": true,
"forms/checkbox-radio-switch": true,
"forms/input-color": true,
"forms/input-date": true,
"forms/input-file": true,
"forms/input-range": true,
"forms/input-search": true,
// Components
"components/accordion": true,
"components/card": true,
"components/dropdown": true,
"components/loading": true,
"components/modal": true,
"components/nav": true,
"components/progress": true,
"components/tooltip": true,
// Utilities
"utilities/accessibility": true,
"utilities/reduce-motion": true
),
$modules
);
// // Shortcut for CSS vars prefix
$✨: --#{$css-var-prefix};

3
scss/components/_accordion.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/accordion") {
/**
* Accordion (<details>)
*/
@ -116,3 +118,4 @@ details {
}
}
}
}

3
scss/components/_card.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/card") {
/**
* Card (<article>)
*/
@ -35,3 +37,4 @@ article {
border-bottom-left-radius: var(#{$✨}border-radius);
}
}
}

16
scss/components/_dropdown.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/dropdown") {
/**
* Dropdown ([role="list"])
*/
@ -26,7 +28,7 @@ li[role="list"] > ul {
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(#{$✨}dropdown-background-color);
box-shadow: var(#{$✨}card-box-shadow);
box-shadow: var(#{$✨}dropdown-box-shadow);
color: var(#{$✨}dropdown-color);
white-space: nowrap;
@ -91,10 +93,15 @@ details[role="list"] {
&:not([role]) {
height: calc(
1rem * var(#{$✨}line-height) + var(#{$✨}form-element-spacing-vertical) * 2 +
var(#{$✨}border-width) * 2
1rem *
var(#{$✨}line-height) +
var(#{$✨}form-element-spacing-vertical) *
2 +
var(#{$✨}border-width) *
2
);
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
padding: var(#{$✨}form-element-spacing-vertical)
var(#{$✨}form-element-spacing-horizontal);
border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color);
border-radius: var(#{$✨}border-radius);
background-color: var(#{$✨}form-element-background-color);
@ -206,3 +213,4 @@ li[role="list"] {
background-image: var(#{$✨}icon-chevron);
}
}
}

5
scss/components/_loading.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/loading") {
/**
* Loading ([aria-busy=true])
*/
@ -9,7 +11,7 @@
cursor: progress;
}
// Everyting except form elements
// Everything except form elements
[aria-busy="true"]:not(input, select, textarea) {
&::before {
display: inline-block;
@ -56,3 +58,4 @@ a {
transform: rotate(360deg);
}
}
}

8
scss/components/_modal.scss
View file

@ -1,6 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/modal") {
/**
* Modal (<dialog>)
*/
@ -83,8 +84,8 @@ dialog {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(#{$✨}block-spacing-vertical) * -0.5);
margin-bottom: var(#{$✨}typography-spacing-vertical);
margin-top: calc(var(#{$✨}spacing) * -1);
margin-bottom: var(#{$✨}spacing);
margin-left: auto;
background-image: var(#{$✨}icon-close);
background-position: center;
@ -124,7 +125,7 @@ dialog {
}
// Animations
@if ($enable-classes and $enable-transitions) {
@if $enable-classes and $enable-transitions {
$animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) {
@ -168,3 +169,4 @@ dialog {
}
}
}
}

3
scss/components/_nav.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/nav") {
/**
* Nav
*/
@ -140,3 +142,4 @@ aside {
}
}
}
}

3
scss/components/_progress.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/progress") {
/**
* Progress
*/
@ -89,3 +91,4 @@ progress {
background-position: -200% 0;
}
}
}

3
scss/components/_tooltip.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tooltip") {
/**
* Tooltip ([data-tooltip])
*/
@ -275,3 +277,4 @@
}
}
}
}

3
scss/content/_button.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/button") {
/**
* Button
*/
@ -180,3 +182,4 @@ a[role="button"]:not([href]) {
opacity: 0.5;
pointer-events: none;
}
}

3
scss/content/_code.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/code") {
/**
* Code
*/
@ -91,3 +93,4 @@ kbd {
color: var(#{$✨}code-kbd-color);
vertical-align: baseline;
}
}

3
scss/content/_embedded.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/embedded") {
/**
* Embedded content
*/
@ -48,3 +50,4 @@ img {
svg:not(:root) {
overflow: hidden;
}
}

60
scss/content/_link.scss Normal file
View file

@ -0,0 +1,60 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/link") {
/**
* Link
*/
a,
[role="link"] {
#{$✨}color: var(#{$✨}primary);
#{$✨}background-color: transparent;
outline: none;
background-color: var(#{$✨}background-color); // 1
color: var(#{$✨}color);
text-decoration: var(#{$✨}text-decoration);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
}
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}primary-hover);
#{$✨}text-decoration: underline;
}
&:focus {
#{$✨}background-color: var(#{$✨}primary-focus);
}
@if $enable-classes {
// Secondary
&.secondary {
#{$✨}color: var(#{$✨}secondary);
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover);
}
&:focus {
#{$✨}background-color: var(#{$✨}secondary-focus);
}
}
// Contrast
&.contrast {
#{$✨}color: var(#{$✨}contrast);
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}contrast-hover);
}
&:focus {
#{$✨}background-color: var(#{$✨}contrast-focus);
}
}
}
}
}

3
scss/content/_miscs.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/miscs") {
/**
* Miscs
*/
@ -32,3 +34,4 @@ template {
canvas {
display: inline-block;
}
}

3
scss/content/_table.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/table") {
/**
* Table
*/
@ -50,3 +52,4 @@ table {
}
}
}
}

57
scss/content/_typography.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/typography") {
/**
* Typography
*/
@ -51,60 +53,6 @@ ul {
font-size: var(#{$✨}font-size);
}
// Links
// 1. Remove the gray background on active links in IE 10
a,
[role="link"] {
#{$✨}color: var(#{$✨}primary);
#{$✨}background-color: transparent;
outline: none;
background-color: var(#{$✨}background-color); // 1
color: var(#{$✨}color);
text-decoration: var(#{$✨}text-decoration);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
}
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}primary-hover);
#{$✨}text-decoration: underline;
}
&:focus {
#{$✨}background-color: var(#{$✨}primary-focus);
}
@if $enable-classes {
// Secondary
&.secondary {
#{$✨}color: var(#{$✨}secondary);
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover);
}
&:focus {
#{$✨}background-color: var(#{$✨}secondary-focus);
}
}
// Contrast
&.contrast {
#{$✨}color: var(#{$✨}contrast);
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}contrast-hover);
}
&:focus {
#{$✨}background-color: var(#{$✨}contrast-focus);
}
}
}
}
// Headings
h1,
h2,
@ -264,3 +212,4 @@ del {
::selection {
background-color: var(#{$✨}primary-focus);
}
}

12
scss/forms/_basics.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/basics") {
/**
* Basics form elements
*/
@ -113,7 +115,8 @@ textarea {
// Force height for alternatives input types
input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc(
(1rem * var(#{$✨}line-height)) + (var(#{$✨}form-element-spacing-vertical) * 2) +
(1rem * var(#{$✨}line-height)) +
(var(#{$✨}form-element-spacing-vertical) * 2) +
(var(#{$✨}border-width) * 2)
);
}
@ -250,7 +253,11 @@ textarea[disabled],
var(#{$✨}form-element-valid-focus-color) !important;
} @else {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-valid-focus-color);
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color);
}
}
}
@ -350,3 +357,4 @@ label {
margin-top: calc(var(#{$✨}spacing) * 0.25);
}
}
}

3
scss/forms/_checkbox-radio-switch.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/checkbox-radio-switch") {
/**
* Checkboxes, Radios and Switches
*/
@ -136,3 +138,4 @@
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
}
}
}

29
scss/forms/_input-color.scss
View file

@ -1,29 +1,31 @@
@use "sass:map";
@use "../settings" as *;
/**
* Input type color
*/
[type="color"] {
// Wrapper
@mixin color-wrapper {
padding: 0;
}
&::-webkit-color-swatch-wrapper {
@include color-wrapper;
}
&::-moz-focus-inner {
@include color-wrapper;
}
// Swatch
@mixin color-swatch {
border: 0;
border-radius: calc(var(#{$✨}border-radius) * 0.5);
}
@if map.get($modules, "forms/input-color") {
/**
* Input type color
*/
[type="color"] {
&::-webkit-color-swatch-wrapper {
@include color-wrapper;
}
&::-moz-focus-inner {
@include color-wrapper;
}
&::-webkit-color-swatch {
@include color-swatch;
}
@ -32,3 +34,4 @@
@include color-swatch;
}
}
}

3
scss/forms/_input-date.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-date") {
/**
* Input type datetime
*/
@ -40,3 +42,4 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right;
}
}

25
scss/forms/_input-file.scss
View file

@ -1,16 +1,6 @@
@use "sass:map";
@use "../settings" as *;
/**
* Input type file
*/
[type="file"] {
#{$✨}color: var(#{$✨}muted-color);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
border: 0;
border-radius: 0;
background: none;
@mixin file-selector-button {
#{$✨}background-color: var(#{$✨}secondary);
#{$✨}border-color: var(#{$✨}secondary);
@ -44,6 +34,18 @@
}
}
@if map.get($modules, "forms/input-file") {
/**
* Input type file
*/
[type="file"] {
#{$✨}color: var(#{$✨}muted-color);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
border: 0;
border-radius: 0;
background: none;
&::file-selector-button {
@include file-selector-button;
}
@ -56,3 +58,4 @@
@include file-selector-button;
}
}
}

54
scss/forms/_input-range.scss
View file

@ -1,23 +1,11 @@
@use "sass:map";
@use "../settings" as *;
/**
* Input type range
*/
[type="range"] {
// Config
$height-track: 0.25rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: $height-thumb;
background: none;
// Slider Track
@mixin slider-track {
width: 100%;
@ -30,18 +18,6 @@
}
}
&::-webkit-slider-runnable-track {
@include slider-track;
}
&::-moz-range-track {
@include slider-track;
}
&::-ms-track {
@include slider-track;
}
// Slider Thumb
@mixin slider-thumb {
-webkit-appearance: none;
@ -57,6 +33,33 @@
transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
}
}
@if map.get($modules, "forms/input-range") {
/**
* Input type range
*/
[type="range"] {
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: $height-thumb;
background: none;
&::-webkit-slider-runnable-track {
@include slider-track;
}
&::-moz-range-track {
@include slider-track;
}
&::-ms-track {
@include slider-track;
}
&::-webkit-slider-thumb {
@include slider-thumb;
}
@ -92,3 +95,4 @@
}
}
}
}

7
scss/forms/_input-search.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-search") {
/**
* Input type search
*/
@ -16,7 +18,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[aria-invalid] {
@if $enable-important {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem) !important;
padding-inline-start: calc(
var(#{$✨}form-element-spacing-horizontal) + 1.75rem
) !important;
} @else {
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
}
@ -54,3 +58,4 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
}
}
}
}

2
scss/layout/_container.scss
View file

@ -1,7 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if ($enable-class-container and $enable-classes) {
@if map.get($modules, "layout/container") and $enable-classes {
/**
* Container
*/

3
scss/layout/_document.scss
View file

@ -1,5 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/document") {
/**
* Document
* Content-box & Responsive typography
@ -48,3 +50,4 @@
cursor: default; // 1
tab-size: 4; // 4
}
}

2
scss/layout/_grid.scss
View file

@ -1,7 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if ($enable-classes and $enable-grid) {
@if map.get($modules, "layout/grid") and $enable-classes {
/**
* Grid
* Minimal grid system with auto-layout columns

61
scss/layout/_landmarks.scss Normal file
View file

@ -0,0 +1,61 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/landmarks") {
/**
* Landmarks
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Remove the margin in all browsers (opinionated)
body {
width: 100%;
margin: 0; // 1
}
// Render the `main` element consistently in IE
main {
display: block;
}
// Pico
// ––––––––––––––––––––
#{$semantic-root-element} {
> header,
> main,
> footer {
// <header>, <main>, <footer> as containers
@if $enable-semantic-container {
$first-breakpoint: true;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
@if $enable-viewport {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}
// Regular pacing <header>, <main>, <footer>
@else {
padding: var(#{$✨}block-spacing-vertical) 0;
}
}
}
}

5
scss/layout/_scroller.scss
View file

@ -1,10 +1,12 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/scroller") {
/**
* Horizontal scroller (<figure>)
*/
// Wrapper to make any content responsive across all viewports
// Wrapper to make allow any content to be scrolled horizontally
figure {
display: block;
margin: 0;
@ -16,3 +18,4 @@ figure {
color: var(#{$✨}muted-color);
}
}
}

4
scss/layout/_section.scss
View file

@ -1,10 +1,12 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/section") {
/**
* Section
* Responsive spacings for section
*/
section {
margin-bottom: var(#{$✨}block-spacing-vertical);
}
}

58
scss/layout/_sectioning.scss
View file

@ -1,58 +0,0 @@
@use "sass:map";
@use "../settings" as *;
/**
* Sectioning
* Container and responsive spacings for header, main, footer
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Render the `main` element consistently in IE
main {
display: block;
}
// Pico
// ––––––––––––––––––––
// 1. Remove the margin in all browsers (opinionated)
#{$semantic-root-element} {
width: 100%;
margin: 0; // 1
> header,
> main,
> footer {
width: 100%;
margin-right: auto;
margin-left: auto;
// Semantic container
@if $enable-semantic-container {
// Centered viewport
$first-breakpoint: true;
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
// Semantic container
@else {
padding: var(#{$✨}block-spacing-vertical) 0;
}
}
}

45
scss/pico.classless.scss
View file

@ -1,5 +1,48 @@
// Pico classless version
@use "pico" with (
$enable-semantic-container: true,
$enable-classes: false
$enable-classes: false,
$modules: (
// Theme
"themes/default": true,
// Layout
"layout/document": true,
"layout/landmarks": true,
"layout/container": true,
"layout/section": true,
"layout/grid": true,
"layout/scroller": true,
// Content
"content/typography": true,
"content/embedded": true,
"content/button": true,
"content/table": true,
"content/code": true,
"content/miscs": true,
// Forms
"forms/basics": true,
"forms/checkbox-radio-switch": true,
"forms/input-color": true,
"forms/input-date": true,
"forms/input-file": true,
"forms/input-range": true,
"forms/input-search": true,
// Components
"components/accordion": true,
"components/card": true,
"components/dropdown": true,
"components/loading": true,
"components/modal": true,
"components/nav": true,
"components/progress": true,
"components/tooltip": true,
// Utilities
"utilities/accessibility": true,
"utilities/reduce-motion": true,
)
);

5
scss/pico.scss
View file

@ -8,14 +8,15 @@
// Layout
@use "layout/document"; // html
@use "layout/sectioning"; // body, header, main, footer
@use "layout/landmarks"; // body, header, main, footer
@use "layout/container"; // .container, .container-fluid
@use "layout/section"; // section
@use "layout/grid"; // .grid
@use "layout/scroller"; // figure
// Content
@use "content/typography"; // a, headings, p, ul, blockquote, ...
@use "content/link"; // a, role="link"
@use "content/typography"; // headings, p, ul, blockquote, ...
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/button"; // button, a[role="button"], type="button", type="submit" ...
@use "content/table"; // table, tr, td, ...

35
scss/themes/_default.scss
View file

@ -1,34 +1,5 @@
@use "../settings" as *;
@use "default/light";
@use "default/dark";
// Colors schemes
@use "default/schemes";
// Commons styles
// Styles
@use "default/styles";
// Light theme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
@include light.theme;
}
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include dark.theme;
}
}
// Dark theme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark.theme;
}
progress,
[type="checkbox"],
[type="radio"],
[type="range"] {
accent-color: var(#{$✨}primary);
}

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

@ -1,19 +1,15 @@
@use "sass:map";
@use "colors" as *;
@use "../../settings" as *;
@use "../../utils/box-shadow";
@use "../../utils/functions";
// Default: Dark theme
@mixin theme {
#{$✨}background-color: #{mix($black, $grey-900, 37.5%)};
// Texts colors
// Text color
#{$✨}color: #{$grey-200};
#{$✨}h1-color: #{$grey-50};
#{$✨}h2-color: #{mix($grey-100, $grey-50)};
#{$✨}h3-color: #{$grey-100};
#{$✨}h4-color: #{mix($grey-200, $grey-100)};
#{$✨}h5-color: #{$grey-200};
#{$✨}h6-color: #{mix($grey-300, $grey-200)};
// Muted colors
#{$✨}muted-color: #{$grey-500};
@ -37,6 +33,19 @@
#{$✨}contrast-focus: #{rgba($grey-500, 0.25)};
#{$✨}contrast-inverse: #{$black};
// Box shadow
#{$✨}box-shadow: box-shadow.shadow($black);
// Typography
@if map.get($modules, "content/typography") {
// Headings colors
#{$✨}h1-color: #{$grey-50};
#{$✨}h2-color: #{mix($grey-100, $grey-50)};
#{$✨}h3-color: #{$grey-100};
#{$✨}h4-color: #{mix($grey-200, $grey-100)};
#{$✨}h5-color: #{$grey-200};
#{$✨}h6-color: #{mix($grey-300, $grey-200)};
// Highlighted text (<mark>)
#{$✨}mark-background-color: #{mix($grey-300, $amber-300)};
#{$✨}mark-color: #{mix($black, $grey-900, 37.5%)};
@ -48,14 +57,36 @@
// Blockquote
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
}
// Button
@if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
// Table
@if map.get($modules, "content/table") {
#{$✨}table-border-color: var(#{$✨}muted-border-color);
#{$✨}table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
}
// Code
@if map.get($modules, "content/code") {
#{$✨}code-background-color: #{mix($black, $grey-900, 12.5%)};
#{$✨}code-color: var(#{$✨}muted-color);
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
#{$✨}code-tag-color: #{hsl(330, 30%, 50%)};
#{$✨}code-property-color: #{hsl(185, 30%, 50%)};
#{$✨}code-value-color: #{hsl(40, 10%, 50%)};
#{$✨}code-comment-color: #{mix($grey-700, $grey-600)};
}
// Form elements
@if map.get($modules, "forms/basics") {
#{$✨}form-element-background-color: #{mix($black, $grey-900, 37.5%)};
#{$✨}form-element-border-color: #{mix($grey-800, $grey-700)};
#{$✨}form-element-color: var(#{$✨}color);
@ -72,100 +103,109 @@
#{$✨}form-element-valid-border-color: #{$green-800};
#{$✨}form-element-valid-active-border-color: #{$green-700};
#{$✨}form-element-valid-focus-color: #{rgba($green-700, 0.25)};
}
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$✨}switch-background-color: #{mix($grey-800, $grey-700)};
#{$✨}switch-color: var(#{$✨}primary-inverse);
#{$✨}switch-checked-background-color: var(#{$✨}primary);
}
// Range (input[type="range"])
@if map.get($modules, "forms/input-range") {
#{$✨}range-border-color: #{mix($grey-900, $grey-800)};
#{$✨}range-active-border-color: #{$grey-800};
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
#{$✨}range-thumb-color: var(#{$✨}secondary);
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
#{$✨}range-thumb-active-color: var(#{$✨}primary);
// Table
#{$✨}table-border-color: var(#{$✨}muted-border-color);
#{$✨}table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
// Code
#{$✨}code-background-color: #{mix($black, $grey-900, 12.5%)};
#{$✨}code-color: var(#{$✨}muted-color);
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
#{$✨}code-tag-color: #{hsl(330, 30%, 50%)};
#{$✨}code-property-color: #{hsl(185, 30%, 50%)};
#{$✨}code-value-color: #{hsl(40, 10%, 50%)};
#{$✨}code-comment-color: #{mix($grey-700, $grey-600)};
}
// Accordion (<details>)
@if map.get($modules, "components/accordion") {
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
#{$✨}accordion-active-summary-color: var(#{$✨}primary);
#{$✨}accordion-close-summary-color: var(#{$✨}color);
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
}
// Card (<article>)
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
@if map.get($modules, "components/card") {
#{$✨}card-background-color: #{mix($black, $grey-900, 25%)};
#{$✨}card-border-color: var(#{$✨}card-background-color);
#{$✨}card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)}
#{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
$box-shadow-blur-strengh * 0.067
)} #{rgba($black, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
$box-shadow-blur-strengh * 0.125
)} #{rgba($black, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
$box-shadow-blur-strengh * 0.225
)} #{rgba($black, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
$box-shadow-blur-strengh * 0.417
)} #{rgba($black, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
$black,
$box-shadow-opacity
)},
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25))};
#{$✨}card-box-shadow: var(#{$✨}box-shadow);
#{$✨}card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
}
// Dropdown (<details role="list">)
@if map.get($modules, "components/dropdown") {
#{$✨}dropdown-background-color: #{$grey-900};
#{$✨}dropdown-border-color: #{mix($grey-900, $grey-800)};
#{$✨}dropdown-box-shadow: var(#{$✨}card-box-shadow);
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
#{$✨}dropdown-color: var(#{$✨}color);
#{$✨}dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>)
#{$✨}modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
// Progress
#{$✨}progress-background-color: #{mix($grey-900, $grey-800)};
#{$✨}progress-color: var(#{$✨}primary);
}
// Loading ([aria-busy=true])
@if map.get($modules, "components/loading") {
#{$✨}loading-spinner-opacity: 0.5;
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$✨}modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
}
// Progress
@if map.get($modules, "components/progress") {
#{$✨}progress-background-color: #{mix($grey-900, $grey-800)};
#{$✨}progress-color: var(#{$✨}primary);
}
// Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") {
#{$✨}tooltip-background-color: var(#{$✨}contrast);
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
}
// Icons
// Checkboxes icons
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$✨}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
// Chevron icons
@if map.get($modules, "forms/basic") or
map.get($modules, "components/accordion") or
map.get($modules, "components/dropdown")
{
#{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
// Datetime icons
@if map.get($modules, "input-date") {
#{$✨}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='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}
// Form validation icons
@if map.get($modules, "forms/basic") {
#{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
// Search icon
@if map.get($modules, "forms/input-search") {
#{$✨}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='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}
// Close icon
@if map.get($modules, "components/modal") {
#{$✨}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='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
// Document
color-scheme: dark;

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

@ -1,19 +1,15 @@
@use "sass:map";
@use "colors" as *;
@use "../../settings" as *;
@use "../../utils/box-shadow";
@use "../../utils/functions";
// Default: Light theme
@mixin theme {
#{$✨}background-color: #{$white};
// Texts colors
// Text color
#{$✨}color: #{$grey-700};
#{$✨}h1-color: #{$grey-900};
#{$✨}h2-color: #{mix($grey-900, $grey-800)};
#{$✨}h3-color: #{$grey-800};
#{$✨}h4-color: #{mix($grey-800, $grey-700)};
#{$✨}h5-color: #{$grey-700};
#{$✨}h6-color: #{mix($grey-700, $grey-600)};
// Muted colors
#{$✨}muted-color: #{$grey-500};
@ -37,6 +33,19 @@
#{$✨}contrast-focus: #{rgba($grey-600, 0.125)};
#{$✨}contrast-inverse: #{$white};
// Box shadow
#{$✨}box-shadow: box-shadow.shadow($grey-900);
// Typography
@if map.get($modules, "content/typography") {
// Headings colors
#{$✨}h1-color: #{$grey-900};
#{$✨}h2-color: #{mix($grey-900, $grey-800)};
#{$✨}h3-color: #{$grey-800};
#{$✨}h4-color: #{mix($grey-800, $grey-700)};
#{$✨}h5-color: #{$grey-700};
#{$✨}h6-color: #{mix($grey-700, $grey-600)};
// Highlighted text (<mark>)
#{$✨}mark-background-color: #{mix($amber-100, $amber-50)};
#{$✨}mark-color: #{mix($grey-900, $amber-900, 75%)};
@ -48,14 +57,36 @@
// Blockquote
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
}
// Button
@if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
// Table
@if map.get($modules, "content/table") {
#{$✨}table-border-color: var(#{$✨}muted-border-color);
#{$✨}table-row-stripped-background-color: #{mix($grey-50, $white)};
}
// Code
@if map.get($modules, "content/code") {
#{$✨}code-background-color: #{$grey-50};
#{$✨}code-color: var(#{$✨}muted-color);
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
#{$✨}code-tag-color: #{hsl(330, 40%, 50%)};
#{$✨}code-property-color: #{hsl(185, 40%, 40%)};
#{$✨}code-value-color: #{hsl(40, 20%, 50%)};
#{$✨}code-comment-color: #{$grey-300};
}
// Form elements
@if map.get($modules, "forms/basics") {
#{$✨}form-element-background-color: transparent;
#{$✨}form-element-border-color: #{$grey-300};
#{$✨}form-element-color: var(#{$✨}color);
@ -72,99 +103,109 @@
#{$✨}form-element-valid-border-color: #{$green-700};
#{$✨}form-element-valid-active-border-color: #{$green-600};
#{$✨}form-element-valid-focus-color: #{rgba($green-600, 0.125)};
}
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$✨}switch-background-color: #{$grey-200};
#{$✨}switch-color: var(#{$✨}primary-inverse);
#{$✨}switch-checked-background-color: var(#{$✨}primary);
}
// Range (input[type="range"])
@if map.get($modules, "forms/input-range") {
#{$✨}range-border-color: #{$grey-100};
#{$✨}range-active-border-color: #{$grey-200};
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
#{$✨}range-thumb-color: var(#{$✨}secondary);
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
#{$✨}range-thumb-active-color: var(#{$✨}primary);
// Table
#{$✨}table-border-color: var(#{$✨}muted-border-color);
#{$✨}table-row-stripped-background-color: #{mix($grey-50, $white)};
// Code
#{$✨}code-background-color: #{$grey-50};
#{$✨}code-color: var(#{$✨}muted-color);
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
#{$✨}code-tag-color: #{hsl(330, 40%, 50%)};
#{$✨}code-property-color: #{hsl(185, 40%, 40%)};
#{$✨}code-value-color: #{hsl(40, 20%, 50%)};
#{$✨}code-comment-color: #{$grey-300};
}
// Accordion (<details>)
@if map.get($modules, "components/accordion") {
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
#{$✨}accordion-active-summary-color: var(#{$✨}primary);
#{$✨}accordion-close-summary-color: var(#{$✨}color);
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
}
// Card (<article>)
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
@if map.get($modules, "components/card") {
#{$✨}card-background-color: var(#{$✨}background-color);
#{$✨}card-border-color: var(#{$✨}muted-border-color);
#{$✨}card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)}
#{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
$box-shadow-blur-strengh * 0.067
)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
$box-shadow-blur-strengh * 0.125
)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
$box-shadow-blur-strengh * 0.225
)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
$box-shadow-blur-strengh * 0.417
)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
$grey-900,
$box-shadow-opacity
)},
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25))};
#{$✨}card-box-shadow: var(#{$✨}box-shadow);
#{$✨}card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
}
// Dropdown (<details role="list">)
@if map.get($modules, "components/dropdown") {
#{$✨}dropdown-background-color: #{mix($grey-50, $white, 25%)};
#{$✨}dropdown-border-color: #{mix($grey-100, $grey-50)};
#{$✨}dropdown-box-shadow: var(#{$✨}card-box-shadow);
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
#{$✨}dropdown-color: var(#{$✨}color);
#{$✨}dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>)
#{$✨}modal-overlay-background-color: #{rgba($grey-100, 0.7)};
// Progress
#{$✨}progress-background-color: #{$grey-100};
#{$✨}progress-color: var(#{$✨}primary);
}
// Loading ([aria-busy=true])
@if map.get($modules, "components/loading") {
#{$✨}loading-spinner-opacity: 0.5;
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$✨}modal-overlay-background-color: #{rgba($grey-100, 0.7)};
}
// Progress
@if map.get($modules, "components/progress") {
#{$✨}progress-background-color: #{$grey-100};
#{$✨}progress-color: var(#{$✨}primary);
}
// Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") {
#{$✨}tooltip-background-color: var(#{$✨}contrast);
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
}
// Icons
// Checkboxes icon
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$✨}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
// Chevron icons
@if map.get($modules, "forms/basic") or
map.get($modules, "components/accordion") or
map.get($modules, "components/dropdown")
{
#{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
// Datetime icons
@if map.get($modules, "input-date") {
#{$✨}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='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
#{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}
// Form validation icons
@if map.get($modules, "forms/basic") {
#{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
// Search icon
@if map.get($modules, "forms/input-search") {
#{$✨}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='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}
// Close icon
@if map.get($modules, "components/modal") {
#{$✨}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='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
// Document
color-scheme: light;

39
scss/themes/default/_schemes.scss Normal file
View file

@ -0,0 +1,39 @@
@use "sass:map";
@use "../../settings" as *;
@use "light";
@use "dark";
@if map.get($modules, "themes/default") {
/**
* Color schemes
*/
// Light color scheme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
@include light.theme;
}
// Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include dark.theme;
}
}
// Dark color scheme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark.theme;
}
progress,
[type="checkbox"],
[type="radio"],
[type="range"] {
accent-color: var(#{$✨}primary);
}
}

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

@ -1,7 +1,11 @@
@use "sass:map";
@use "../../settings" as *;
// Commons Styles:
@if map.get($modules, "themes/default") {
/**
* Styles
*/
:root {
// Typography
#{$✨}font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
@ -27,44 +31,61 @@
#{$✨}border-width: 1px;
#{$✨}outline-width: 3px;
// Transitions
#{$✨}transition: 0.2s ease-in-out;
// Spacings
#{$✨}spacing: 1rem;
// Spacings for typography elements
@if map.get($modules, "content/typography") {
#{$✨}typography-spacing-vertical: 1.5rem;
}
// Spacings for body > header, body > main, body > footer, section, article
@if map.get($modules, "layout/landmarks") or
map.get($modules, "layout/section") or
map.get($modules, "components/card") or
map.get($modules, "components/modal")
{
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
}
@if ($enable-classes and $enable-grid) {
@if map.get($modules, "layout/grid") and $enable-classes {
#{$✨}grid-spacing-vertical: 0;
#{$✨}grid-spacing-horizontal: var(#{$✨}spacing);
}
// Spacings for form elements and button
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
#{$✨}form-element-spacing-vertical: 0.75rem;
#{$✨}form-element-spacing-horizontal: 1rem;
}
// Font weight for form labels & fieldsets legend
@if map.get($modules, "forms/basic") {
#{$✨}form-label-font-weight: var(#{$✨}font-weight);
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$✨}modal-overlay-backdrop-filter: blur(0.25rem);
}
// Spacings for nav component
@if map.get($modules, "components/nav") {
#{$✨}nav-element-spacing-vertical: 1rem;
#{$✨}nav-element-spacing-horizontal: 0.5rem;
#{$✨}nav-link-spacing-vertical: 0.5rem;
#{$✨}nav-link-spacing-horizontal: 0.5rem;
// Font weight for form labels & fieldsets legend
#{$✨}form-label-font-weight: var(#{$✨}font-weight);
// Transitions
#{$✨}transition: 0.2s ease-in-out;
// Modal (<dialog>)
#{$✨}modal-overlay-backdrop-filter: blur(0.25rem);
}
}
// Responsives spacings
@if $enable-responsive-spacings {
// Sectioning
// Landmarks and section
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
#{$semantic-root-element} > header,
#{$semantic-root-element} > main,
#{$semantic-root-element} > footer,
@ -87,8 +108,10 @@
}
}
}
}
// Card (<article>)
@if map.get($modules, "components/card") {
article {
@each $key, $values in $breakpoints {
@if $values {
@ -108,8 +131,10 @@
}
}
}
}
// Modal
@if map.get($modules, "components/modal") {
dialog > article {
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
@ -129,8 +154,10 @@
}
}
}
}
// Link
@if map.get($modules, "content/link") {
a {
#{$✨}text-decoration: none;
@ -142,7 +169,10 @@ a {
}
}
}
}
// Typography
@if map.get($modules, "content/typography") {
// Small
small {
#{$✨}font-size: 0.875em;
@ -182,18 +212,10 @@ h5 {
#{$✨}font-size: 1.125rem;
#{$✨}typography-spacing-vertical: 1.6875rem;
}
// Forms elements
[type="checkbox"],
[type="radio"] {
#{$✨}border-width: 2px;
}
[type="checkbox"][role="switch"] {
#{$✨}border-width: 3px;
}
// Table
@if map.get($modules, "content/table") {
thead,
tfoot {
th,
@ -205,8 +227,10 @@ tfoot {
:not(thead, tfoot) > * > td {
#{$✨}font-size: 0.875em;
}
}
// Code
@if map.get($modules, "content/code") {
pre,
code,
kbd,
@ -219,3 +243,17 @@ samp {
kbd {
#{$✨}font-weight: bolder;
}
}
// Checkboxes, Radios and Switches
@if map.get($modules, "forms/checkbox-radio-switch") {
[type="checkbox"],
[type="radio"] {
#{$✨}border-width: 2px;
}
[type="checkbox"][role="switch"] {
#{$✨}border-width: 3px;
}
}
}

5
scss/utilities/_accessibility.scss
View file

@ -1,3 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "utilities/accessibility") {
/**
* Accessibility & User interaction
*/
@ -50,3 +54,4 @@ textarea,
[dir="rtl"] {
direction: rtl;
}
}

3
scss/utilities/_reduce-motion.scss
View file

@ -1,6 +1,7 @@
@use "sass:map";
@use "../settings" as *;
@if enable-transitions and enable-important {
@if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important {
/**
* Reduce Motion Features
*/

25
scss/utils/_box-shadow.scss Normal file
View file

@ -0,0 +1,25 @@
@function shadow($color) {
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
@return #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
$box-shadow-blur-strengh * 0.029
)} #{rgba($color, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
$box-shadow-blur-strengh * 0.067
)} #{rgba($color, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
$box-shadow-blur-strengh * 0.125
)} #{rgba($color, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
$box-shadow-blur-strengh * 0.225
)} #{rgba($color, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
$box-shadow-blur-strengh * 0.417
)} #{rgba($color, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
$color,
$box-shadow-opacity
)},
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
}