@lobehub/ui/es/awesome/AuroraBackground/style.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/AuroraBackground/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes, responsive } from 'antd-style';\n\nconst aurora = keyframes`\n  0% {\n    background-position: 50% 50%, 50% 50%;\n  }\n  100% {\n    background-position: 350% 50%, 350% 50%;\n  }\n`;\n\nconst darkBackground = `\n  background-image:\n    repeating-linear-gradient(\n      100deg,\n      rgb(0, 0, 0) 0%,\n      rgb(0, 0, 0) 7%,\n      rgba(0, 0, 0, 0%) 10%,\n      rgba(0, 0, 0, 0%) 12%,\n      rgb(0, 0, 0) 16%\n    ),\n    repeating-linear-gradient(\n      100deg,\n      rgb(59, 130, 246) 10%,\n      rgb(165, 180, 252) 15%,\n      rgb(147, 197, 253) 20%,\n      rgb(221, 214, 254) 25%,\n      rgb(96, 165, 250) 30%\n    );\n`;\n\nconst lightBackground = `\n  background-image:\n    repeating-linear-gradient(\n      100deg,\n      rgb(255, 255, 255) 0%,\n      rgb(255, 255, 255) 7%,\n      rgba(0, 0, 0, 0%) 10%,\n      rgba(0, 0, 0, 0%) 12%,\n      rgb(255, 255, 255) 16%\n    ),\n    repeating-linear-gradient(\n      100deg,\n      rgb(59, 130, 246) 10%,\n      rgb(165, 180, 252) 15%,\n      rgb(147, 197, 253) 20%,\n      rgb(221, 214, 254) 25%,\n      rgb(96, 165, 250) 30%\n    );\n`;\n\nexport const styles = createStaticStyles(({ css }) => ({\n  bgDark: css`\n    ${darkBackground}\n    pointer-events: none;\n    will-change: transform;\n\n    position: absolute;\n    inset: -10px;\n\n    max-height: 100vh;\n\n    opacity: 0.3;\n    background-position:\n      50% 50%,\n      50% 50%;\n    background-size: 300%, 200%;\n    filter: blur(10px) invert(0);\n\n    animation: ${aurora} 100s linear infinite;\n\n    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n    &::after {\n      ${darkBackground}\n      position: absolute;\n\n      content: '';\n\n      inset: 0;\n\n      animation: ${aurora} 100s linear infinite;\n\n      mix-blend-mode: difference;\n      background-attachment: fixed;\n      background-size: 200%, 100%;\n    }\n\n    ${responsive.sm} {\n      transform: scale(2);\n      max-height: 25vh;\n    }\n  `,\n\n  bgLight: css`\n    ${lightBackground}\n    pointer-events: none;\n    will-change: transform;\n\n    position: absolute;\n    inset: -10px;\n\n    max-height: 100vh;\n\n    opacity: 0.6;\n    background-position:\n      50% 50%,\n      50% 50%;\n    background-size: 300%, 200%;\n    filter: blur(10px) invert(1);\n\n    animation: ${aurora} 100s linear infinite;\n\n    mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n    &::after {\n      ${lightBackground}\n      position: absolute;\n\n      content: '';\n\n      inset: 0;\n\n      animation: ${aurora} 100s linear infinite;\n\n      mix-blend-mode: difference;\n      background-attachment: fixed;\n      background-size: 200%, 100%;\n    }\n\n    ${responsive.sm} {\n      transform: scale(2);\n      max-height: 25vh;\n    }\n  `,\n\n  wrapper: css`\n    position: absolute;\n    z-index: 0;\n    inset: 0;\n    overflow: hidden;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;AAoBvB,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;AAoBxB,MAAa,SAAS,oBAAoB,EAAE,kBAAW;CACrD,QAAQ,KAAG;MACP,eAAe;;;;;;;;;;;;;;;;iBAgBJ,OAAO;;;;;QAKhB,eAAe;;;;;;;mBAOJ,OAAO;;;;;;;MAOpB,WAAW,GAAG;;;;;CAMlB,SAAS,KAAG;MACR,gBAAgB;;;;;;;;;;;;;;;;iBAgBL,OAAO;;;;;QAKhB,gBAAgB;;;;;;;mBAOL,OAAO;;;;;;;MAOpB,WAAW,GAAG;;;;;CAMlB,SAAS,KAAG;;;;;;CAMb,EAAE"}