@lobehub/ui/es/Image/style.mjs.map

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

{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  // Bare viewer controls float directly over arbitrary image content; the\n  // theme-side halo (light halo around dark icons in light mode and vice\n  // versa) is what keeps them readable without a container panel.\n  const controlHalo = `drop-shadow(0 0 2px ${cssVar.colorBgLayout}) drop-shadow(0 1px 6px ${cssVar.colorBgLayout})`;\n  return {\n    actionsHidden: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 0;\n    `,\n    actionsVisible: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 1;\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      ${lobeStaticStylish.variantFilledWithoutHover};\n    `,\n    image: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: auto;\n      height: auto;\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    previewable: css`\n      cursor: zoom-in;\n    `,\n    root: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      line-height: 1;\n\n      &:hover {\n        .actions-hidden {\n          opacity: 1;\n        }\n      }\n    `,\n    toolbar: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-end: 16px;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n    `,\n    // The glass lives on the icon row, not the toolbar itself: tooltips and\n    // the more-menu portal into the toolbar element, and an ancestor\n    // backdrop-filter/filter would distort those popups too.\n    toolbarRow: css`\n      padding-block: 4px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);\n      backdrop-filter: blur(12px);\n    `,\n    actualSizeCorner: css`\n      /* view-box, so the per-corner transform-origin below is read in the 24x24\n         user space the path coordinates are written in rather than the rendered\n         pixel box. */\n      transform-box: view-box;\n      transition: transform 300ms ${cssVar.motionEaseInOut};\n\n      [data-actual-size='fit'] & {\n        transform: rotate(180deg);\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n\n    toolbarPercentage: css`\n      user-select: none;\n\n      /* Fixed, not min-width: this is a readout that changes digit count as it\n         zooms (9% → 100% → 800%), and letting it size to content shifts every\n         control beside it on each wheel tick. Wide enough for four digits. */\n      width: 56px;\n      height: 36px;\n\n      font-size: 12px;\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorTextTertiary};\n    `,\n\n    viewerBackdrop: css`\n      position: fixed;\n      inset: 0;\n\n      opacity: 0;\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n      backdrop-filter: blur(8px);\n    `,\n    viewerChrome: css`\n      pointer-events: none;\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n    `,\n    viewerChromeIdle: css`\n      pointer-events: none;\n      position: absolute;\n      inset: 0;\n      transition:\n        opacity 200ms ${cssVar.motionEaseOut},\n        visibility 200ms;\n\n      &[data-idle-hidden] {\n        visibility: hidden;\n        opacity: 0;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    viewerClose: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-start: 16px;\n      inset-inline-end: 16px;\n\n      filter: ${controlHalo};\n    `,\n    viewerCounter: css`\n      pointer-events: none;\n\n      position: absolute;\n      inset-block-start: 16px;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      padding-block: 4px;\n      padding-inline: 12px;\n      border-radius: 999px;\n\n      font-size: 12px;\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorTextSecondary};\n\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);\n      backdrop-filter: blur(12px);\n    `,\n    viewerImage: css`\n      will-change: transform;\n      cursor: zoom-out;\n      user-select: none;\n\n      position: absolute;\n      transform-origin: center center;\n\n      object-fit: contain;\n\n      -webkit-user-drag: none;\n    `,\n    viewerNavButton: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n\n      filter: ${controlHalo};\n    `,\n    viewerNavNext: css`\n      inset-inline-end: 16px;\n    `,\n    viewerNavPrev: css`\n      inset-inline-start: 16px;\n    `,\n    viewerPopup: css`\n      position: fixed;\n      inset: 0;\n      overflow: hidden;\n      outline: none;\n    `,\n    wrapper: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      height: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAI5D,MAAM,cAAc,uBAAuB,OAAO,cAAc,0BAA0B,OAAO,cAAc;CAC/G,OAAO;EACL,eAAe,GAAG;;;;;;;;;;EAUlB,gBAAgB,GAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,GAAG;;;;;;;;EAQV,UAAUA,cAAkB;EAC5B,aAAa,GAAG;;;EAGhB,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;;;;;;;;;EAUvC,SAAS,GAAG;;;;;;;;EAWZ,YAAY,GAAG;;;;;uCAKoB,OAAO,cAAc;;;EAGxD,kBAAkB,GAAG;;;;;oCAKW,OAAO,gBAAgB;;;;;;;;;;EAWvD,mBAAmB,GAAG;;;;;;;;;;;eAWX,OAAO,kBAAkB;;EAGpC,gBAAgB,GAAG;;;;;uCAKgB,OAAO,cAAc;;;EAGxD,cAAc,GAAG;;;;;;EAMjB,kBAAkB,GAAG;;;;;wBAKD,OAAO,cAAc;;;;;;;;;;;;EAYzC,aAAa,GAAG;;;;;;;gBAOJ,YAAY;;EAExB,eAAe,GAAG;;;;;;;;;;;;;;eAcP,OAAO,mBAAmB;;uCAEF,OAAO,cAAc;;;EAGxD,aAAa,GAAG;;;;;;;;;;;;EAYhB,iBAAiB,GAAG;;;;;;;gBAOR,YAAY;;EAExB,eAAe,GAAG;;;EAGlB,eAAe,GAAG;;;EAGlB,aAAa,GAAG;;;;;;EAMhB,SAAS,GAAG;;;;;;CAMd;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}