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

feat: 💄 update component background gradients

Browse source
This commit is contained in:
Sebin Nyshkim 2025-06-28 23:17:12 +02:00
parent fbcd1b90e5
commit 72e9672681
3 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/head/page-head-colors.webc
View file

@ -40,7 +40,7 @@
--clr-box-background: var(--theme-c-primary-150); --clr-box-background: var(--theme-c-primary-150);
--clr-box-border: var(--theme-c-primary-250); --clr-box-border: var(--theme-c-primary-250);
--clr-box-shadow: var(--theme-c-primary-200); --clr-box-shadow: var(--theme-c-primary-200);
--clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h); --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.3) c h);
--clr-box-gradient-end: oklch(from var(--clr-box-background) l c h); --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
--clr-color-box-background: var(--theme-c-primary-200); --clr-color-box-background: var(--theme-c-primary-200);

12
src/components/quick-info.webc
View file

@ -26,16 +26,18 @@
} }
:host::before { :host::before {
--gradient-start: var(--clr-quick-info-gradient-start); --gradient-dir: ellipse at bottom right;
--gradient-end: var(--clr-quick-info-gradient-end); --gradient-start: var(--clr-quick-info-gradient-end);
--gradient-end: var(--clr-quick-info-gradient-start);
content: ''; content: '';
position: absolute; position: absolute;
inset: var(--border-thin); inset: var(--border-thin);
background: linear-gradient(
background: radial-gradient(
var(--gradient-dir), var(--gradient-dir),
var(--gradient-start) 0%, var(--gradient-start) 70%,
var(--gradient-end) 50% var(--gradient-end) 100%
); );
border-radius: inherit; border-radius: inherit;
z-index: -1; z-index: -1;

11
src/components/trait-card.webc
View file

@ -79,17 +79,18 @@
} }
:host .content::before { :host .content::before {
--gradient-start: var(--clr-quick-info-gradient-start); --gradient-dir: ellipse at bottom right;
--gradient-end: var(--clr-quick-info-gradient-end); --gradient-start: var(--clr-quick-info-gradient-end);
--gradient-end: var(--clr-quick-info-gradient-start);
content: ''; content: '';
position: absolute; position: absolute;
inset: var(--border-thin); inset: var(--border-thin);
background: linear-gradient( background: radial-gradient(
var(--gradient-dir), var(--gradient-dir),
var(--gradient-start) 0%, var(--gradient-start) 70%,
var(--gradient-end) 50% var(--gradient-end) 100%
); );
border-radius: inherit; border-radius: inherit;