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

refactor: ♻️ use custom property for gradient direction

Browse source
This commit is contained in:
Sebin Nyshkim 2025-06-20 15:08:46 +02:00
parent 788dc36364
commit fa19ee5e91
1 changed files with 8 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -121,6 +121,8 @@
} }
:host :where(.prev, .next, .indicator-btn) { :host :where(.prev, .next, .indicator-btn) {
--gradient-dir: to bottom right;
position: relative; position: relative;
font-size: 1.25em; font-size: 1.25em;
@ -128,7 +130,7 @@
cursor: pointer; cursor: pointer;
background: linear-gradient( background: linear-gradient(
to bottom right, var(--gradient-dir),
var(--clr-box-gradient-start) 0%, var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50% var(--clr-box-gradient-end) 50%
); );
@ -143,19 +145,17 @@
} }
:host :where(.prev, .next, .indicator-btn):active::after { :host :where(.prev, .next, .indicator-btn):active::after {
background: linear-gradient( --gradient-dir: to top left;
to top left,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
} }
:host :where(.prev, .next, .indicator-btn)::after { :host :where(.prev, .next, .indicator-btn)::after {
--gradient-dir: to bottom right;
content: ''; content: '';
position: absolute; position: absolute;
inset: var(--border-thin); inset: var(--border-thin);
background: linear-gradient( background: linear-gradient(
to bottom right, var(--gradient-dir),
var(--clr-quick-info-bg-start) 0%, var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50% var(--clr-quick-info-bg-end) 50%
); );
@ -255,10 +255,6 @@
} }
:host .indicator-btn[aria-current='true']::after { :host .indicator-btn[aria-current='true']::after {
background: linear-gradient( --gradient-dir: to top left;
to top left,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
} }
</style> </style>