This repository has no description
Something went wrong. Try again.
973 B · 52 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253.split-icon { path { transition-duration: 0.1s; transition-property: fill, filter; } --base-side: 0; --side: var(--base-side); --highlight: 0; --highlight-color: var(--color-brand);
#left { filter: opacity(calc(0.5 * (2 - var(--side)))); fill: color-mix( in oklab, currentColor calc(100% * (1 - var(--highlight) * (1 - var(--side)))), var(--highlight-color) ); } #right { filter: opacity(calc(0.5 * (1 + var(--side)))); fill: color-mix( in oklab, currentColor calc(100% * (1 - var(--highlight) * var(--side))), var(--highlight-color) ); }
&:hover { --side: calc(1 - var(--base-side)) !important; --highlight: 1; }
/* Theme-based split icon */
&.theme { --base-side: 1;
@variant dark { --base-side: 0; } }}
/* Language based split icon */
[lang="zh"] .split-icon.lang { --base-side: 0;}
[lang="en"] .split-icon.lang { --base-side: 1;}