pluie.me
Source code + assets for pluie.me
1.split-icon {
2 path {
3 transition-duration: 0.1s;
4 transition-property: fill, filter;
5 }
6 --base-side: 0;
7 --side: var(--base-side);
8 --highlight: 0;
9 --highlight-color: var(--color-brand);
10
11 #left {
12 filter: opacity(calc(0.5 * (2 - var(--side))));
13 fill: color-mix(
14 in oklab,
15 currentColor calc(100% * (1 - var(--highlight) * (1 - var(--side)))),
16 var(--highlight-color)
17 );
18 }
19 #right {
20 filter: opacity(calc(0.5 * (1 + var(--side))));
21 fill: color-mix(
22 in oklab,
23 currentColor calc(100% * (1 - var(--highlight) * var(--side))),
24 var(--highlight-color)
25 );
26 }
27
28 &:hover {
29 --side: calc(1 - var(--base-side)) !important;
30 --highlight: 1;
31 }
32
33 /* Theme-based split icon */
34
35 &.theme {
36 --base-side: 1;
37
38 @variant dark {
39 --base-side: 0;
40 }
41 }
42}
43
44/* Language based split icon */
45
46[lang="zh"] .split-icon.lang {
47 --base-side: 0;
48}
49
50[lang="en"] .split-icon.lang {
51 --base-side: 1;
52}