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

glow-filter and -transition for light mode
All checks were successful
/ build (push) Successful in 10s
Details

Browse source
This commit is contained in:
lilith 2025-02-16 19:37:08 +01:00
commit a0f7ad1666
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
6 changed files with 104 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -125,8 +125,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));
--color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
.light {
@ -143,6 +143,12 @@
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
html,
@ -160,6 +166,12 @@ html.light {
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
html.dark {
@ -180,8 +192,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));
--color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
@media (prefers-color-scheme: dark) {
@ -203,8 +215,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));
--color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white);
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
--transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
}
}
@font-face {
@ -372,7 +384,8 @@ table {
width: fit-content;
border-collapse: collapse;
}
table th, table td {
table th,
table td {
padding: 0.25rem 0.5rem;
border: solid 0.1em var(--color-shade-4);
}