mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
Improvements
- Edit code colors and add a color for comments - Add ::selection - Small edits for cards: last-child and overflow - Add card-sectioning (header, footer, pre) - Change global hue for Primary color - Remove border for pre - Add querySelectorAll() for theme-switcher.js - Update docs
This commit is contained in:
Lucas
parent
c3f9d8d8c8
commit
85e21d35de
23 changed files with 937 additions and 422 deletions
|
|
@ -9,35 +9,37 @@
|
|||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--background: #FFF;
|
||||
--text: #415762;
|
||||
--h1: #1b2a32;
|
||||
--h2: #2c4049;
|
||||
--h3: #415762;
|
||||
--h4: #596e78;
|
||||
--h5: #73848c;
|
||||
--h6: #8a9ba3;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--text: #415462;
|
||||
--h1: #1b2832;
|
||||
--h2: #2c3d49;
|
||||
--h3: #415462;
|
||||
--h4: #596b78;
|
||||
--h5: #73828c;
|
||||
--h6: #8a99a3;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #08769b;
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--input-background: #FFF;
|
||||
--input-border: #c8d2d8;
|
||||
--input-border: #c8d1d8;
|
||||
--valid: #288a6a;
|
||||
--invalid: #b94646;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #2c4049;
|
||||
--muted-text: #7e8f98;
|
||||
--muted-background: #edf1f3;
|
||||
--muted-border: #edf1f3;
|
||||
--mark-text: #2c3d49;
|
||||
--muted-text: #7e8d98;
|
||||
--muted-background: #edf0f3;
|
||||
--muted-border: #edf0f3;
|
||||
--card-background: #FFF;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
|
||||
--card-sections: #f3f5f7;
|
||||
--card-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);
|
||||
--code-background: #f3f5f7;
|
||||
--code-border: #d5dde2;
|
||||
--code-inlined: #edf1f3;
|
||||
--code-color-1: #9f6060;
|
||||
--code-color-2: #2f7ca2;
|
||||
--table-border: rgba(237, 241, 243, 0.75);
|
||||
--table-stripping: rgba(27, 42, 50, 0.033);
|
||||
--code-inlined: #edf0f3;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #478085;
|
||||
--code-color-4: #998866;
|
||||
--code-color-5: #96a4ae;
|
||||
--table-border: rgba(237, 240, 243, 0.75);
|
||||
--table-stripping: rgba(27, 40, 50, 0.02);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -46,36 +48,39 @@
|
|||
*/
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--background: #10191e;
|
||||
--text: #a2b1b9;
|
||||
--h1: #edf1f3;
|
||||
--h2: #d5dde2;
|
||||
--h3: #bbc7ce;
|
||||
--h4: #a2b1b9;
|
||||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--input-background: #10191e;
|
||||
--input-border: #374b56;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73848c;
|
||||
--muted-background: #10191e;
|
||||
--muted-border: #23353e;
|
||||
--card-background: #17242b;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #10181e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-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.09);
|
||||
--code-background: #141f24;
|
||||
--code-border: #23353e;
|
||||
--code-inlined: rgba(65, 87, 98, 0.25);
|
||||
--code-color-1: #ac5353;
|
||||
--code-color-2: #4d91b3;
|
||||
--table-border: #10191e;
|
||||
--table-stripping: rgba(237, 241, 243, 0.033);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: #10181e;
|
||||
--table-stripping: rgba(237, 240, 243, 0.02);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,36 +89,39 @@
|
|||
* Enabled if forced with data-theme="dark"
|
||||
*/
|
||||
[data-theme="dark"] {
|
||||
--background: #10191e;
|
||||
--text: #a2b1b9;
|
||||
--h1: #edf1f3;
|
||||
--h2: #d5dde2;
|
||||
--h3: #bbc7ce;
|
||||
--h4: #a2b1b9;
|
||||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--input-background: #10191e;
|
||||
--input-border: #374b56;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73848c;
|
||||
--muted-background: #10191e;
|
||||
--muted-border: #23353e;
|
||||
--card-background: #17242b;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #10181e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-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.09);
|
||||
--code-background: #141f24;
|
||||
--code-border: #23353e;
|
||||
--code-inlined: rgba(65, 87, 98, 0.25);
|
||||
--code-color-1: #ac5353;
|
||||
--code-color-2: #4d91b3;
|
||||
--table-border: #10191e;
|
||||
--table-stripping: rgba(237, 241, 243, 0.033);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: #10181e;
|
||||
--table-stripping: rgba(237, 240, 243, 0.02);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -526,6 +534,10 @@ del {
|
|||
color: var(--invalid);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
|
@ -948,7 +960,7 @@ pre,
|
|||
code,
|
||||
kbd {
|
||||
background: var(--code-inlined);
|
||||
color: var(--muted-text);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
|
|
@ -999,7 +1011,6 @@ pre {
|
|||
margin-left: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
overflow-x: auto;
|
||||
border-left: 0.25rem solid var(--code-border);
|
||||
background: var(--code-background);
|
||||
}
|
||||
|
||||
|
|
@ -1019,20 +1030,25 @@ pre > code {
|
|||
}
|
||||
|
||||
code b {
|
||||
color: var(--code-color-1);
|
||||
color: var(--code-color-2);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
code i {
|
||||
color: var(--code-color-2);
|
||||
color: var(--code-color-3);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code u {
|
||||
color: var(--text);
|
||||
color: var(--code-color-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code em {
|
||||
color: var(--code-color-5);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
|
|
@ -1131,6 +1147,7 @@ article {
|
|||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
overflow: hidden;
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
|
@ -1164,6 +1181,132 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
article > *:not(footer):not(pre):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card sectionning (<article> > header, footer|pre)
|
||||
*/
|
||||
article > header,
|
||||
article > footer {
|
||||
background-color: var(--card-sections);
|
||||
}
|
||||
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -2.5rem;
|
||||
padding: 2rem 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -3.5rem;
|
||||
padding: 2rem 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -4rem;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
article > header {
|
||||
margin-top: -2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > header {
|
||||
margin-top: -2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > header {
|
||||
margin-top: -3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > header {
|
||||
margin-top: -3.5rem;
|
||||
margin-bottom: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > header {
|
||||
margin-top: -4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: -2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: -2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: -3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Nav
|
||||
*/
|
||||
|
|
|
|||
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
329
css/pico.css
329
css/pico.css
|
|
@ -9,44 +9,46 @@
|
|||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--background: #FFF;
|
||||
--text: #415762;
|
||||
--h1: #1b2a32;
|
||||
--h2: #2c4049;
|
||||
--h3: #415762;
|
||||
--h4: #596e78;
|
||||
--h5: #73848c;
|
||||
--h6: #8a9ba3;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--text: #415462;
|
||||
--h1: #1b2832;
|
||||
--h2: #2c3d49;
|
||||
--h3: #415462;
|
||||
--h4: #596b78;
|
||||
--h5: #73828c;
|
||||
--h6: #8a99a3;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #08769b;
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #73848c;
|
||||
--secondary-hover: #415762;
|
||||
--secondary-focus: rgba(115, 132, 140, 0.125);
|
||||
--secondary: #73828c;
|
||||
--secondary-hover: #415462;
|
||||
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #2c4049;
|
||||
--contrast-hover: #0d1519;
|
||||
--contrast-focus: rgba(115, 132, 140, 0.125);
|
||||
--contrast: #2c3d49;
|
||||
--contrast-hover: #0d1419;
|
||||
--contrast-focus: rgba(115, 130, 140, 0.125);
|
||||
--contrast-border: rgba(255, 223, 128, 0.5);
|
||||
--contrast-inverse: #FFF;
|
||||
--input-background: #FFF;
|
||||
--input-border: #c8d2d8;
|
||||
--input-border: #c8d1d8;
|
||||
--valid: #288a6a;
|
||||
--invalid: #b94646;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #2c4049;
|
||||
--muted-text: #7e8f98;
|
||||
--muted-background: #edf1f3;
|
||||
--muted-border: #edf1f3;
|
||||
--mark-text: #2c3d49;
|
||||
--muted-text: #7e8d98;
|
||||
--muted-background: #edf0f3;
|
||||
--muted-border: #edf0f3;
|
||||
--card-background: #FFF;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
|
||||
--card-sections: #f3f5f7;
|
||||
--card-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);
|
||||
--code-background: #f3f5f7;
|
||||
--code-border: #d5dde2;
|
||||
--code-inlined: #edf1f3;
|
||||
--code-color-1: #9f6060;
|
||||
--code-color-2: #2f7ca2;
|
||||
--table-border: rgba(237, 241, 243, 0.75);
|
||||
--table-stripping: rgba(27, 42, 50, 0.033);
|
||||
--code-inlined: #edf0f3;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #478085;
|
||||
--code-color-4: #998866;
|
||||
--code-color-5: #96a4ae;
|
||||
--table-border: rgba(237, 240, 243, 0.75);
|
||||
--table-stripping: rgba(27, 40, 50, 0.02);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -55,45 +57,48 @@
|
|||
*/
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--background: #10191e;
|
||||
--text: #a2b1b9;
|
||||
--h1: #edf1f3;
|
||||
--h2: #d5dde2;
|
||||
--h3: #bbc7ce;
|
||||
--h4: #a2b1b9;
|
||||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596e78;
|
||||
--secondary-hover: #73848c;
|
||||
--secondary-focus: rgba(89, 110, 120, 0.25);
|
||||
--secondary: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dde2;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-focus: rgba(89, 110, 120, 0.25);
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-border: rgba(255, 223, 128, 0.33);
|
||||
--contrast-inverse: #10191e;
|
||||
--input-background: #10191e;
|
||||
--input-border: #374b56;
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73848c;
|
||||
--muted-background: #10191e;
|
||||
--muted-border: #23353e;
|
||||
--card-background: #17242b;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #10181e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-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.09);
|
||||
--code-background: #141f24;
|
||||
--code-border: #23353e;
|
||||
--code-inlined: rgba(65, 87, 98, 0.25);
|
||||
--code-color-1: #ac5353;
|
||||
--code-color-2: #4d91b3;
|
||||
--table-border: #10191e;
|
||||
--table-stripping: rgba(237, 241, 243, 0.033);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: #10181e;
|
||||
--table-stripping: rgba(237, 240, 243, 0.02);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -102,45 +107,48 @@
|
|||
* Enabled if forced with data-theme="dark"
|
||||
*/
|
||||
[data-theme="dark"] {
|
||||
--background: #10191e;
|
||||
--text: #a2b1b9;
|
||||
--h1: #edf1f3;
|
||||
--h2: #d5dde2;
|
||||
--h3: #bbc7ce;
|
||||
--h4: #a2b1b9;
|
||||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596e78;
|
||||
--secondary-hover: #73848c;
|
||||
--secondary-focus: rgba(89, 110, 120, 0.25);
|
||||
--secondary: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dde2;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-focus: rgba(89, 110, 120, 0.25);
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-border: rgba(255, 223, 128, 0.33);
|
||||
--contrast-inverse: #10191e;
|
||||
--input-background: #10191e;
|
||||
--input-border: #374b56;
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73848c;
|
||||
--muted-background: #10191e;
|
||||
--muted-border: #23353e;
|
||||
--card-background: #17242b;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #10181e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-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.09);
|
||||
--code-background: #141f24;
|
||||
--code-border: #23353e;
|
||||
--code-inlined: rgba(65, 87, 98, 0.25);
|
||||
--code-color-1: #ac5353;
|
||||
--code-color-2: #4d91b3;
|
||||
--table-border: #10191e;
|
||||
--table-stripping: rgba(237, 241, 243, 0.033);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: #10181e;
|
||||
--table-stripping: rgba(237, 240, 243, 0.02);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -634,6 +642,10 @@ del {
|
|||
color: var(--invalid);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
|
@ -1198,7 +1210,7 @@ pre,
|
|||
code,
|
||||
kbd {
|
||||
background: var(--code-inlined);
|
||||
color: var(--muted-text);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
|
|
@ -1249,7 +1261,6 @@ pre {
|
|||
margin-left: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
overflow-x: auto;
|
||||
border-left: 0.25rem solid var(--code-border);
|
||||
background: var(--code-background);
|
||||
}
|
||||
|
||||
|
|
@ -1269,20 +1280,25 @@ pre > code {
|
|||
}
|
||||
|
||||
code b {
|
||||
color: var(--code-color-1);
|
||||
color: var(--code-color-2);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
code i {
|
||||
color: var(--code-color-2);
|
||||
color: var(--code-color-3);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code u {
|
||||
color: var(--text);
|
||||
color: var(--code-color-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code em {
|
||||
color: var(--code-color-5);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
|
|
@ -1381,6 +1397,7 @@ article {
|
|||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
overflow: hidden;
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
|
@ -1414,6 +1431,132 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
article > *:not(footer):not(pre):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card sectionning (<article> > header, footer|pre)
|
||||
*/
|
||||
article > header,
|
||||
article > footer {
|
||||
background-color: var(--card-sections);
|
||||
}
|
||||
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -2.5rem;
|
||||
padding: 2rem 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -3.5rem;
|
||||
padding: 2rem 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -4rem;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
article > header {
|
||||
margin-top: -2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > header {
|
||||
margin-top: -2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > header {
|
||||
margin-top: -3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > header {
|
||||
margin-top: -3.5rem;
|
||||
margin-bottom: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > header {
|
||||
margin-top: -4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: -2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: -2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: -3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Nav
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -9,35 +9,37 @@
|
|||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--background: #FFF;
|
||||
--text: #415762;
|
||||
--h1: #1b2a32;
|
||||
--h2: #2c4049;
|
||||
--h3: #415762;
|
||||
--h4: #596e78;
|
||||
--h5: #73848c;
|
||||
--h6: #8a9ba3;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #086a9b;
|
||||
--primary-focus: rgba(16, 134, 193, 0.125);
|
||||
--text: #415462;
|
||||
--h1: #1b2832;
|
||||
--h2: #2c3d49;
|
||||
--h3: #415462;
|
||||
--h4: #596b78;
|
||||
--h5: #73828c;
|
||||
--h6: #8a99a3;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #08769b;
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--input-background: #FFF;
|
||||
--input-border: #c8d2d8;
|
||||
--input-border: #c8d1d8;
|
||||
--valid: #288a6a;
|
||||
--invalid: #b94646;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #2c4049;
|
||||
--muted-text: #7e8f98;
|
||||
--muted-background: #edf1f3;
|
||||
--muted-border: #edf1f3;
|
||||
--mark-text: #2c3d49;
|
||||
--muted-text: #7e8d98;
|
||||
--muted-background: #edf0f3;
|
||||
--muted-border: #edf0f3;
|
||||
--card-background: #FFF;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
|
||||
--card-sections: #f3f5f7;
|
||||
--card-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);
|
||||
--code-background: #f3f5f7;
|
||||
--code-border: #d5dde2;
|
||||
--code-inlined: #edf1f3;
|
||||
--code-color-1: #9f6060;
|
||||
--code-color-2: #2f7ca2;
|
||||
--table-border: rgba(237, 241, 243, 0.75);
|
||||
--table-stripping: rgba(27, 42, 50, 0.033);
|
||||
--code-inlined: #edf0f3;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #478085;
|
||||
--code-color-4: #998866;
|
||||
--code-color-5: #96a4ae;
|
||||
--table-border: rgba(237, 240, 243, 0.75);
|
||||
--table-stripping: rgba(27, 40, 50, 0.02);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -46,36 +48,39 @@
|
|||
*/
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--background: #10191e;
|
||||
--text: #a2b1b9;
|
||||
--h1: #edf1f3;
|
||||
--h2: #d5dde2;
|
||||
--h3: #bbc7ce;
|
||||
--h4: #a2b1b9;
|
||||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--input-background: #10191e;
|
||||
--input-border: #374b56;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73848c;
|
||||
--muted-background: #10191e;
|
||||
--muted-border: #23353e;
|
||||
--card-background: #17242b;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #10181e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-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.09);
|
||||
--code-background: #141f24;
|
||||
--code-border: #23353e;
|
||||
--code-inlined: rgba(65, 87, 98, 0.25);
|
||||
--code-color-1: #ac5353;
|
||||
--code-color-2: #4d91b3;
|
||||
--table-border: #10191e;
|
||||
--table-stripping: rgba(237, 241, 243, 0.033);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: #10181e;
|
||||
--table-stripping: rgba(237, 240, 243, 0.02);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,36 +89,39 @@
|
|||
* Enabled if forced with data-theme="dark"
|
||||
*/
|
||||
[data-theme="dark"] {
|
||||
--background: #10191e;
|
||||
--text: #a2b1b9;
|
||||
--h1: #edf1f3;
|
||||
--h2: #d5dde2;
|
||||
--h3: #bbc7ce;
|
||||
--h4: #a2b1b9;
|
||||
--h5: #8a9ba3;
|
||||
--h6: #73848c;
|
||||
--primary: #1086c1;
|
||||
--primary-hover: #1aa2e6;
|
||||
--primary-focus: rgba(16, 134, 193, 0.25);
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--input-background: #10191e;
|
||||
--input-border: #374b56;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73848c;
|
||||
--muted-background: #10191e;
|
||||
--muted-border: #23353e;
|
||||
--card-background: #17242b;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #10181e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-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.09);
|
||||
--code-background: #141f24;
|
||||
--code-border: #23353e;
|
||||
--code-inlined: rgba(65, 87, 98, 0.25);
|
||||
--code-color-1: #ac5353;
|
||||
--code-color-2: #4d91b3;
|
||||
--table-border: #10191e;
|
||||
--table-stripping: rgba(237, 241, 243, 0.033);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: #10181e;
|
||||
--table-stripping: rgba(237, 240, 243, 0.02);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -522,6 +530,10 @@ del {
|
|||
color: var(--invalid);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
|
@ -944,7 +956,7 @@ pre,
|
|||
code,
|
||||
kbd {
|
||||
background: var(--code-inlined);
|
||||
color: var(--muted-text);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
|
|
@ -995,7 +1007,6 @@ pre {
|
|||
margin-left: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
overflow-x: auto;
|
||||
border-left: 0.25rem solid var(--code-border);
|
||||
background: var(--code-background);
|
||||
}
|
||||
|
||||
|
|
@ -1015,20 +1026,25 @@ pre > code {
|
|||
}
|
||||
|
||||
code b {
|
||||
color: var(--code-color-1);
|
||||
color: var(--code-color-2);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
code i {
|
||||
color: var(--code-color-2);
|
||||
color: var(--code-color-3);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code u {
|
||||
color: var(--text);
|
||||
color: var(--code-color-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code em {
|
||||
color: var(--code-color-5);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
|
|
@ -1127,6 +1143,7 @@ article {
|
|||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
overflow: hidden;
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
|
@ -1160,6 +1177,132 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
article > *:not(footer):not(pre):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card sectionning (<article> > header, footer|pre)
|
||||
*/
|
||||
article > header,
|
||||
article > footer {
|
||||
background-color: var(--card-sections);
|
||||
}
|
||||
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -1rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -2.5rem;
|
||||
padding: 2rem 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -3.5rem;
|
||||
padding: 2rem 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > header,
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin: -4rem;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
article > header {
|
||||
margin-top: -2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > header {
|
||||
margin-top: -2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > header {
|
||||
margin-top: -3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > header {
|
||||
margin-top: -3.5rem;
|
||||
margin-bottom: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > header {
|
||||
margin-top: -4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: -2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: -2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: -3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article > footer,
|
||||
article > pre {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Nav
|
||||
*/
|
||||
|
|
|
|||
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
|
|
@ -8,7 +8,7 @@
|
|||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--nav-background: rgba(255, 255, 255, 0.7);
|
||||
--nav-border: rgba(115, 132, 140, 0.2);
|
||||
--nav-border: rgba(115, 130, 140, 0.2);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
*/
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--nav-background: rgba(16, 25, 30, 0.8);
|
||||
--nav-border: rgba(115, 132, 140, 0.2);
|
||||
--nav-background: rgba(16, 24, 30, 0.8);
|
||||
--nav-border: rgba(115, 130, 140, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
* Enabled if forced with data-theme="dark"
|
||||
*/
|
||||
[data-theme="dark"] {
|
||||
--nav-background: rgba(16, 25, 30, 0.8);
|
||||
--nav-border: rgba(115, 132, 140, 0.2);
|
||||
--nav-background: rgba(16, 24, 30, 0.8);
|
||||
--nav-border: rgba(115, 130, 140, 0.2);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -167,9 +167,10 @@ main > aside details {
|
|||
}
|
||||
|
||||
main > aside details summary {
|
||||
color: var(--h3);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
color: var(--h3);
|
||||
}
|
||||
|
||||
main > aside details summary::after {
|
||||
|
|
@ -370,19 +371,11 @@ a[role=button] {
|
|||
content: 'Bulky';
|
||||
}
|
||||
|
||||
[data-theme="invalid"] pre {
|
||||
border-color: var(--invalid);
|
||||
}
|
||||
|
||||
[data-theme="valid"]:before {
|
||||
background: var(--valid);
|
||||
content: 'Great';
|
||||
}
|
||||
|
||||
[data-theme="valid"] pre {
|
||||
border-color: var(--valid);
|
||||
}
|
||||
|
||||
section[title="love"] [data-theme="invalid"]:before {
|
||||
content: 'Not so great';
|
||||
}
|
||||
|
|
@ -427,46 +420,6 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Code inside <article>
|
||||
*/
|
||||
article pre {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: -2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article pre {
|
||||
padding: 2rem 2.5rem;
|
||||
margin: -2.5rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article pre {
|
||||
padding: 2rem 3rem;
|
||||
margin: -3rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article pre {
|
||||
padding: 2rem 3.5rem;
|
||||
margin: -3.5rem;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article pre {
|
||||
padding: 2rem 4rem;
|
||||
margin: -4rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Docs: Theme switcher
|
||||
*/
|
||||
|
|
|
|||
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
|
|
@ -113,7 +113,7 @@
|
|||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||
<p>Starter template:</p>
|
||||
|
||||
<pre><code><!doctype html>
|
||||
<pre><code><em><!doctype html></em>
|
||||
<<b>html</b> <i>lang</i>=<u>"en"</u>>
|
||||
<<b>head</b>>
|
||||
<<b>meta</b> <i>charset</i>=<u>"utf-8"</u>>
|
||||
|
|
@ -211,18 +211,18 @@
|
|||
|
||||
<p>SCSS:</p>
|
||||
|
||||
<pre data-theme="generated"><code>// <span class="name">Custom colors</span>
|
||||
<pre><code><em>// <span class="name">Custom colors</em></span>
|
||||
<i>$primary-500</i>: <u class="c500">...</u>;
|
||||
<i>$primary-600</i>: <u class="c600">...</u>;
|
||||
<i>$primary-700</i>: <u class="c700">...</u>;
|
||||
|
||||
// Pico library
|
||||
<em>// Pico library</em>
|
||||
<b>@import</b> <u>"path/pico"</u>;</code></pre>
|
||||
|
||||
<p>CSS:</p>
|
||||
|
||||
<pre data-theme="generated"><code>/* <span class="name"></span>Light theme (Default) */
|
||||
/* Can be forced with data-theme="light" */
|
||||
<pre><code><em>/* <span class="name"></span>Light theme (Default) */
|
||||
/* Can be forced with data-theme="light" */</em>
|
||||
<b>[data-theme=<u>"light"</u>]</b>,
|
||||
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
|
||||
<i>--primary</i>: <u class="c600">...</u>;
|
||||
|
|
@ -232,8 +232,8 @@
|
|||
}
|
||||
|
||||
|
||||
/* <span class="name"></span>Dark theme (Auto) */
|
||||
/* Automatically enabled if user has Dark mode enabled */
|
||||
<em>/* <span class="name"></span>Dark theme (Auto) */
|
||||
/* Automatically enabled if user has Dark mode enabled */</em>
|
||||
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
|
||||
<b>:root:not([data-theme="light"])</b> {
|
||||
<i>--primary</i>: <u class="c600">...</u>;
|
||||
|
|
@ -243,8 +243,8 @@
|
|||
}
|
||||
|
||||
|
||||
/* <span class="name"></span>Dark theme (Forced) */
|
||||
/* Enabled if forced with data-theme="dark" */
|
||||
<em>/* <span class="name"></span>Dark theme (Forced) */
|
||||
/* Enabled if forced with data-theme="dark" */</em>
|
||||
<b>[data-theme="<u>dark</u>"]</b> {
|
||||
<i>--primary</i>: <u class="c600">...</u>;
|
||||
<i>--primary-hover</i>: <u class="c500">...</u>;
|
||||
|
|
@ -264,7 +264,6 @@
|
|||
<h3>For wild HTML purists!</h3>
|
||||
</hgroup>
|
||||
<p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p>
|
||||
<p>Obviously this version do not include <code>.container</code>, <code>.container-fluid</code>, <code>.grid</code>, <code>.secondary</code>, <code>.contrast</code> and <code>.outline</code>.</p>
|
||||
<p>In this version, <code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
|
||||
<p><strong>Usage:</strong></p>
|
||||
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
|
||||
|
|
@ -656,11 +655,11 @@
|
|||
<pre><code>
|
||||
<<b>form</b>>
|
||||
|
||||
<!-- Grid -->
|
||||
<em><!-- Grid --></em>
|
||||
<<b>section</b> <i>class</i>=<u>"grid"</u>>
|
||||
|
||||
<<b>div</b>>
|
||||
<!-- Markup example 1: input is inside label -->
|
||||
<em><!-- Markup example 1: input is inside label --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"firstname"</u>>
|
||||
First name
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>>
|
||||
|
|
@ -676,12 +675,12 @@
|
|||
|
||||
</<b>section</b>>
|
||||
|
||||
<!-- Markup example 2: input is after label -->
|
||||
<em><!-- Markup example 2: input is after label --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"email"</u>>Email address</<b>label</b>>
|
||||
<<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>>
|
||||
<<b>small</b>>We'll never share your email with anyone else.</<b>small</b>>
|
||||
|
||||
<!-- Button -->
|
||||
<em><!-- Button --></em>
|
||||
<<b>button</b> <i>type</i>=<u>"submit"</u>>Submit</<b>button</b>>
|
||||
|
||||
</<b>form</b>></code></pre>
|
||||
|
|
@ -748,14 +747,14 @@
|
|||
</label>
|
||||
</fieldset>
|
||||
|
||||
<pre><code><!-- Select -->
|
||||
<pre><code><em><!-- Select --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"country"</u>>Country</<b>label</b>>
|
||||
<<b>select</b> <i>id</i>=<u>"country</u>">
|
||||
<<b>option</b> <i>selected</i>>Choose...</<b>option</b>>
|
||||
<<b>option</b>>...</<b>option</b>>
|
||||
</<b>select</b>>
|
||||
|
||||
<!-- Radios -->
|
||||
<em><!-- Radios --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>legend</b>>Gender</<b>legend</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"male"</u>>
|
||||
|
|
@ -772,7 +771,7 @@
|
|||
</<b>label</b>>
|
||||
</<b>fieldset</b>>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<em><!-- Checkbox --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"terms"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>>
|
||||
|
|
@ -780,7 +779,7 @@
|
|||
</<b>label</b>>
|
||||
</<b>fieldset</b>>
|
||||
|
||||
<!-- Switch -->
|
||||
<em><!-- Switch --></em>
|
||||
<<b>fieldset</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>>
|
||||
|
|
@ -842,6 +841,27 @@
|
|||
I'm a card!
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
<p>You can use <code><<b>header</b>></code> and footer <code><<b>footer</b>></code> inside <code><<b>article</b>></code></p>
|
||||
<article>
|
||||
<header>
|
||||
Header
|
||||
</header>
|
||||
Body
|
||||
<footer>
|
||||
Footer
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<pre><code><<b>article</b>>
|
||||
<<b>header</b>>
|
||||
Header
|
||||
</<b>header</b>>
|
||||
Body
|
||||
<<b>footer</b>>
|
||||
Footer
|
||||
</<b>footer</b>>
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
</section><!-- ./ Docs: Card -->
|
||||
|
||||
<!-- Docs: Navs -->
|
||||
|
|
|
|||
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
|
|
@ -19,7 +19,7 @@
|
|||
off: '<i>Turn off dark mode</i>'
|
||||
},
|
||||
target: 'body', // Button append in target
|
||||
selector: 'button.theme-switcher', // Button selector in Dom
|
||||
selector: 'button.theme-switcher', // Button selector in Dom
|
||||
currentTheme: systemColorScheme()
|
||||
};
|
||||
|
||||
|
|
@ -101,8 +101,11 @@
|
|||
|
||||
// Apply theme
|
||||
document.querySelector('html').setAttribute('data-theme', set);
|
||||
document.querySelector(switcher.selector).innerHTML = label;
|
||||
document.querySelector(switcher.selector).setAttribute('aria-label', stripTags(label));
|
||||
var switchers = document.querySelectorAll(switcher.selector);
|
||||
for (var i = 0; i < switchers.length; i++) {
|
||||
switchers[i].innerHTML = label;
|
||||
switchers[i].setAttribute('aria-label', stripTags(label));
|
||||
}
|
||||
switcher.currentTheme = set;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
/**
|
||||
* Docs: Code inside <article>
|
||||
*/
|
||||
|
||||
// Custom spacings
|
||||
article pre {
|
||||
margin-top: $spacing-block;
|
||||
margin-bottom: -$spacing-gutter*2;
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
||||
margin: -$spacing-block*map-get($spacing-factor, "sm");
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
|
||||
margin: -$spacing-block*map-get($spacing-factor, "md");
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
|
||||
margin: -$spacing-block*map-get($spacing-factor, "lg");
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
|
||||
margin: -$spacing-block*map-get($spacing-factor, "xl");
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -83,10 +83,6 @@ pre {
|
|||
background: var(--invalid);
|
||||
content: 'Bulky';
|
||||
}
|
||||
|
||||
pre {
|
||||
border-color: var(--invalid);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="valid"] {
|
||||
|
|
@ -94,10 +90,6 @@ pre {
|
|||
background: var(--valid);
|
||||
content: 'Great';
|
||||
}
|
||||
|
||||
pre {
|
||||
border-color: var(--valid);
|
||||
}
|
||||
}
|
||||
|
||||
section[title="love"] [data-theme="invalid"] {
|
||||
|
|
|
|||
|
|
@ -53,9 +53,10 @@ main > aside {
|
|||
border-bottom: none;
|
||||
|
||||
summary {
|
||||
color: var(--h3);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
color: var(--h3);
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -21,5 +21,5 @@
|
|||
|
||||
// Components
|
||||
@import "components/nav";
|
||||
@import "components/card-code";
|
||||
//@import "components/card-code";
|
||||
@import "components/theme-switcher";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Navy-Grey
|
||||
$grey-hue: 200 !default;
|
||||
$grey-hue: 205 !default;
|
||||
$grey-50: hsl($grey-hue, 20%, 94%) !default;
|
||||
$grey-100: hsl($grey-hue, 18%, 86%) !default;
|
||||
$grey-200: hsl($grey-hue, 16%, 77%) !default;
|
||||
|
|
@ -12,7 +12,7 @@ $grey-800: hsl($grey-hue, 25%, 23%) !default;
|
|||
$grey-900: hsl($grey-hue, 30%, 15%) !default;
|
||||
|
||||
// Light Blue
|
||||
$primary-hue: 200;
|
||||
$primary-hue: 195;
|
||||
$primary-50: hsl($primary-hue, 90%, 94%) !default;
|
||||
$primary-100: hsl($primary-hue, 88%, 86%) !default;
|
||||
$primary-200: hsl($primary-hue, 86%, 77%) !default;
|
||||
|
|
|
|||
145
scss/components/_card-sectioning.scss
Normal file
145
scss/components/_card-sectioning.scss
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
/**
|
||||
* Card sectionning (<article> > header, footer|pre)
|
||||
*/
|
||||
|
||||
article {
|
||||
> header,
|
||||
> footer {
|
||||
background-color: var(--card-sections);
|
||||
}
|
||||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin: -$spacing-gutter;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "sm");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "md");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "lg");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "xl");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
|
||||
}
|
||||
}
|
||||
}
|
||||
> header {
|
||||
margin-top: -$spacing-gutter*2;
|
||||
margin-bottom: $spacing-block;
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "md"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
> footer,
|
||||
> pre {
|
||||
margin-top: $spacing-block;
|
||||
margin-bottom: -$spacing-gutter*2;
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "sm");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "sm"));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "md");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "md"));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "lg");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "lg"));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "xl");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ article {
|
|||
margin-right: -$spacing-gutter;
|
||||
margin-left: -$spacing-gutter;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
overflow: hidden;
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
|
||||
|
|
@ -53,4 +54,9 @@ article {
|
|||
padding: $spacing-block*map-get($spacing-factor, "xl");
|
||||
}
|
||||
}
|
||||
|
||||
// Remove last-child margin bottom
|
||||
> *:not(footer):not(pre):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ pre,
|
|||
code,
|
||||
kbd {
|
||||
background: var(--code-inlined);
|
||||
color: var(--muted-text);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
|
|
@ -66,7 +66,6 @@ pre {
|
|||
margin-left: -$spacing-gutter;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
overflow-x: auto;
|
||||
border-left: .25rem solid var(--code-border);
|
||||
background: var(--code-background);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
|
|
@ -88,21 +87,27 @@ code {
|
|||
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-color-1);
|
||||
color: var(--code-color-2);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Properties
|
||||
i {
|
||||
color: var(--code-color-2);
|
||||
color: var(--code-color-3);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Values
|
||||
u {
|
||||
color: var(--text);
|
||||
color: var(--code-color-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Comments
|
||||
em {
|
||||
color: var(--code-color-5);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
|
|
|
|||
|
|
@ -309,3 +309,8 @@ ins {
|
|||
del {
|
||||
color: var(--invalid);
|
||||
}
|
||||
|
||||
// selection
|
||||
::selection {
|
||||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,24 +12,25 @@
|
|||
@import "themes/dark";
|
||||
|
||||
// Layout
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // main > section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // main > section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote ...
|
||||
@import "content/form"; // label, input, select, ...
|
||||
@import "content/button"; // button, a[role=button], ...
|
||||
@import "content/button-styles"; // .secondary, .contrast, .outline
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
@import "content/code"; // pre, code, ...
|
||||
@import "content/miscs"; // hr, progress, template, [hidden]
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote ...
|
||||
@import "content/form"; // label, input, select, ...
|
||||
@import "content/button"; // button, a[role=button], ...
|
||||
@import "content/button-styles"; // .secondary, .contrast, .outline
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
@import "content/code"; // pre, code, ...
|
||||
@import "content/miscs"; // hr, progress, template, [hidden]
|
||||
|
||||
// Components
|
||||
@import "components/accordion"; // details, summary
|
||||
@import "components/card"; // article
|
||||
@import "components/nav"; // nav
|
||||
@import "components/tooltip"; // data-tooltip
|
||||
@import "components/accordion"; // details, summary
|
||||
@import "components/card"; // article
|
||||
@import "components/card-sectioning"; // article > header, footer|pre
|
||||
@import "components/nav"; // nav
|
||||
@import "components/tooltip"; // data-tooltip
|
||||
|
|
|
|||
|
|
@ -55,18 +55,21 @@
|
|||
|
||||
// Card
|
||||
--card-background: #{darken($grey-900, 2%)};
|
||||
--card-sections: #{darken($grey-900, 4%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
|
||||
|
||||
// Code
|
||||
--code-background: #{darken($grey-900, 4%)};
|
||||
--code-border: #{mix($grey-800, $grey-900)};
|
||||
--code-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{desaturate($red-700, 10%)};
|
||||
--code-color-2: #{desaturate($primary-500, 40%)};
|
||||
--code-color-1: #{$grey-500)};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
|
||||
// Table
|
||||
--table-border: #{darken($grey-900, 6%)};
|
||||
--table-stripping: #{rgba($grey-50,.033)};
|
||||
--table-stripping: #{rgba($grey-50,.02)};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,16 +131,19 @@
|
|||
|
||||
// Card
|
||||
--card-background: #{darken($grey-900, 2%)};
|
||||
--card-sections: #{darken($grey-900, 4%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
|
||||
|
||||
// Code
|
||||
--code-background: #{darken($grey-900, 4%)};
|
||||
--code-border: #{mix($grey-800, $grey-900)};
|
||||
--code-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{desaturate($red-700, 10%)};
|
||||
--code-color-2: #{desaturate($primary-500, 40%)};
|
||||
--code-color-1: #{$grey-500)};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
|
||||
// Table
|
||||
--table-border: #{darken($grey-900, 6%)};
|
||||
--table-stripping: #{rgba($grey-50,.033)};
|
||||
--table-stripping: #{rgba($grey-50,.02)};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
--primary-inverse: #{$white};
|
||||
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary Call-to-Action and links
|
||||
--secondary: #{$grey-500};
|
||||
--secondary-hover: #{$grey-700};
|
||||
|
|
@ -55,16 +54,18 @@
|
|||
|
||||
// Card
|
||||
--card-background: #{$white};
|
||||
--card-sections: #{lighten($grey-50, 2%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
|
||||
|
||||
// Code
|
||||
--code-background: #{lighten($grey-50, 2%)};
|
||||
--code-border: #{$grey-100};
|
||||
--code-inlined: #{$grey-50};
|
||||
--code-color-1: #{desaturate($red-700, 20%)};
|
||||
--code-color-2: #{desaturate($primary-600, 30%)};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 40%)};
|
||||
--code-color-4: #{hsl(40, 20%, 50%)};
|
||||
--code-color-5: #{mix($grey-300, $grey-400)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-50, .75)};
|
||||
--table-stripping: #{rgba($grey-900,.033)};
|
||||
--table-stripping: #{rgba($grey-900,.02)};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue