EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust transition to match Wiki
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
kritzl 2025-02-22 15:48:40 +01:00
commit 712c32d3d5
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
3 changed files with 24 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

20
styleguide/assets/style/base.css
View file

@ -133,8 +133,8 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
} }
.dark .light-only { .dark .light-only {
display: none; display: none;
@ -161,8 +161,8 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
} }
.light .light-only { .light .light-only {
display: initial; display: initial;
@ -190,8 +190,8 @@ html.light {
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
} }
html .light-only, html .light-only,
html.light .light-only { html.light .light-only {
@ -220,8 +220,8 @@ html.dark {
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
} }
html.dark .light-only { html.dark .light-only {
display: none; display: none;
@ -249,8 +249,8 @@ html.dark .dark-only {
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
} }
html .light-only { html .light-only {
display: none; display: none;

8
styleguide/assets/style/base.scss
View file

@ -149,8 +149,8 @@ $mobile-navigation-height: 4rem;
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
.light-only { .light-only {
display: none; display: none;
@ -180,8 +180,8 @@ $mobile-navigation-height: 4rem;
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
.light-only { .light-only {
display: initial; display: initial;

20
styleguide/assets/style/styleguide.css
View file

@ -133,8 +133,8 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
} }
.dark .light-only { .dark .light-only {
display: none; display: none;
@ -161,8 +161,8 @@
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
} }
.light .light-only { .light .light-only {
display: initial; display: initial;
@ -190,8 +190,8 @@ html.light {
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950); --color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950); --color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
} }
html .light-only, html .light-only,
html.light .light-only { html.light .light-only {
@ -220,8 +220,8 @@ html.dark {
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
} }
html.dark .light-only { html.dark .light-only {
display: none; display: none;
@ -249,8 +249,8 @@ html.dark .dark-only {
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white); --color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white); --color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms, --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms; border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
} }
html .light-only { html .light-only {
display: none; display: none;