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

feat: 💄 change to radial gradient, keep the same across all viewport sizes

Browse source
This commit is contained in:
Sebin Nyshkim 2025-07-11 21:09:43 +02:00
parent 6db344f524
commit 3d812fdacc
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
2 changed files with 10 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,27 +22,19 @@
} }
:host::before { :host::before {
--shadow-inset: -0.5em -0.5em 0.5em 0.5em;
--gradient-dir: to right;
content: ''; content: '';
position: absolute; position: absolute;
inset: var(--shadow-inset); inset: 0.5em -0.5em -0.5em 0.5em;
background: linear-gradient( background: radial-gradient(
var(--gradient-dir), ellipse at top left,
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) 60%,
oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h) oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h)
); );
border-radius: inherit; border-radius: inherit;
transform: translate3d(0, 0, -1px); 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) { :host > :not(.character-nav, .slider) {

16
src/components/profile.webc
View file

@ -54,25 +54,19 @@
} }
:host::before { :host::before {
--shadow-inset: -0.5em -0.5em 0.5em 0.5em;
content: ''; content: '';
position: absolute; position: absolute;
inset: var(--shadow-inset); inset: -0.5em 0.5em 0.5em -0.5em;
background: linear-gradient( background: radial-gradient(
to right, ellipse at bottom right,
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) 60%,
oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h) oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h)
); );
border-radius: inherit; border-radius: inherit;
transform: translate3d(0, 0, -1px); transform: translate3d(0, 0, -1px);
@media (min-width: 64em) {
--shadow-inset: 1em 1em -1em -1.5em;
}
} }
:host .avatar { :host .avatar {