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

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

{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/awesome/SpotlightCard/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\n\nexport const CHILDREN_CLASSNAME = 'hover-card';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  container: css`\n    &:hover > .${CHILDREN_CLASSNAME}::after {\n      opacity: 1;\n    }\n  `,\n\n  content: css`\n    z-index: 2;\n\n    flex-grow: 1;\n\n    height: 100%;\n    margin: 1px;\n    border-radius: calc(var(--spotlight-card-border-radius, 12px) - 1px);\n\n    background: ${cssVar.colorBgContainer};\n  `,\n  grid: css`\n    display: grid;\n\n    ${responsive.sm} {\n      display: flex;\n      flex-direction: column;\n    }\n  `,\n  itemContainerDark: css`\n    cursor: pointer;\n\n    position: relative;\n\n    overflow: hidden;\n\n    width: 100%;\n    border-radius: var(--spotlight-card-border-radius, 12px);\n\n    background: color-mix(in srgb, ${cssVar.colorBorderSecondary} 75%, transparent);\n\n    &::before,\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n\n      opacity: 0;\n\n      transition: opacity 500ms;\n    }\n\n    &::before {\n      pointer-events: none;\n      user-select: none;\n      z-index: 3;\n      background: radial-gradient(\n        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),\n        color-mix(in srgb, ${cssVar.colorTextBase} 6%, transparent),\n        transparent 40%\n      );\n    }\n\n    &::after {\n      z-index: 1;\n      background: radial-gradient(\n        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),\n        color-mix(in srgb, ${cssVar.colorTextBase} 40%, transparent),\n        transparent 40%\n      );\n    }\n\n    :hover::before {\n      opacity: 1;\n    }\n  `,\n\n  itemContainerLight: css`\n    cursor: pointer;\n\n    position: relative;\n\n    overflow: hidden;\n\n    width: 100%;\n    border-radius: var(--spotlight-card-border-radius, 12px);\n\n    background: color-mix(in srgb, ${cssVar.colorBorderSecondary} 75%, transparent);\n\n    &::before,\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n\n      opacity: 0;\n\n      transition: opacity 500ms;\n    }\n\n    &::before {\n      pointer-events: none;\n      user-select: none;\n      z-index: 3;\n      background: radial-gradient(\n        var(--spotlight-card-size, 800px) circle at var(--mouse-x) var(--mouse-y),\n        color-mix(in srgb, ${cssVar.colorTextBase} 2%, transparent),\n        transparent 40%\n      );\n    }\n\n    &::after {\n      z-index: 1;\n      background: radial-gradient(\n        calc(var(--spotlight-card-size, 800px) * 0.75) circle at var(--mouse-x) var(--mouse-y),\n        color-mix(in srgb, ${cssVar.colorTextBase} 20%, transparent),\n        transparent 40%\n      );\n    }\n\n    :hover::before {\n      opacity: 1;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,qBAAqB;AAElC,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,WAAW,KAAG;iBACC,mBAAmB;;;;CAKlC,SAAS,KAAG;;;;;;;;;kBASIA,SAAO,iBAAiB;;CAExC,MAAM,KAAG;;;MAGL,WAAW,GAAG;;;;;CAKlB,mBAAmB,KAAG;;;;;;;;;;qCAUaA,SAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;6BAyBpCA,SAAO,cAAc;;;;;;;;;6BASrBA,SAAO,cAAc;;;;;;;;;CAUhD,oBAAoB,KAAG;;;;;;;;;;qCAUYA,SAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;6BAyBpCA,SAAO,cAAc;;;;;;;;;6BASrBA,SAAO,cAAc;;;;;;;;;CASjD,EAAE"}