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

style(card): box-shadow

Browse source
This commit is contained in:
Lucas Larroche 2022-06-04 08:31:56 +07:00
parent 221400e8f1
commit 70416e6942
13 changed files with 160 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

37
css/pico.classless.css
View file

@ -269,9 +269,14 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--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), --card-box-shadow:
0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024); 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--card-sectionning-background-color: #fbfbfc; --card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc; --dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
@ -370,10 +375,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
@ -471,10 +481,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;

37
css/pico.css
View file

@ -274,9 +274,14 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--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), --card-box-shadow:
0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024); 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--card-sectionning-background-color: #fbfbfc; --card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc; --dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
@ -375,10 +380,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
@ -476,10 +486,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;

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

@ -269,9 +269,14 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--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), --card-box-shadow:
0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024); 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--card-sectionning-background-color: #fbfbfc; --card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc; --dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
@ -370,10 +375,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
@ -471,10 +481,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;

37
css/pico.slim.css
View file

@ -205,9 +205,14 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--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), --card-box-shadow:
0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024); 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--card-sectionning-background-color: #fbfbfc; --card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc; --dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
@ -306,10 +311,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
@ -407,10 +417,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

37
css/themes/default.css
View file

@ -269,9 +269,14 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--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), --card-box-shadow:
0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024); 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--card-sectionning-background-color: #fbfbfc; --card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc; --dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
@ -370,10 +375,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
@ -471,10 +481,15 @@ kbd {
--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: #141e26; --card-background-color: #141e26;
--card-border-color: #11191f; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), --card-box-shadow:
0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036); 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c; --card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205deg, 30%, 15%); --dropdown-background-color: hsl(205deg, 30%, 15%);
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -105,11 +105,19 @@
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
// Card (<article>) // Card (<article>)
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
--card-background-color: #{mix($black, $grey-900, 25%)}; --card-background-color: #{mix($black, $grey-900, 25%)};
--card-border-color: #{mix($black, $grey-900, 37.5%)}; --card-border-color: var(--card-background-color);
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, --card-box-shadow:
0 0.125rem 2rem #{rgba($black, 0.12)}, #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
0 0 0 0.0625rem #{rgba($black, 0.036)}; #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)}; --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Dropdown (<details role="list">) // Dropdown (<details role="list">)

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

@ -105,11 +105,19 @@
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
// Card (<article>) // Card (<article>)
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
--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($grey-900, 0.04)}, --card-box-shadow:
0 0.125rem 2rem #{rgba($grey-900, 0.08)}, #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
0 0 0 0.0625rem #{rgba($grey-900, 0.024)}; #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)}; --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">) // Dropdown (<details role="list">)