@lobehub/ui/es/awesome/AuroraBackground/style.js

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStyles, keyframes } from 'antd-style';
export var useStyles = createStyles(function (_ref) {
  var cx = _ref.cx,
    isDarkMode = _ref.isDarkMode,
    css = _ref.css,
    responsive = _ref.responsive;
  var aurora = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: 50% 50%, 50% 50%;\n  }\n  100% {\n    background-position: 350% 50%, 350% 50%;\n  }\n"])));
  var dark = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-image: 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  "])));
  var light = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-image: 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  "])));
  var background = isDarkMode ? dark : light;
  return {
    bg: cx(background, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        pointer-events: none;\n        will-change: transform;\n\n        position: absolute;\n        inset: -10px;\n\n        max-height: 100vh;\n\n        opacity: ", ";\n        background-position:\n          50% 50%,\n          50% 50%;\n        background-size: 300%, 200%;\n        filter: blur(10px) invert(", ");\n\n        animation: ", " 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          ", ";\n          position: absolute;\n\n          content: '';\n\n          inset: 0;\n\n          animation: ", " 100s linear infinite;\n\n          mix-blend-mode: difference;\n          background-attachment: fixed;\n          background-size: 200%, 100%;\n        }\n\n        ", " {\n          transform: scale(2);\n          max-height: 25vh;\n        }\n      "])), isDarkMode ? 0.3 : 0.6, isDarkMode ? 0 : 1, aurora, background, aurora, responsive.mobile)),
    wrapper: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 0;\n      inset: 0;\n      overflow: hidden;\n    "])))
  };
});