File size: 1,528 Bytes
db14b86 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import { createStyles } from 'antd-style';
import { adjustHue, rgba } from 'polished';
export const useStyles = createStyles(
(
{ css, stylish, cx, token },
{ isPrimaryColor, liteAnimation }: { isPrimaryColor?: boolean; liteAnimation?: boolean },
) => ({
canvas: cx(
stylish.gradientAnimation,
isPrimaryColor &&
css`
background-image: linear-gradient(
-45deg,
${token.colorPrimary},
${adjustHue(45, token.colorPrimary)},
${token.colorPrimary},
${adjustHue(-45, token.colorPrimary)}
);
`,
css`
pointer-events: none;
position: absolute;
z-index: 10;
top: -250px;
left: 50%;
transform: translateX(-50%) scale(1.5);
width: 75vw;
height: 400px;
opacity: 0.2;
filter: blur(100px);
`,
),
container: cx(
!liteAnimation && stylish.blur,
css`
position: fixed;
z-index: 9999;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background: ${liteAnimation ? token.colorBgLayout : rgba(token.colorBgLayout, 0.5)};
`,
),
icon: css`
color: ${token.colorPrimary};
`,
inner: css`
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
justify-content: center;
width: min(50%, 580px);
`,
}),
);
|