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

move glow -filter & -transition to base styles
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
kritzl 2025-02-16 19:20:02 +01:00
commit 36128b16d4
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
6 changed files with 82 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -121,6 +121,12 @@
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
--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;
}
.light {
@ -170,6 +176,12 @@ html.dark {
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
--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;
}
@media (prefers-color-scheme: dark) {
@ -187,6 +199,12 @@ html.dark {
--color-accent-1: var(--color-dark-accent-1);
--color-accent-2: var(--color-dark-accent-2);
--color-accent-3: var(--color-dark-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
--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;
}
}
@font-face {
@ -519,8 +537,8 @@ body > div nav button {
box-sizing: content-box;
}
body > div nav button:hover {
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
}
body > div nav ul {
display: flex;
@ -534,24 +552,22 @@ body > div nav ul li {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
--local-primary: var(--color-primary);
--local-border: var(--color-shade-1);
}
body > div nav ul li.link-back {
--local-primary: var(--color-secondary);
--local-border: var(--color-shade-4);
background-color: var(--color-background);
}
body > div nav ul li.active {
background-color: var(--color-shade-2);
--local-border: var(--color-shade-4);
}
body > div nav ul li.link-back a, body > div nav ul li.active a {
border-color: var(--color-shade-4);
}
body > div nav ul li > a {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
border: solid 0.1em var(--local-border);
border: solid 0.1em var(--color-shade-1);
padding: 0.4rem 1rem;
color: var(--color-foreground);
text-decoration: none;
@ -574,13 +590,19 @@ body > div nav ul li:hover, body > div nav ul li:focus-within {
background-color: transparent;
}
body > div nav ul li:hover a, body > div nav ul li:focus-within a {
border: solid 0.1em var(--color-white);
border: solid 0.1em var(--color-glow-primary);
background-color: transparent;
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
transition: filter 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms, border-color 100ms cubic-bezier(0, 2.01, 0.99, -0.72) 50ms;
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
}
body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body > div nav ul li:hover a:active, body > div nav ul li:hover a:hover, body > div nav ul li:focus-within a:visited, body > div nav ul li:focus-within a:focus, body > div nav ul li:focus-within a:active, body > div nav ul li:focus-within a:hover {
color: var(--color-white);
color: var(--color-glow-primary);
}
body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-back a {
filter: var(--filter-glow-secondary);
}
body > div nav ul li:hover.link-back a:visited, body > div nav ul li:hover.link-back a:focus, body > div nav ul li:hover.link-back a:active, body > div nav ul li:hover.link-back a:hover, body > div nav ul li:focus-within.link-back a:visited, body > div nav ul li:focus-within.link-back a:focus, body > div nav ul li:focus-within.link-back a:active, body > div nav ul li:focus-within.link-back a:hover {
color: var(--color-glow-secondary);
}
body > div main {
max-width: min(var(--container-4xl), 100vw);