SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 💄 add gradient box shadow to main elements

Browse source
This commit is contained in:
Sebin Nyshkim 2025-07-11 17:47:05 +02:00
parent 4bd07a3a85
commit 9f6ddc0e54
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
3 changed files with 55 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/page-content.webc
View file

@ -17,7 +17,32 @@
border: var(--border-thin) solid var(--clr-box-border);
border-radius: var(--border-radius);
overflow: clip;
transform: translate(0);
transform-style: preserve-3d;
}
:host::before {
--shadow-inset: -0.5em -0.5em 0.5em 0.5em;
--gradient-dir: to right;
content: '';
position: absolute;
inset: var(--shadow-inset);
background: linear-gradient(
var(--gradient-dir),
oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h),
oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h)
);
border-radius: inherit;
transform: translate3d(0, 0, -1px);
@media (min-width: 64em) {
--shadow-inset: 1em -1.5em -1em 1em;
--gradient-dir: to left;
}
}
:host > :not(.character-nav, .slider) {