mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
Add scripts to build and watch files
This commit is contained in:
Lucas Larroche
parent
2986278b15
commit
8e028956e9
23 changed files with 13439 additions and 1660 deletions
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
>= 0.5%
|
||||||
|
last 2 major versions
|
||||||
|
not dead
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
||||||
|
node_modules/
|
||||||
*.DS_Store
|
*.DS_Store
|
||||||
TODO.md
|
TODO.md
|
||||||
prepros.config
|
prepros.config
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
876
css/pico.css
876
css/pico.css
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -26,25 +26,21 @@
|
||||||
--form-element-spacing-horizontal: 1rem;
|
--form-element-spacing-horizontal: 1rem;
|
||||||
--transition: .2s ease-in-out;
|
--transition: .2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 17px;
|
--font-size: 17px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 18px;
|
--font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 19px;
|
--font-size: 19px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 20px;
|
--font-size: 20px;
|
||||||
|
|
@ -54,7 +50,6 @@
|
||||||
a {
|
a {
|
||||||
--text-decoration: none;
|
--text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.secondary, a.contrast {
|
a.secondary, a.contrast {
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -97,12 +92,12 @@ h5 {
|
||||||
--typography-spacing-vertical: 1.6875rem;
|
--typography-spacing-vertical: 1.6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type=checkbox],
|
||||||
[type="radio"] {
|
[type=radio] {
|
||||||
--border-width: 2px;
|
--border-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"][role="switch"] {
|
[type=checkbox][role=switch] {
|
||||||
--border-width: 3px;
|
--border-width: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -126,13 +121,13 @@ kbd {
|
||||||
--font-weight: bolder;
|
--font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme=light],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme=dark]) {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--background-color: #FFF;
|
--background-color: #FFF;
|
||||||
--color: #415462;
|
--color: #415462;
|
||||||
--h1-color: #1b2832;
|
--h1-color: #1b2832;
|
||||||
--h2-color: #23333e;
|
--h2-color: #24333e;
|
||||||
--h3-color: #2c3d49;
|
--h3-color: #2c3d49;
|
||||||
--h4-color: #374956;
|
--h4-color: #374956;
|
||||||
--h5-color: #415462;
|
--h5-color: #415462;
|
||||||
|
|
@ -152,7 +147,7 @@ kbd {
|
||||||
--contrast-focus: rgba(89, 107, 120, 0.125);
|
--contrast-focus: rgba(89, 107, 120, 0.125);
|
||||||
--contrast-inverse: #FFF;
|
--contrast-inverse: #FFF;
|
||||||
--mark-background-color: #fff2ca;
|
--mark-background-color: #fff2ca;
|
||||||
--mark-color: #543a25;
|
--mark-color: #543a26;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388E3C;
|
||||||
--del-color: #C62828;
|
--del-color: #C62828;
|
||||||
--blockquote-border-color: var(--muted-border-color);
|
--blockquote-border-color: var(--muted-border-color);
|
||||||
|
|
@ -198,33 +193,33 @@ kbd {
|
||||||
--card-background-color: var(--background-color);
|
--card-background-color: var(--background-color);
|
||||||
--card-border-color: var(--muted-border-color);
|
--card-border-color: var(--muted-border-color);
|
||||||
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fafbfc;
|
--card-sectionning-background-color: #fbfbfc;
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: .5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--tooltip-color: var(--contrast-inverse);
|
||||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
:root:not([data-theme="light"]) {
|
:root:not([data-theme=light]) {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--background-color: #11191f;
|
--background-color: #11191f;
|
||||||
--color: #bbc6ce;
|
--color: #bbc6ce;
|
||||||
--h1-color: #edf0f3;
|
--h1-color: #edf0f3;
|
||||||
--h2-color: #e1e6ea;
|
--h2-color: #e1e6eb;
|
||||||
--h3-color: #d5dce2;
|
--h3-color: #d5dce2;
|
||||||
--h4-color: #c8d1d8;
|
--h4-color: #c8d1d8;
|
||||||
--h5-color: #bbc6ce;
|
--h5-color: #bbc6ce;
|
||||||
--h6-color: #aebbc3;
|
--h6-color: #afbbc4;
|
||||||
--muted-color: #73828c;
|
--muted-color: #73828c;
|
||||||
--muted-border-color: #1f2d38;
|
--muted-border-color: #1f2d38;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
|
|
@ -239,7 +234,7 @@ kbd {
|
||||||
--contrast-hover: #FFF;
|
--contrast-hover: #FFF;
|
||||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
--contrast-inverse: #000;
|
--contrast-inverse: #000;
|
||||||
--mark-background-color: #d0c284;
|
--mark-background-color: #d1c284;
|
||||||
--mark-color: #11191f;
|
--mark-color: #11191f;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388E3C;
|
||||||
--del-color: #C62828;
|
--del-color: #C62828;
|
||||||
|
|
@ -264,7 +259,7 @@ kbd {
|
||||||
--switch-background-color: #374956;
|
--switch-background-color: #374956;
|
||||||
--switch-color: var(--primary-inverse);
|
--switch-color: var(--primary-inverse);
|
||||||
--switch-checked-background-color: var(--primary);
|
--switch-checked-background-color: var(--primary);
|
||||||
--range-border-color: #23333e;
|
--range-border-color: #24333e;
|
||||||
--range-active-border-color: #2c3d49;
|
--range-active-border-color: #2c3d49;
|
||||||
--range-thumb-border-color: var(--background-color);
|
--range-thumb-border-color: var(--background-color);
|
||||||
--range-thumb-color: var(--secondary);
|
--range-thumb-color: var(--secondary);
|
||||||
|
|
@ -272,7 +267,7 @@ kbd {
|
||||||
--range-thumb-active-color: var(--primary);
|
--range-thumb-active-color: var(--primary);
|
||||||
--table-border-color: var(--muted-border-color);
|
--table-border-color: var(--muted-border-color);
|
||||||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||||
--code-background-color: #17232c;
|
--code-background-color: #18232c;
|
||||||
--code-color: var(--muted-color);
|
--code-color: var(--muted-color);
|
||||||
--code-kbd-background-color: var(--contrast);
|
--code-kbd-background-color: var(--contrast);
|
||||||
--code-kbd-color: var(--contrast-inverse);
|
--code-kbd-color: var(--contrast-inverse);
|
||||||
|
|
@ -284,36 +279,35 @@ kbd {
|
||||||
--accordion-active-summary-color: var(--primary);
|
--accordion-active-summary-color: var(--primary);
|
||||||
--accordion-close-summary-color: var(--color);
|
--accordion-close-summary-color: var(--color);
|
||||||
--accordion-open-summary-color: var(--muted-color);
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
--card-background-color: #141e25;
|
--card-background-color: #141e26;
|
||||||
--card-border-color: #11191f;
|
--card-border-color: #11191f;
|
||||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #17232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
--progress-background-color: #23333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: .5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--tooltip-color: var(--contrast-inverse);
|
||||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
[data-theme=dark] {
|
||||||
[data-theme="dark"] {
|
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--background-color: #11191f;
|
--background-color: #11191f;
|
||||||
--color: #bbc6ce;
|
--color: #bbc6ce;
|
||||||
--h1-color: #edf0f3;
|
--h1-color: #edf0f3;
|
||||||
--h2-color: #e1e6ea;
|
--h2-color: #e1e6eb;
|
||||||
--h3-color: #d5dce2;
|
--h3-color: #d5dce2;
|
||||||
--h4-color: #c8d1d8;
|
--h4-color: #c8d1d8;
|
||||||
--h5-color: #bbc6ce;
|
--h5-color: #bbc6ce;
|
||||||
--h6-color: #aebbc3;
|
--h6-color: #afbbc4;
|
||||||
--muted-color: #73828c;
|
--muted-color: #73828c;
|
||||||
--muted-border-color: #1f2d38;
|
--muted-border-color: #1f2d38;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
|
|
@ -328,7 +322,7 @@ kbd {
|
||||||
--contrast-hover: #FFF;
|
--contrast-hover: #FFF;
|
||||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
--contrast-inverse: #000;
|
--contrast-inverse: #000;
|
||||||
--mark-background-color: #d0c284;
|
--mark-background-color: #d1c284;
|
||||||
--mark-color: #11191f;
|
--mark-color: #11191f;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388E3C;
|
||||||
--del-color: #C62828;
|
--del-color: #C62828;
|
||||||
|
|
@ -353,7 +347,7 @@ kbd {
|
||||||
--switch-background-color: #374956;
|
--switch-background-color: #374956;
|
||||||
--switch-color: var(--primary-inverse);
|
--switch-color: var(--primary-inverse);
|
||||||
--switch-checked-background-color: var(--primary);
|
--switch-checked-background-color: var(--primary);
|
||||||
--range-border-color: #23333e;
|
--range-border-color: #24333e;
|
||||||
--range-active-border-color: #2c3d49;
|
--range-active-border-color: #2c3d49;
|
||||||
--range-thumb-border-color: var(--background-color);
|
--range-thumb-border-color: var(--background-color);
|
||||||
--range-thumb-color: var(--secondary);
|
--range-thumb-color: var(--secondary);
|
||||||
|
|
@ -361,7 +355,7 @@ kbd {
|
||||||
--range-thumb-active-color: var(--primary);
|
--range-thumb-active-color: var(--primary);
|
||||||
--table-border-color: var(--muted-border-color);
|
--table-border-color: var(--muted-border-color);
|
||||||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||||
--code-background-color: #17232c;
|
--code-background-color: #18232c;
|
||||||
--code-color: var(--muted-color);
|
--code-color: var(--muted-color);
|
||||||
--code-kbd-background-color: var(--contrast);
|
--code-kbd-background-color: var(--contrast);
|
||||||
--code-kbd-color: var(--contrast-inverse);
|
--code-kbd-color: var(--contrast-inverse);
|
||||||
|
|
@ -373,23 +367,23 @@ kbd {
|
||||||
--accordion-active-summary-color: var(--primary);
|
--accordion-active-summary-color: var(--primary);
|
||||||
--accordion-close-summary-color: var(--color);
|
--accordion-close-summary-color: var(--color);
|
||||||
--accordion-open-summary-color: var(--muted-color);
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
--card-background-color: #141e25;
|
--card-background-color: #141e26;
|
||||||
--card-border-color: #11191f;
|
--card-border-color: #11191f;
|
||||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #17232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
--progress-background-color: #23333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: .5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--tooltip-color: var(--contrast-inverse);
|
||||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -435,7 +429,6 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
body > footer {
|
body > footer {
|
||||||
|
|
@ -464,19 +457,16 @@ body > footer {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 920px;
|
max-width: 920px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 1130px;
|
max-width: 1130px;
|
||||||
|
|
@ -502,13 +492,11 @@ section {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.grid {
|
.grid {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid > * {
|
.grid > * {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -522,9 +510,8 @@ figure {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure figcaption {
|
figure figcaption {
|
||||||
padding: calc(var(--spacing) / 2) 0;
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -539,7 +526,7 @@ strong {
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: .75em;
|
font-size: 0.75em;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
@ -591,38 +578,31 @@ a {
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
text-decoration: var(--text-decoration);
|
-webkit-text-decoration: var(--text-decoration);
|
||||||
|
text-decoration: var(--text-decoration);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover, a:active, a:focus {
|
a:hover, a:active, a:focus {
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus {
|
a:focus {
|
||||||
--background-color: var(--primary-focus);
|
--background-color: var(--primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.secondary {
|
a.secondary {
|
||||||
--color: var(--secondary);
|
--color: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.secondary:hover, a.secondary:active, a.secondary:focus {
|
a.secondary:hover, a.secondary:active, a.secondary:focus {
|
||||||
--color: var(--secondary-hover);
|
--color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.secondary:focus {
|
a.secondary:focus {
|
||||||
--background-color: var(--secondary-focus);
|
--background-color: var(--secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.contrast {
|
a.contrast {
|
||||||
--color: var(--contrast);
|
--color: var(--contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.contrast:hover, a.contrast:active, a.contrast:focus {
|
a.contrast:hover, a.contrast:active, a.contrast:focus {
|
||||||
--color: var(--contrast-hover);
|
--color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.contrast:focus {
|
a.contrast:focus {
|
||||||
--background-color: var(--contrast-focus);
|
--background-color: var(--contrast-focus);
|
||||||
}
|
}
|
||||||
|
|
@ -665,12 +645,7 @@ h6 {
|
||||||
--color: var(--h6-color);
|
--color: var(--h6-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h1,
|
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
|
||||||
address ~ h2,
|
|
||||||
address ~ h3,
|
|
||||||
address ~ h4,
|
|
||||||
address ~ h5,
|
|
||||||
address ~ h6,
|
|
||||||
blockquote ~ h1,
|
blockquote ~ h1,
|
||||||
blockquote ~ h2,
|
blockquote ~ h2,
|
||||||
blockquote ~ h3,
|
blockquote ~ h3,
|
||||||
|
|
@ -731,11 +706,9 @@ ul ~ h6 {
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
hgroup > * {
|
hgroup > * {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
hgroup > *:last-child {
|
hgroup > *:last-child {
|
||||||
--color: var(--muted-color);
|
--color: var(--muted-color);
|
||||||
--font-weight: unset;
|
--font-weight: unset;
|
||||||
|
|
@ -755,10 +728,9 @@ ul,
|
||||||
ol {
|
ol {
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li,
|
ul li,
|
||||||
ol li {
|
ol li {
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) / 4);
|
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
|
|
@ -766,7 +738,7 @@ ul li {
|
||||||
}
|
}
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
padding: .125rem .25rem;
|
padding: 0.125rem 0.25rem;
|
||||||
background-color: var(--mark-background-color);
|
background-color: var(--mark-background-color);
|
||||||
color: var(--mark-color);
|
color: var(--mark-color);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -778,9 +750,8 @@ blockquote {
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) / 2);
|
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||||
color: var(--blockquote-footer-color);
|
color: var(--blockquote-footer-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -799,6 +770,10 @@ del {
|
||||||
color: var(--del-color);
|
color: var(--del-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: var(--primary-focus);
|
||||||
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background-color: var(--primary-focus);
|
background-color: var(--primary-focus);
|
||||||
}
|
}
|
||||||
|
|
@ -854,16 +829,16 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[type="button"],
|
[type=button],
|
||||||
[type="reset"],
|
[type=reset],
|
||||||
[type="submit"] {
|
[type=submit] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
button::-moz-focus-inner,
|
||||||
[type="button"]::-moz-focus-inner,
|
[type=button]::-moz-focus-inner,
|
||||||
[type="reset"]::-moz-focus-inner,
|
[type=reset]::-moz-focus-inner,
|
||||||
[type="submit"]::-moz-focus-inner {
|
[type=submit]::-moz-focus-inner {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
@ -874,16 +849,16 @@ button {
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
a[role="button"] {
|
a[role=button] {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type=submit],
|
||||||
input[type="button"],
|
input[type=button],
|
||||||
input[type="reset"],
|
input[type=reset],
|
||||||
a[role="button"] {
|
a[role=button] {
|
||||||
--background-color: var(--primary);
|
--background-color: var(--primary);
|
||||||
--border-color: var(--primary);
|
--border-color: var(--primary);
|
||||||
--color: var(--primary-inverse);
|
--color: var(--primary-inverse);
|
||||||
|
|
@ -901,200 +876,185 @@ a[role="button"] {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover, button:active, button:focus,
|
button:hover, button:active, button:focus,
|
||||||
input[type="submit"]:hover,
|
input[type=submit]:hover,
|
||||||
input[type="submit"]:active,
|
input[type=submit]:active,
|
||||||
input[type="submit"]:focus,
|
input[type=submit]:focus,
|
||||||
input[type="button"]:hover,
|
input[type=button]:hover,
|
||||||
input[type="button"]:active,
|
input[type=button]:active,
|
||||||
input[type="button"]:focus,
|
input[type=button]:focus,
|
||||||
input[type="reset"]:hover,
|
input[type=reset]:hover,
|
||||||
input[type="reset"]:active,
|
input[type=reset]:active,
|
||||||
input[type="reset"]:focus,
|
input[type=reset]:focus,
|
||||||
a[role="button"]:hover,
|
a[role=button]:hover,
|
||||||
a[role="button"]:active,
|
a[role=button]:active,
|
||||||
a[role="button"]:focus {
|
a[role=button]:focus {
|
||||||
--background-color: var(--primary-hover);
|
--background-color: var(--primary-hover);
|
||||||
--border-color: var(--primary-hover);
|
--border-color: var(--primary-hover);
|
||||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus,
|
button:focus,
|
||||||
input[type="submit"]:focus,
|
input[type=submit]:focus,
|
||||||
input[type="button"]:focus,
|
input[type=button]:focus,
|
||||||
input[type="reset"]:focus,
|
input[type=reset]:focus,
|
||||||
a[role="button"]:focus {
|
a[role=button]:focus {
|
||||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="reset"] {
|
input[type=reset] {
|
||||||
--background-color: var(--secondary);
|
--background-color: var(--secondary);
|
||||||
--border-color: var(--secondary);
|
--border-color: var(--secondary);
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||||
input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus {
|
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
input[type=reset]:focus {
|
||||||
input[type="reset"]:focus {
|
|
||||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.secondary,
|
button.secondary,
|
||||||
input[type="submit"].secondary,
|
input[type=submit].secondary,
|
||||||
input[type="button"].secondary,
|
input[type=button].secondary,
|
||||||
input[type="reset"].secondary,
|
input[type=reset].secondary,
|
||||||
a[role="button"].secondary {
|
a[role=button].secondary {
|
||||||
--background-color: var(--secondary);
|
--background-color: var(--secondary);
|
||||||
--border-color: var(--secondary);
|
--border-color: var(--secondary);
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.secondary:hover, button.secondary:active, button.secondary:focus,
|
button.secondary:hover, button.secondary:active, button.secondary:focus,
|
||||||
input[type="submit"].secondary:hover,
|
input[type=submit].secondary:hover,
|
||||||
input[type="submit"].secondary:active,
|
input[type=submit].secondary:active,
|
||||||
input[type="submit"].secondary:focus,
|
input[type=submit].secondary:focus,
|
||||||
input[type="button"].secondary:hover,
|
input[type=button].secondary:hover,
|
||||||
input[type="button"].secondary:active,
|
input[type=button].secondary:active,
|
||||||
input[type="button"].secondary:focus,
|
input[type=button].secondary:focus,
|
||||||
input[type="reset"].secondary:hover,
|
input[type=reset].secondary:hover,
|
||||||
input[type="reset"].secondary:active,
|
input[type=reset].secondary:active,
|
||||||
input[type="reset"].secondary:focus,
|
input[type=reset].secondary:focus,
|
||||||
a[role="button"].secondary:hover,
|
a[role=button].secondary:hover,
|
||||||
a[role="button"].secondary:active,
|
a[role=button].secondary:active,
|
||||||
a[role="button"].secondary:focus {
|
a[role=button].secondary:focus {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.secondary:focus,
|
button.secondary:focus,
|
||||||
input[type="submit"].secondary:focus,
|
input[type=submit].secondary:focus,
|
||||||
input[type="button"].secondary:focus,
|
input[type=button].secondary:focus,
|
||||||
input[type="reset"].secondary:focus,
|
input[type=reset].secondary:focus,
|
||||||
a[role="button"].secondary:focus {
|
a[role=button].secondary:focus {
|
||||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.contrast,
|
button.contrast,
|
||||||
input[type="submit"].contrast,
|
input[type=submit].contrast,
|
||||||
input[type="button"].contrast,
|
input[type=button].contrast,
|
||||||
input[type="reset"].contrast,
|
input[type=reset].contrast,
|
||||||
a[role="button"].contrast {
|
a[role=button].contrast {
|
||||||
--background-color: var(--contrast);
|
--background-color: var(--contrast);
|
||||||
--border-color: var(--contrast);
|
--border-color: var(--contrast);
|
||||||
--color: var(--contrast-inverse);
|
--color: var(--contrast-inverse);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.contrast:hover, button.contrast:active, button.contrast:focus,
|
button.contrast:hover, button.contrast:active, button.contrast:focus,
|
||||||
input[type="submit"].contrast:hover,
|
input[type=submit].contrast:hover,
|
||||||
input[type="submit"].contrast:active,
|
input[type=submit].contrast:active,
|
||||||
input[type="submit"].contrast:focus,
|
input[type=submit].contrast:focus,
|
||||||
input[type="button"].contrast:hover,
|
input[type=button].contrast:hover,
|
||||||
input[type="button"].contrast:active,
|
input[type=button].contrast:active,
|
||||||
input[type="button"].contrast:focus,
|
input[type=button].contrast:focus,
|
||||||
input[type="reset"].contrast:hover,
|
input[type=reset].contrast:hover,
|
||||||
input[type="reset"].contrast:active,
|
input[type=reset].contrast:active,
|
||||||
input[type="reset"].contrast:focus,
|
input[type=reset].contrast:focus,
|
||||||
a[role="button"].contrast:hover,
|
a[role=button].contrast:hover,
|
||||||
a[role="button"].contrast:active,
|
a[role=button].contrast:active,
|
||||||
a[role="button"].contrast:focus {
|
a[role=button].contrast:focus {
|
||||||
--background-color: var(--contrast-hover);
|
--background-color: var(--contrast-hover);
|
||||||
--border-color: var(--contrast-hover);
|
--border-color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.contrast:focus,
|
button.contrast:focus,
|
||||||
input[type="submit"].contrast:focus,
|
input[type=submit].contrast:focus,
|
||||||
input[type="button"].contrast:focus,
|
input[type=button].contrast:focus,
|
||||||
input[type="reset"].contrast:focus,
|
input[type=reset].contrast:focus,
|
||||||
a[role="button"].contrast:focus {
|
a[role=button].contrast:focus {
|
||||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
|
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.outline,
|
button.outline,
|
||||||
input[type="submit"].outline,
|
input[type=submit].outline,
|
||||||
input[type="button"].outline,
|
input[type=button].outline,
|
||||||
input[type="reset"].outline,
|
input[type=reset].outline,
|
||||||
a[role="button"].outline {
|
a[role=button].outline {
|
||||||
--background-color: transparent;
|
--background-color: transparent;
|
||||||
--color: var(--primary);
|
--color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.outline:hover, button.outline:active, button.outline:focus,
|
button.outline:hover, button.outline:active, button.outline:focus,
|
||||||
input[type="submit"].outline:hover,
|
input[type=submit].outline:hover,
|
||||||
input[type="submit"].outline:active,
|
input[type=submit].outline:active,
|
||||||
input[type="submit"].outline:focus,
|
input[type=submit].outline:focus,
|
||||||
input[type="button"].outline:hover,
|
input[type=button].outline:hover,
|
||||||
input[type="button"].outline:active,
|
input[type=button].outline:active,
|
||||||
input[type="button"].outline:focus,
|
input[type=button].outline:focus,
|
||||||
input[type="reset"].outline:hover,
|
input[type=reset].outline:hover,
|
||||||
input[type="reset"].outline:active,
|
input[type=reset].outline:active,
|
||||||
input[type="reset"].outline:focus,
|
input[type=reset].outline:focus,
|
||||||
a[role="button"].outline:hover,
|
a[role=button].outline:hover,
|
||||||
a[role="button"].outline:active,
|
a[role=button].outline:active,
|
||||||
a[role="button"].outline:focus {
|
a[role=button].outline:focus {
|
||||||
--background-color: transparent;
|
--background-color: transparent;
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.outline.secondary,
|
button.outline.secondary,
|
||||||
input[type="submit"].outline.secondary,
|
input[type=submit].outline.secondary,
|
||||||
input[type="button"].outline.secondary,
|
input[type=button].outline.secondary,
|
||||||
input[type="reset"].outline.secondary,
|
input[type=reset].outline.secondary,
|
||||||
a[role="button"].outline.secondary {
|
a[role=button].outline.secondary {
|
||||||
--color: var(--secondary);
|
--color: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
||||||
input[type="submit"].outline.secondary:hover,
|
input[type=submit].outline.secondary:hover,
|
||||||
input[type="submit"].outline.secondary:active,
|
input[type=submit].outline.secondary:active,
|
||||||
input[type="submit"].outline.secondary:focus,
|
input[type=submit].outline.secondary:focus,
|
||||||
input[type="button"].outline.secondary:hover,
|
input[type=button].outline.secondary:hover,
|
||||||
input[type="button"].outline.secondary:active,
|
input[type=button].outline.secondary:active,
|
||||||
input[type="button"].outline.secondary:focus,
|
input[type=button].outline.secondary:focus,
|
||||||
input[type="reset"].outline.secondary:hover,
|
input[type=reset].outline.secondary:hover,
|
||||||
input[type="reset"].outline.secondary:active,
|
input[type=reset].outline.secondary:active,
|
||||||
input[type="reset"].outline.secondary:focus,
|
input[type=reset].outline.secondary:focus,
|
||||||
a[role="button"].outline.secondary:hover,
|
a[role=button].outline.secondary:hover,
|
||||||
a[role="button"].outline.secondary:active,
|
a[role=button].outline.secondary:active,
|
||||||
a[role="button"].outline.secondary:focus {
|
a[role=button].outline.secondary:focus {
|
||||||
--color: var(--secondary-hover);
|
--color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.outline.contrast,
|
button.outline.contrast,
|
||||||
input[type="submit"].outline.contrast,
|
input[type=submit].outline.contrast,
|
||||||
input[type="button"].outline.contrast,
|
input[type=button].outline.contrast,
|
||||||
input[type="reset"].outline.contrast,
|
input[type=reset].outline.contrast,
|
||||||
a[role="button"].outline.contrast {
|
a[role=button].outline.contrast {
|
||||||
--color: var(--contrast);
|
--color: var(--contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
||||||
input[type="submit"].outline.contrast:hover,
|
input[type=submit].outline.contrast:hover,
|
||||||
input[type="submit"].outline.contrast:active,
|
input[type=submit].outline.contrast:active,
|
||||||
input[type="submit"].outline.contrast:focus,
|
input[type=submit].outline.contrast:focus,
|
||||||
input[type="button"].outline.contrast:hover,
|
input[type=button].outline.contrast:hover,
|
||||||
input[type="button"].outline.contrast:active,
|
input[type=button].outline.contrast:active,
|
||||||
input[type="button"].outline.contrast:focus,
|
input[type=button].outline.contrast:focus,
|
||||||
input[type="reset"].outline.contrast:hover,
|
input[type=reset].outline.contrast:hover,
|
||||||
input[type="reset"].outline.contrast:active,
|
input[type=reset].outline.contrast:active,
|
||||||
input[type="reset"].outline.contrast:focus,
|
input[type=reset].outline.contrast:focus,
|
||||||
a[role="button"].outline.contrast:hover,
|
a[role=button].outline.contrast:hover,
|
||||||
a[role="button"].outline.contrast:active,
|
a[role=button].outline.contrast:active,
|
||||||
a[role="button"].outline.contrast:focus {
|
a[role=button].outline.contrast:focus {
|
||||||
--color: var(--contrast-hover);
|
--color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
button[disabled],
|
button[disabled],
|
||||||
input[type="submit"][disabled],
|
input[type=submit][disabled],
|
||||||
input[type="button"][disabled],
|
input[type=button][disabled],
|
||||||
input[type="reset"][disabled],
|
input[type=reset][disabled],
|
||||||
a[role="button"][disabled] {
|
a[role=button][disabled] {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1131,8 +1091,8 @@ textarea {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type=checkbox],
|
||||||
[type="radio"] {
|
[type=radio] {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1141,12 +1101,12 @@ textarea {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="search"] {
|
[type=search] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
[type=search]::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1172,14 +1132,14 @@ textarea {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="file"],
|
[type=file],
|
||||||
[type="range"] {
|
[type=range] {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
|
||||||
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2));
|
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
|
|
@ -1192,18 +1152,18 @@ fieldset {
|
||||||
label,
|
label,
|
||||||
fieldset legend {
|
fieldset legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--spacing) / 4);
|
margin-bottom: calc(var(--spacing) * 0.25);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="radio"]),
|
input:not([type=checkbox]):not([type=radio]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
@ -1229,7 +1189,7 @@ textarea {
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
|
||||||
select:active,
|
select:active,
|
||||||
select:focus,
|
select:focus,
|
||||||
textarea:active,
|
textarea:active,
|
||||||
|
|
@ -1237,7 +1197,7 @@ textarea:focus {
|
||||||
--background-color: var(--form-element-active-background-color);
|
--background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
|
||||||
select:active,
|
select:active,
|
||||||
select:focus,
|
select:focus,
|
||||||
textarea:active,
|
textarea:active,
|
||||||
|
|
@ -1245,13 +1205,13 @@ textarea:focus {
|
||||||
--border-color: var(--form-element-active-border-color);
|
--border-color: var(--form-element-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,
|
||||||
select:focus,
|
select:focus,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
|
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled] {
|
textarea[disabled] {
|
||||||
--background-color: var(--form-element-disabled-background-color);
|
--background-color: var(--form-element-disabled-background-color);
|
||||||
|
|
@ -1263,38 +1223,34 @@ input[aria-invalid],
|
||||||
select[aria-invalid],
|
select[aria-invalid],
|
||||||
textarea[aria-invalid] {
|
textarea[aria-invalid] {
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
background-position: center right .75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
}
|
}
|
||||||
|
input[aria-invalid=false],
|
||||||
input[aria-invalid="false"],
|
select[aria-invalid=false],
|
||||||
select[aria-invalid="false"],
|
textarea[aria-invalid=false] {
|
||||||
textarea[aria-invalid="false"] {
|
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
background-image: var(--icon-valid);
|
background-image: var(--icon-valid);
|
||||||
}
|
}
|
||||||
|
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
|
||||||
input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus,
|
select[aria-invalid=false]:active,
|
||||||
select[aria-invalid="false"]:active,
|
select[aria-invalid=false]:focus,
|
||||||
select[aria-invalid="false"]:focus,
|
textarea[aria-invalid=false]:active,
|
||||||
textarea[aria-invalid="false"]:active,
|
textarea[aria-invalid=false]:focus {
|
||||||
textarea[aria-invalid="false"]:focus {
|
|
||||||
--border-color: var(--form-element-valid-active-border-color);
|
--border-color: var(--form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
input[aria-invalid=true],
|
||||||
input[aria-invalid="true"],
|
select[aria-invalid=true],
|
||||||
select[aria-invalid="true"],
|
textarea[aria-invalid=true] {
|
||||||
textarea[aria-invalid="true"] {
|
|
||||||
--border-color: var(--form-element-invalid-border-color);
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
background-image: var(--icon-invalid);
|
background-image: var(--icon-invalid);
|
||||||
}
|
}
|
||||||
|
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
|
||||||
input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus,
|
select[aria-invalid=true]:active,
|
||||||
select[aria-invalid="true"]:active,
|
select[aria-invalid=true]:focus,
|
||||||
select[aria-invalid="true"]:focus,
|
textarea[aria-invalid=true]:active,
|
||||||
textarea[aria-invalid="true"]:active,
|
textarea[aria-invalid=true]:focus {
|
||||||
textarea[aria-invalid="true"]:focus {
|
|
||||||
--border-color: var(--form-element-invalid-active-border-color);
|
--border-color: var(--form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1307,7 +1263,7 @@ select:invalid {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="radio"]),
|
input:not([type=checkbox]):not([type=radio]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
|
|
@ -1317,11 +1273,10 @@ select::-ms-expand {
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
select:not([multiple]):not([size]) {
|
select:not([multiple]):not([size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right .75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
}
|
}
|
||||||
|
|
@ -1336,10 +1291,8 @@ textarea + small {
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
label > input,
|
label > input, label > select, label > textarea {
|
||||||
label > select,
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
label > textarea {
|
|
||||||
margin-top: calc(var(--spacing) / 4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -1367,7 +1320,7 @@ tr {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
table[role="grid"] tbody tr:nth-child(odd) {
|
table[role=grid] tbody tr:nth-child(odd) {
|
||||||
--background-color: var(--table-row-stripped-background-color);
|
--background-color: var(--table-row-stripped-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1378,16 +1331,16 @@ table[role="grid"] tbody tr:nth-child(odd) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
[aria-disabled="true"],
|
[aria-disabled=true],
|
||||||
[disabled] {
|
[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
[aria-hidden="false"][hidden] {
|
[aria-hidden=false][hidden] {
|
||||||
display: initial;
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
[aria-hidden="false"][hidden]:not(:focus) {
|
[aria-hidden=false][hidden]:not(:focus) {
|
||||||
clip: rect(0, 0, 0, 0);
|
clip: rect(0, 0, 0, 0);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -19,25 +19,21 @@
|
||||||
--form-element-spacing-horizontal: 1rem;
|
--form-element-spacing-horizontal: 1rem;
|
||||||
--transition: .2s ease-in-out;
|
--transition: .2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 17px;
|
--font-size: 17px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 18px;
|
--font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 19px;
|
--font-size: 19px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 20px;
|
--font-size: 20px;
|
||||||
|
|
@ -46,36 +42,33 @@
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
body > footer,
|
body > footer,
|
||||||
section {
|
section {
|
||||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
body > footer,
|
body > footer,
|
||||||
section {
|
section {
|
||||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
body > footer,
|
body > footer,
|
||||||
section {
|
section {
|
||||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
body > footer,
|
body > footer,
|
||||||
section {
|
section {
|
||||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -85,19 +78,16 @@
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
article {
|
article {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
article {
|
article {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
article {
|
article {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||||
|
|
@ -107,7 +97,6 @@
|
||||||
a {
|
a {
|
||||||
--text-decoration: none;
|
--text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.secondary, a.contrast {
|
a.secondary, a.contrast {
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -150,12 +139,12 @@ h5 {
|
||||||
--typography-spacing-vertical: 1.6875rem;
|
--typography-spacing-vertical: 1.6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type=checkbox],
|
||||||
[type="radio"] {
|
[type=radio] {
|
||||||
--border-width: 2px;
|
--border-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"][role="switch"] {
|
[type=checkbox][role=switch] {
|
||||||
--border-width: 3px;
|
--border-width: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -179,13 +168,13 @@ kbd {
|
||||||
--font-weight: bolder;
|
--font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme=light],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme=dark]) {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--background-color: #FFF;
|
--background-color: #FFF;
|
||||||
--color: #415462;
|
--color: #415462;
|
||||||
--h1-color: #1b2832;
|
--h1-color: #1b2832;
|
||||||
--h2-color: #23333e;
|
--h2-color: #24333e;
|
||||||
--h3-color: #2c3d49;
|
--h3-color: #2c3d49;
|
||||||
--h4-color: #374956;
|
--h4-color: #374956;
|
||||||
--h5-color: #415462;
|
--h5-color: #415462;
|
||||||
|
|
@ -205,7 +194,7 @@ kbd {
|
||||||
--contrast-focus: rgba(89, 107, 120, 0.125);
|
--contrast-focus: rgba(89, 107, 120, 0.125);
|
||||||
--contrast-inverse: #FFF;
|
--contrast-inverse: #FFF;
|
||||||
--mark-background-color: #fff2ca;
|
--mark-background-color: #fff2ca;
|
||||||
--mark-color: #543a25;
|
--mark-color: #543a26;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388E3C;
|
||||||
--del-color: #C62828;
|
--del-color: #C62828;
|
||||||
--blockquote-border-color: var(--muted-border-color);
|
--blockquote-border-color: var(--muted-border-color);
|
||||||
|
|
@ -251,33 +240,33 @@ kbd {
|
||||||
--card-background-color: var(--background-color);
|
--card-background-color: var(--background-color);
|
||||||
--card-border-color: var(--muted-border-color);
|
--card-border-color: var(--muted-border-color);
|
||||||
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fafbfc;
|
--card-sectionning-background-color: #fbfbfc;
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: .5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--tooltip-color: var(--contrast-inverse);
|
||||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
:root:not([data-theme="light"]) {
|
:root:not([data-theme=light]) {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--background-color: #11191f;
|
--background-color: #11191f;
|
||||||
--color: #bbc6ce;
|
--color: #bbc6ce;
|
||||||
--h1-color: #edf0f3;
|
--h1-color: #edf0f3;
|
||||||
--h2-color: #e1e6ea;
|
--h2-color: #e1e6eb;
|
||||||
--h3-color: #d5dce2;
|
--h3-color: #d5dce2;
|
||||||
--h4-color: #c8d1d8;
|
--h4-color: #c8d1d8;
|
||||||
--h5-color: #bbc6ce;
|
--h5-color: #bbc6ce;
|
||||||
--h6-color: #aebbc3;
|
--h6-color: #afbbc4;
|
||||||
--muted-color: #73828c;
|
--muted-color: #73828c;
|
||||||
--muted-border-color: #1f2d38;
|
--muted-border-color: #1f2d38;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
|
|
@ -292,7 +281,7 @@ kbd {
|
||||||
--contrast-hover: #FFF;
|
--contrast-hover: #FFF;
|
||||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
--contrast-inverse: #000;
|
--contrast-inverse: #000;
|
||||||
--mark-background-color: #d0c284;
|
--mark-background-color: #d1c284;
|
||||||
--mark-color: #11191f;
|
--mark-color: #11191f;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388E3C;
|
||||||
--del-color: #C62828;
|
--del-color: #C62828;
|
||||||
|
|
@ -317,7 +306,7 @@ kbd {
|
||||||
--switch-background-color: #374956;
|
--switch-background-color: #374956;
|
||||||
--switch-color: var(--primary-inverse);
|
--switch-color: var(--primary-inverse);
|
||||||
--switch-checked-background-color: var(--primary);
|
--switch-checked-background-color: var(--primary);
|
||||||
--range-border-color: #23333e;
|
--range-border-color: #24333e;
|
||||||
--range-active-border-color: #2c3d49;
|
--range-active-border-color: #2c3d49;
|
||||||
--range-thumb-border-color: var(--background-color);
|
--range-thumb-border-color: var(--background-color);
|
||||||
--range-thumb-color: var(--secondary);
|
--range-thumb-color: var(--secondary);
|
||||||
|
|
@ -325,7 +314,7 @@ kbd {
|
||||||
--range-thumb-active-color: var(--primary);
|
--range-thumb-active-color: var(--primary);
|
||||||
--table-border-color: var(--muted-border-color);
|
--table-border-color: var(--muted-border-color);
|
||||||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||||
--code-background-color: #17232c;
|
--code-background-color: #18232c;
|
||||||
--code-color: var(--muted-color);
|
--code-color: var(--muted-color);
|
||||||
--code-kbd-background-color: var(--contrast);
|
--code-kbd-background-color: var(--contrast);
|
||||||
--code-kbd-color: var(--contrast-inverse);
|
--code-kbd-color: var(--contrast-inverse);
|
||||||
|
|
@ -337,36 +326,35 @@ kbd {
|
||||||
--accordion-active-summary-color: var(--primary);
|
--accordion-active-summary-color: var(--primary);
|
||||||
--accordion-close-summary-color: var(--color);
|
--accordion-close-summary-color: var(--color);
|
||||||
--accordion-open-summary-color: var(--muted-color);
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
--card-background-color: #141e25;
|
--card-background-color: #141e26;
|
||||||
--card-border-color: #11191f;
|
--card-border-color: #11191f;
|
||||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #17232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
--progress-background-color: #23333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: .5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--tooltip-color: var(--contrast-inverse);
|
||||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
[data-theme=dark] {
|
||||||
[data-theme="dark"] {
|
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--background-color: #11191f;
|
--background-color: #11191f;
|
||||||
--color: #bbc6ce;
|
--color: #bbc6ce;
|
||||||
--h1-color: #edf0f3;
|
--h1-color: #edf0f3;
|
||||||
--h2-color: #e1e6ea;
|
--h2-color: #e1e6eb;
|
||||||
--h3-color: #d5dce2;
|
--h3-color: #d5dce2;
|
||||||
--h4-color: #c8d1d8;
|
--h4-color: #c8d1d8;
|
||||||
--h5-color: #bbc6ce;
|
--h5-color: #bbc6ce;
|
||||||
--h6-color: #aebbc3;
|
--h6-color: #afbbc4;
|
||||||
--muted-color: #73828c;
|
--muted-color: #73828c;
|
||||||
--muted-border-color: #1f2d38;
|
--muted-border-color: #1f2d38;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
|
|
@ -381,7 +369,7 @@ kbd {
|
||||||
--contrast-hover: #FFF;
|
--contrast-hover: #FFF;
|
||||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
--contrast-inverse: #000;
|
--contrast-inverse: #000;
|
||||||
--mark-background-color: #d0c284;
|
--mark-background-color: #d1c284;
|
||||||
--mark-color: #11191f;
|
--mark-color: #11191f;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388E3C;
|
||||||
--del-color: #C62828;
|
--del-color: #C62828;
|
||||||
|
|
@ -406,7 +394,7 @@ kbd {
|
||||||
--switch-background-color: #374956;
|
--switch-background-color: #374956;
|
||||||
--switch-color: var(--primary-inverse);
|
--switch-color: var(--primary-inverse);
|
||||||
--switch-checked-background-color: var(--primary);
|
--switch-checked-background-color: var(--primary);
|
||||||
--range-border-color: #23333e;
|
--range-border-color: #24333e;
|
||||||
--range-active-border-color: #2c3d49;
|
--range-active-border-color: #2c3d49;
|
||||||
--range-thumb-border-color: var(--background-color);
|
--range-thumb-border-color: var(--background-color);
|
||||||
--range-thumb-color: var(--secondary);
|
--range-thumb-color: var(--secondary);
|
||||||
|
|
@ -414,7 +402,7 @@ kbd {
|
||||||
--range-thumb-active-color: var(--primary);
|
--range-thumb-active-color: var(--primary);
|
||||||
--table-border-color: var(--muted-border-color);
|
--table-border-color: var(--muted-border-color);
|
||||||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||||
--code-background-color: #17232c;
|
--code-background-color: #18232c;
|
||||||
--code-color: var(--muted-color);
|
--code-color: var(--muted-color);
|
||||||
--code-kbd-background-color: var(--contrast);
|
--code-kbd-background-color: var(--contrast);
|
||||||
--code-kbd-color: var(--contrast-inverse);
|
--code-kbd-color: var(--contrast-inverse);
|
||||||
|
|
@ -426,21 +414,21 @@ kbd {
|
||||||
--accordion-active-summary-color: var(--primary);
|
--accordion-active-summary-color: var(--primary);
|
||||||
--accordion-close-summary-color: var(--color);
|
--accordion-close-summary-color: var(--color);
|
||||||
--accordion-open-summary-color: var(--muted-color);
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
--card-background-color: #141e25;
|
--card-background-color: #141e26;
|
||||||
--card-border-color: #11191f;
|
--card-border-color: #11191f;
|
||||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #17232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
--progress-background-color: #23333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: .5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--tooltip-color: var(--contrast-inverse);
|
||||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
|
||||||
2
css/themes/default.min.css
vendored
2
css/themes/default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -5,13 +5,13 @@
|
||||||
* Theme: Additions for docs
|
* Theme: Additions for docs
|
||||||
*/
|
*/
|
||||||
:root {
|
:root {
|
||||||
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||||
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme=light],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme=dark]) {
|
||||||
--invalid-color: #C62828;
|
--invalid-color: #C62828;
|
||||||
--valid-color: #388E3C;
|
--valid-color: #388E3C;
|
||||||
--nav-background-color: rgba(255, 255, 255, 0.7);
|
--nav-background-color: rgba(255, 255, 255, 0.7);
|
||||||
|
|
@ -20,21 +20,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
:root:not([data-theme="light"]) {
|
:root:not([data-theme=light]) {
|
||||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||||
--valid-color: rgba(46, 125, 50, 0.5);
|
--valid-color: rgba(46, 125, 50, 0.5);
|
||||||
--nav-background-color: rgba(16, 24, 30, 0.8);
|
--nav-background-color: rgba(16, 24, 30, 0.8);
|
||||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||||
--nav-logo-color: #0d1419;
|
--nav-logo-color: #0e1419;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
[data-theme=dark] {
|
||||||
[data-theme="dark"] {
|
|
||||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||||
--valid-color: rgba(46, 125, 50, 0.5);
|
--valid-color: rgba(46, 125, 50, 0.5);
|
||||||
--nav-background: rgba(16, 24, 30, 0.8);
|
--nav-background: rgba(16, 24, 30, 0.8);
|
||||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||||
--nav-logo-color: #0d1419;
|
--nav-logo-color: #0e1419;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -50,7 +49,6 @@ html {
|
||||||
body > main {
|
body > main {
|
||||||
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
|
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
body > main {
|
body > main {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||||
|
|
@ -59,62 +57,56 @@ body > main {
|
||||||
grid-template-columns: 200px auto;
|
grid-template-columns: 200px auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
body > main {
|
body > main {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body > main > aside,
|
body > main > aside,
|
||||||
body > main div[role="document"] {
|
body > main div[role=document] {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
display: block;
|
display: block;
|
||||||
height: calc(2rem + 3.5rem - .5rem);
|
height: calc(2rem + 3.5rem - .5rem);
|
||||||
margin-top: calc(-2rem - 3.5rem + .5rem);
|
margin-top: calc(-2rem - 3.5rem + .5rem);
|
||||||
content: '';
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
height: calc(2.5rem + 3.5rem - .5rem);
|
height: calc(2.5rem + 3.5rem - .5rem);
|
||||||
height: calc(-2.5rem - 3.5rem + .5rem);
|
height: calc(-2.5rem - 3.5rem + .5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
height: calc(3rem + 3.5rem - .5rem);
|
height: calc(3rem + 3.5rem - .5rem);
|
||||||
margin-top: calc(-3rem - 3.5rem + .5rem);
|
margin-top: calc(-3rem - 3.5rem + .5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
height: calc(3.5rem + 3.5rem - .5rem);
|
height: calc(3.5rem + 3.5rem - .5rem);
|
||||||
margin-top: calc(-3.5rem - 3.5rem + .5rem);
|
margin-top: calc(-3.5rem - 3.5rem + .5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
height: calc(4rem + 3.5rem - .5rem);
|
height: calc(4rem + 3.5rem - .5rem);
|
||||||
margin-top: calc(-4rem - 3.5rem + .5rem);
|
margin-top: calc(-4rem - 3.5rem + .5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-image: var(--icon-external);
|
background-image: var(--icon-external);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: 0.66rem auto;
|
||||||
content: '';
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
@ -128,11 +120,9 @@ main > aside nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(--block-spacing-vertical);
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside nav h1 {
|
main > aside nav h1 {
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
main > aside nav {
|
main > aside nav {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -146,47 +136,38 @@ main > aside nav h1 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside li, main > aside summary {
|
main > aside li, main > aside summary {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside li a {
|
main > aside li a {
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside li a svg {
|
main > aside li a svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside a.secondary:focus {
|
main > aside a.secondary:focus {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--primary-hover);
|
color: var(--primary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside a.active,
|
main > aside a.active,
|
||||||
main > aside a.active:hover {
|
main > aside a.active:hover {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside details {
|
main > aside details {
|
||||||
padding-bottom: .25rem;
|
padding-bottom: 0.25rem;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside details summary {
|
main > aside details summary {
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside details summary::after {
|
main > aside details summary::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside details[open] > summary:not(:focus) {
|
main > aside details[open] > summary:not(:focus) {
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
}
|
}
|
||||||
|
|
@ -205,7 +186,6 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
#customization figure {
|
#customization figure {
|
||||||
grid-template-columns: repeat(18, 1fr);
|
grid-template-columns: repeat(18, 1fr);
|
||||||
|
|
@ -214,13 +194,11 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
border-top-left-radius: var(--border-radius);
|
border-top-left-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure ~ article {
|
#customization figure ~ article {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure button {
|
#customization figure button {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -228,57 +206,48 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure button:focus {
|
#customization figure button:focus {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure button.picked {
|
#customization figure button.picked {
|
||||||
background-image: var(--icon-check);
|
background-image: var(--icon-check);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: 0.66rem auto;
|
||||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {
|
||||||
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
|
|
||||||
background-image: var(--icon-check-dark);
|
background-image: var(--icon-check-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization h4 {
|
#customization h4 {
|
||||||
transition: color var(--transition);
|
transition: color var(--transition);
|
||||||
}
|
}
|
||||||
|
#customization pre[data-theme=generated] {
|
||||||
#customization pre[data-theme="generated"] {
|
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids {
|
#grids {
|
||||||
--grid-spacing-vertical: 1rem;
|
--grid-spacing-vertical: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids button {
|
#grids button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
#grids button {
|
#grids button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids button svg {
|
#grids button svg {
|
||||||
stroke: var(--secondary);
|
stroke: var(--secondary);
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
border: 2px solid currentColor;
|
border: 2px solid currentColor;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids .grid > * {
|
#grids .grid > * {
|
||||||
padding: calc(var(--spacing) / 2) 0;
|
padding: calc(var(--spacing) / 2) 0;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -286,11 +255,9 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
font-size: 87.5%;
|
font-size: 87.5%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids details {
|
#grids details {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids details svg {
|
#grids details svg {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
@ -327,46 +294,43 @@ section > pre {
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="invalid"],
|
[data-theme=invalid],
|
||||||
[data-theme="valid"] {
|
[data-theme=valid] {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
[data-theme=invalid]:before,
|
||||||
[data-theme="invalid"]:before,
|
[data-theme=valid]:before {
|
||||||
[data-theme="valid"]:before {
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: .375rem .75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: var(--primary-inverse);
|
color: var(--primary-inverse);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
[data-theme="invalid"]:before,
|
[data-theme=invalid]:before,
|
||||||
[data-theme="valid"]:before {
|
[data-theme=valid]:before {
|
||||||
top: var(--spacing);
|
top: var(--spacing);
|
||||||
right: var(--spacing);
|
right: var(--spacing);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
[data-theme=invalid] code,
|
||||||
[data-theme="invalid"] code,
|
[data-theme=valid] code {
|
||||||
[data-theme="valid"] code {
|
|
||||||
padding: calc(var(--spacing) * 1.625) 0;
|
padding: calc(var(--spacing) * 1.625) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="invalid"]:before {
|
[data-theme=invalid]:before {
|
||||||
background: var(--invalid-color);
|
background: var(--invalid-color);
|
||||||
content: 'Not so great';
|
content: "Not so great";
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="valid"]:before {
|
[data-theme=valid]:before {
|
||||||
background: var(--valid-color);
|
background: var(--valid-color);
|
||||||
content: 'Great';
|
content: "Great";
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -383,15 +347,12 @@ body > nav {
|
||||||
background-color: var(--nav-background-color);
|
background-color: var(--nav-background-color);
|
||||||
box-shadow: 0px 1px 0 var(--nav-border-color);
|
box-shadow: 0px 1px 0 var(--nav-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav a {
|
body > nav a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav svg {
|
body > nav svg {
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav ul:first-of-type li:first-of-type a {
|
body > nav ul:first-of-type li:first-of-type a {
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
|
|
@ -400,17 +361,14 @@ body > nav ul:first-of-type li:first-of-type a {
|
||||||
background: var(--h1-color);
|
background: var(--h1-color);
|
||||||
color: var(--nav-logo-color);
|
color: var(--nav-logo-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav ul:first-of-type li:first-of-type a svg {
|
body > nav ul:first-of-type li:first-of-type a svg {
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
display: none;
|
display: none;
|
||||||
margin-left: var(--spacing);
|
margin-left: var(--spacing);
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
@ -426,13 +384,12 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
bottom: var(--spacing);
|
bottom: var(--spacing);
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: .75rem;
|
padding: 0.75rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher::after {
|
.switcher::after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
|
|
@ -441,39 +398,33 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
content: '';
|
content: "";
|
||||||
transition: transform var(--transition);
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher i {
|
.switcher i {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 0;
|
max-width: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: .875rem;
|
font-size: 0.875rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:hover, .switcher:focus {
|
.switcher:hover, .switcher:focus {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:hover::after {
|
.switcher:hover::after {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:hover i {
|
.switcher:hover i {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||||
transition: max-width var(--transition), padding var(--transition);
|
transition: max-width var(--transition), padding var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:focus {
|
.switcher:focus {
|
||||||
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.switcher {
|
.switcher {
|
||||||
right: var(--spacing);
|
right: var(--spacing);
|
||||||
|
|
|
||||||
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1257,6 +1257,7 @@
|
||||||
</main><!-- ./ Main -->
|
</main><!-- ./ Main -->
|
||||||
|
|
||||||
<!-- JavaScript -->
|
<!-- JavaScript -->
|
||||||
|
<script src="//unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
|
||||||
<script src="js/pico.docs.min.js"></script>
|
<script src="js/pico.docs.min.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Imports
|
// Imports
|
||||||
import * as mostVisible from './src/most-visible.min.js';
|
|
||||||
import { aside } from './src/aside.js';
|
import { aside } from './src/aside.js';
|
||||||
import { themeSwitcher } from './src/theme-switcher.js';
|
import { themeSwitcher } from './src/theme-switcher.js';
|
||||||
import { materialDesignColors } from './src/material-design-colors.js';
|
import { materialDesignColors } from './src/material-design-colors.js';
|
||||||
|
|
@ -33,4 +32,4 @@ colorPicker.init();
|
||||||
grid.init();
|
grid.init();
|
||||||
|
|
||||||
// Scrollspy
|
// Scrollspy
|
||||||
scrollspy.init(mostVisible);
|
scrollspy.init();
|
||||||
|
|
|
||||||
2
docs/js/pico.docs.min.js
vendored
2
docs/js/pico.docs.min.js
vendored
File diff suppressed because one or more lines are too long
7
docs/js/src/most-visible.min.js
vendored
7
docs/js/src/most-visible.min.js
vendored
|
|
@ -1,7 +0,0 @@
|
||||||
/**
|
|
||||||
* Most Visible v1.5.0
|
|
||||||
*
|
|
||||||
* @author Andy Palmer <andy@andypalmer.me>
|
|
||||||
* @license MIT
|
|
||||||
*/
|
|
||||||
!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof module&&module.exports?module.exports=t(e):e.mostVisible=t(e)}("undefined"!=typeof self?self:this,function(e){"use strict";function i(e,t){if(!(this instanceof i))return new i(e,t).getMostVisible();"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=e,this.options=function(e){for(var t=1;t<arguments.length;t++)for(var i in arguments[t])e[i]=arguments[t][i];return e}({},i.defaults,t)}return i.defaults={percentage:!1,offset:0},i.prototype={getMostVisible:function(){var n=this,o=document.documentElement.clientHeight;return Array.prototype.reduce.call(this.elements,function(e,t){var i=n.getVisibleHeight(t,o);return i>e[0]?[i,t]:e},[0,null])[1]},getVisibleHeight:function(e,t){var i=e.getBoundingClientRect(),n=i.top-this.options.offset,o=i.bottom-this.options.offset,s=i.bottom-i.top,r=0<=n&&n<t,f=0<o&&o<t,u=0;if(r&&f)u=s;else if(r)u=t-i.top;else if(f)u=o;else if(t<s&&n<0){var l=Math.abs(n);l<s&&(u=s-l)}return this.options.percentage?u/s*100:u}},i.makeJQueryPlugin=function(e){e&&(e.fn.mostVisible=function(e){var t=new i(this.get(),e);return this.filter(t.getMostVisible())})},i.makeJQueryPlugin(e.jQuery),i});
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
export const scrollspy = {
|
export const scrollspy = {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
mostVisible: null,
|
|
||||||
minWidth: '992px',
|
minWidth: '992px',
|
||||||
interval: 75,
|
interval: 75,
|
||||||
targets: {
|
targets: {
|
||||||
|
|
@ -22,10 +21,7 @@ export const scrollspy = {
|
||||||
|
|
||||||
|
|
||||||
// Init
|
// Init
|
||||||
init(mostVisible) {
|
init() {
|
||||||
if (this.mostVisible == null) {
|
|
||||||
this.mostVisible = mostVisible;
|
|
||||||
}
|
|
||||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
||||||
this.setActiveNav();
|
this.setActiveNav();
|
||||||
this.scrollStop();
|
this.scrollStop();
|
||||||
|
|
@ -37,7 +33,7 @@ export const scrollspy = {
|
||||||
setActiveNav() {
|
setActiveNav() {
|
||||||
|
|
||||||
// Get active section
|
// Get active section
|
||||||
let currentSection = this.mostVisible(this.targets.sections).getAttribute('id');
|
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
|
||||||
|
|
||||||
// Remove all active states
|
// Remove all active states
|
||||||
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
|
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
|
||||||
|
|
|
||||||
12028
package-lock.json
generated
Normal file
12028
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
30
package.json
30
package.json
|
|
@ -25,5 +25,35 @@
|
||||||
],
|
],
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/picocss/pico/issues"
|
"url": "https://github.com/picocss/pico/issues"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"css:compile": "sass --style expanded --no-source-map --no-error-css scss/:css/",
|
||||||
|
"css:compile:docs": "sass --style expanded --no-source-map --no-error-css docs/scss/:docs/css/",
|
||||||
|
"css:prefix": "postcss css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css --use autoprefixer --no-map --replace",
|
||||||
|
"css:minify": "cleancss -O1 --batch --batch-suffix '.min' css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
|
||||||
|
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife",
|
||||||
|
"js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env",
|
||||||
|
"js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js",
|
||||||
|
"build:css": "npm-run-all css:compile css:compile:docs css:prefix css:minify",
|
||||||
|
"build:js": "npm-run-all js:bundle js:babel js:minify",
|
||||||
|
"build": "npm-run-all build:css build:js",
|
||||||
|
"watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'",
|
||||||
|
"watch:scss:docs": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:css'",
|
||||||
|
"watch:js:docs": "nodemon --watch docs/js/ --ext js --ignore 'docs/js/pico.docs.min.js' --exec 'npm run build:js'",
|
||||||
|
"watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/cli": "^7.15.4",
|
||||||
|
"@babel/core": "^7.15.5",
|
||||||
|
"@babel/preset-env": "^7.15.6",
|
||||||
|
"autoprefixer": "^10.3.4",
|
||||||
|
"clean-css-cli": "^5.3.3",
|
||||||
|
"nodemon": "^2.0.12",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"postcss": "^8.3.6",
|
||||||
|
"postcss-cli": "^8.3.1",
|
||||||
|
"rollup": "^2.56.3",
|
||||||
|
"sass": "^1.39.0",
|
||||||
|
"uglify-js": "^3.14.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ article {
|
||||||
> pre {
|
> pre {
|
||||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||||
padding: calc(math.div(var(--block-spacing-vertical), 1.5)) var(--block-spacing-horizontal);
|
padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
|
||||||
background-color: var(--card-sectionning-background-color);
|
background-color: var(--card-sectionning-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue