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

12
src/components/ref-gallery.webc
View file

@ -122,6 +122,8 @@
:host :where(.prev, .next, .indicator-btn) {
--gradient-dir: to bottom right;
--gradient-start: var(--clr-box-gradient-start);
--gradient-end: var(--clr-box-gradient-end);
position: relative;
@ -131,8 +133,8 @@
background: linear-gradient(
var(--gradient-dir),
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
var(--gradient-start) 0%,
var(--gradient-end) 50%
);
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
@ -150,14 +152,16 @@
:host :where(.prev, .next, .indicator-btn)::after {
--gradient-dir: to bottom right;
--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(
var(--gradient-dir),
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
var(--gradient-start) 0%,
var(--gradient-end) 50%
);
border-radius: inherit;
z-index: -1;