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

feat: 💄 update button styles of filter list

Browse source 
Harmonize filter list button styles with rest of the page
This commit is contained in:
Sebin Nyshkim 2025-06-20 14:49:34 +02:00
parent 3a52d4a004
commit 788dc36364
1 changed files with 35 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/filter-list.webc
View file

@ -32,8 +32,8 @@
:host { :host {
--clr-love: oklch(60% 0.25 10deg); --clr-love: oklch(60% 0.25 10deg);
--clr-yes: oklch(65% 0.2 140deg); --clr-yes: oklch(65% 0.2 140deg);
--clr-maybe: oklch(75% 0.15 85deg); --clr-maybe: oklch(65% 0.15 70deg);
--clr-no: oklch(40% 0.15 30deg); --clr-no: oklch(40% 0.2 40deg);
--clr-tag: oklch(65% 0.15 245deg); --clr-tag: oklch(65% 0.15 245deg);
} }
@ -88,37 +88,50 @@
display: none; display: none;
} }
:host .filter-button input:checked + label {
--box-shadow-size: 0.25em;
--button-top: 0.25em;
}
:host .filter-button label { :host .filter-button label {
display: block; --clr-box-background: var(--clr-button);
--clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
--clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
--gradient-dir: to bottom right;
position: relative; position: relative;
top: var(--button-top, 0); display: block;
background-color: var(--clr-button); background: linear-gradient(
var(--gradient-dir),
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
font-weight: 700; color: white;
text-decoration: none; font-size: 1em;
font-weight: bold;
text-align: center; text-align: center;
color: var(--theme-c-primary-100);
margin: 0.5em 0; box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
border-radius: 0.25em;
border: none;
border-radius: 0.5em;
padding: 0.5em 1em; padding: 0.5em 1em;
box-shadow: 0 var(--box-shadow-size, 0.5em) 0 0 oklch(from var(--clr-button) calc(l - 0.3) c h); overflow: hidden;
z-index: 1;
transition: all 0.1s ease-out; transition: all 0.2s ease-in-out;
&::before {
content: '';
position: absolute;
inset: var(--border-thin);
background-color: var(--clr-box-background);
border-radius: inherit;
z-index: -1;
}
} }
:host .filter-button label:hover { :host .filter-button input:checked + label {
--box-shadow-size: 0.75em; --gradient-dir: to top left;
--button-top: -0.25em; --clr-box-background: oklch(from var(--clr-button) calc(l * 0.825) c h);
cursor: pointer;
} }
:host .filter-button label[for='button-love'] { :host .filter-button label[for='button-love'] {
@ -145,7 +158,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: scroll; overflow-y: scroll;
} }
:host .item { :host .item {