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

refactor: ♻️ modularize button gradients

Browse source 
This allows for more flexibility when recoloring buttons
This commit is contained in:
Sebin Nyshkim 2025-06-20 21:30:26 +02:00
parent 5a3b2ac3d4
commit 05bae8229f
5 changed files with 69 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,11 +5,15 @@
<style webc:scoped="quick-info">
:host {
--gradient-dir: to bottom right;
--gradient-start: var(--clr-box-gradient-start);
--gradient-end: var(--clr-box-gradient-end);
position: relative;
background: linear-gradient(
to bottom right,
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
var(--gradient-dir),
var(--gradient-start) 0%,
var(--gradient-end) 50%
);
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
@ -22,13 +26,16 @@
}
:host::before {
--gradient-start: var(--clr-quick-info-gradient-start);
--gradient-end: var(--clr-quick-info-gradient-end);
content: '';
position: absolute;
inset: var(--border-thin);
background: linear-gradient(
to bottom right,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
var(--gradient-dir),
var(--gradient-start) 0%,
var(--gradient-end) 50%
);
border-radius: inherit;
z-index: -1;