@lobehub/ui/es/awesome/FluidGradient/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/FluidGradient/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset: 0;\n\n    /* Soft CSS fallback so the hero never flashes empty white while WebGL boots. */\n    background:\n      radial-gradient(\n        ellipse 80% 55% at 50% 0%,\n        color-mix(in srgb, var(--fluid-stop-a, #7c5cff) 28%, transparent),\n        transparent 70%\n      ),\n      radial-gradient(\n        ellipse 60% 45% at 85% 20%,\n        color-mix(in srgb, var(--fluid-stop-b, #d6549e) 22%, transparent),\n        transparent 65%\n      ),\n      radial-gradient(\n        ellipse 55% 40% at 15% 30%,\n        color-mix(in srgb, var(--fluid-stop-c, #f0885f) 18%, transparent),\n        transparent 60%\n      );\n\n    canvas {\n      display: block;\n\n      inline-size: 100%;\n      block-size: 100%;\n\n      opacity: 0;\n\n      transition: opacity 700ms ease;\n    }\n\n    &[data-ready] canvas {\n      opacity: 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      canvas {\n        transition-duration: 0.01ms;\n      }\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW,EACrD,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8CX,EAAE"}