pluie.me
Source code + assets for pluie.me
1.icon-grid {
2 @apply grid grid-cols-4 gap-1 auto-rows-[1fr];
3
4 .icon {
5 @apply relative rounded-lg border-fg/30 border-2 cursor-pointer
6 aspect-square flex items-center justify-center;
7
8 div[class^="icon-"] {
9 @apply rounded-md aspect-square;
10 background-position: center;
11 width: 80% !important;
12 height: auto !important;
13 --bg-transition: inherit;
14
15 filter: opacity(calc(1 - 0.7 * var(--bg-transition))) blur(
16 calc(4px * var(--bg-transition))
17 );
18 transition: 0.1s filter;
19 }
20
21 .name {
22 @apply absolute top-0 left-0 w-full h-full z-10 p-2 flex items-center
23 justify-center text-center text-fg text-xs break-words;
24 --bg-transition: inherit;
25
26 color: color-mix(
27 in oklab,
28 currentcolor calc(var(--bg-transition) * 100%),
29 transparent
30 );
31 transition: 0.1s color;
32 }
33
34 &:has(input[name="icon-select"]:checked) {
35 --bg-transition: 1;
36 }
37 }
38}