@lobehub/ui/es/awesome/GridBackground/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/GridBackground/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst highlightAnimation = keyframes`\n  0% {\n    mask-position: 100% 0%;\n  }\n  16%,100% {\n    mask-position: 100% 200%;\n  }\n`;\n\nconst highlightAnimationReverse = keyframes`\n  0% {\n    mask-position: 100% 200%;\n  }\n  16%,100% {\n    mask-position: 100% 0%;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css }) => {\n  const width = 24;\n  const height = 36;\n\n  return {\n    background: css`\n      position: absolute;\n      inset-block-start: ${60 - height / 2}%;\n      inset-inline-start: ${50 - width / 2}%;\n      transform: rotateX(60deg);\n\n      width: ${width}%;\n      height: ${height}%;\n      border-radius: 50%;\n\n      background: var(--grid-background-color-1, transparent);\n      filter: blur(2em) saturate(400%);\n      box-shadow:\n        0 0 1em 2em var(--grid-background-color-1, transparent),\n        0 0 3em 6em var(--grid-background-color-2, transparent),\n        0 0 6em 10em var(--grid-background-color-3, transparent),\n        0 0 8em 16em var(--grid-background-color-4, transparent);\n    `,\n    backgroundContainer: css`\n      position: absolute;\n      z-index: -1;\n      inset: 0;\n\n      width: 100%;\n      height: 100%;\n\n      perspective: 200px;\n    `,\n    container: css`\n      position: relative;\n\n      mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);\n      mask-size: cover;\n    `,\n    highlight: css`\n      --duration: 6s;\n      --delay: 0s;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      animation: ${highlightAnimation} var(--duration) cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;\n      animation-delay: var(--delay);\n\n      mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);\n      mask-size: 100% 200%;\n    `,\n    highlightReverse: css`\n      --duration: 6s;\n      --delay: 0s;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      animation: ${highlightAnimationReverse} var(--duration) cubic-bezier(0.62, 0.62, 0.28, 0.67)\n        infinite;\n      animation-delay: var(--delay);\n\n      mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);\n      mask-size: 100% 200%;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAM,qBAAqB,SAAS;;;;;;;;AASpC,MAAM,4BAA4B,SAAS;;;;;;;;AAS3C,MAAa,SAAS,oBAAoB,EAAE,iBAAU;CACpD,MAAM,QAAQ;CACd,MAAM,SAAS;AAEf,QAAO;EACL,YAAY,KAAG;;2BAEQ,KAAK,SAAS,EAAE;4BACf,KAAK,QAAQ,EAAE;;;eAG5B,MAAM;gBACL,OAAO;;;;;;;;;;;EAWnB,qBAAqB,KAAG;;;;;;;;;;EAUxB,WAAW,KAAG;;;;;;EAMd,WAAW,KAAG;;;;;;;;mBAQC,mBAAmB;;;;;;EAMlC,kBAAkB,KAAG;;;;;;;;mBAQN,0BAA0B;;;;;;;EAO1C;EACD"}