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

44
styleguide/assets/style/styleguide.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);
}
@ -599,6 +612,7 @@ body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body >
color: var(--color-glow-primary);
}
body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-back a {
border: solid 0.1em var(--color-glow-secondary);
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 {
@ -625,7 +639,7 @@ i[data-icon] {
box-sizing: content-box;
}
i[data-icon]::before {
content: "";
content: '';
display: block;
width: 100%;
height: 100%;
@ -634,25 +648,25 @@ i[data-icon]::before {
mask-repeat: no-repeat;
background-color: currentColor;
}
i[data-icon][data-icon=arrow-left]::before {
i[data-icon][data-icon='arrow-left']::before {
mask-image: url("../icon/arrow_left.svg");
}
i[data-icon][data-icon=arrow-top]::before {
i[data-icon][data-icon='arrow-top']::before {
mask-image: url("../icon/arrow_top.svg");
}
i[data-icon][data-icon=arrow-right]::before {
i[data-icon][data-icon='arrow-right']::before {
mask-image: url("../icon/arrow_right.svg");
}
i[data-icon][data-icon=arrow-down]::before {
i[data-icon][data-icon='arrow-down']::before {
mask-image: url("../icon/arrow_down.svg");
}
i[data-icon][data-icon=info]::before {
i[data-icon][data-icon='info']::before {
mask-image: url("../icon/info.svg");
}
i[data-icon][data-icon=home]::before {
i[data-icon][data-icon='home']::before {
mask-image: url("../icon/home.svg");
}
i[data-icon][data-icon=menu-small]::before {
i[data-icon][data-icon='menu-small']::before {
mask-image: url("../icon/menu_small.svg");
}