@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 10.2 kB
Source Map (JSON)
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/**\n * A content card sitting on the workspace.\n *\n * Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.\n * The workspace is already that container, so a card inside it steps up to\n * `colorBgElevated` and `colorBorder`.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n card: css`\n &&,\n &&:hover {\n border: 1px solid ${cssVar.colorBorder};\n border-radius: ${cssVar.borderRadiusLG};\n background: ${cssVar.colorBgElevated};\n box-shadow: ${cssVar.boxShadowTertiary};\n }\n `,\n chart: css`\n min-inline-size: 0;\n `,\n /** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */\n clip: css`\n overflow: hidden;\n `,\n loading: css`\n padding-block: 4px 8px;\n `,\n arrow: css`\n flex: none;\n\n margin-block-start: 2px;\n margin-inline-start: auto;\n\n color: ${cssVar.colorTextTertiary};\n\n transition:\n color 150ms ease-out,\n transform 150ms ease-out;\n `,\n bleed: css`\n && th,\n && td {\n padding-inline: 16px;\n }\n\n && th {\n white-space: nowrap;\n }\n `,\n body: css`\n --surface-pad-inline: 16px;\n --surface-pad-block: 16px;\n\n padding: 16px;\n `,\n /** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */\n content: css`\n min-inline-size: 0;\n\n /* Table cells default to colorBgContainer, a step darker than this card.\n Ant Design paints that color on .ant-table itself, so the body stays dark\n even after the cells are cleared. */\n && .ant-table,\n && th,\n && td {\n background: transparent;\n }\n\n && .ant-table-css-var,\n && .ant-table-wrapper {\n --ant-table-border-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n --ant-table-row-hover-bg: color-mix(\n in srgb,\n ${cssVar.colorText} 6%,\n ${cssVar.colorBgElevated}\n );\n }\n\n && th {\n font-weight: 500;\n color: ${cssVar.colorTextSecondary};\n white-space: nowrap;\n\n background: ${cssVar.colorBgElevated};\n box-shadow: inset 0 -1px 0 color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n }\n\n /* Pinned body cells inherit the transparent body, so a scrolled cell paints\n straight through them. Frost with the card color. Header pins stay the\n same solid fill as the rest of the header — a translucent header reads\n as a lighter strip in dark mode. */\n && td.ant-table-cell-fix-start,\n && td.ant-table-cell-fix-end {\n background: color-mix(in srgb, ${cssVar.colorBgElevated} 82%, transparent);\n backdrop-filter: blur(12px);\n }\n\n && td.ant-table-cell-fix-end-shadow-show::after {\n background: linear-gradient(\n to left,\n color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n transparent\n );\n backdrop-filter: blur(8px);\n }\n\n && td.ant-table-cell-fix-start-shadow-show::after {\n background: linear-gradient(\n to right,\n color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n transparent\n );\n backdrop-filter: blur(8px);\n }\n\n [dir='rtl'] && td.ant-table-cell-fix-end-shadow-show::after {\n background: linear-gradient(\n to right,\n color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n transparent\n );\n }\n\n [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {\n background: linear-gradient(\n to left,\n color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n transparent\n );\n }\n\n && td {\n border-block-end-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n }\n\n && tr:hover > td,\n && .ant-table-tbody > tr.ant-table-row:hover > td {\n background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n }\n\n /* base-ui Table pins with inline position:sticky, not .ant-table-cell-fix-*.\n The transparent body rule above would let scrolled text show through. */\n && td[style*='sticky'] {\n background: ${cssVar.colorBgElevated};\n }\n\n && tr:hover > td[style*='sticky'] {\n background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n }\n `,\n /** Whole card answers hover when its header drills into another page. */\n cardLinked: css`\n &&:hover,\n &&:focus-within {\n border-color: color-mix(in srgb, ${cssVar.colorText} 28%, transparent);\n }\n\n &&:hover [data-surface-arrow] {\n transform: translate(1px, -1px);\n color: ${cssVar.colorText};\n }\n `,\n desc: css`\n margin-block-start: 2px;\n\n font-size: 13px;\n font-weight: 400;\n line-height: 1.45;\n color: ${cssVar.colorTextSecondary};\n `,\n extra: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n `,\n header: css`\n display: flex;\n gap: 12px;\n align-items: center;\n justify-content: space-between;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n heading: css`\n min-inline-size: 0;\n `,\n headingLink: css`\n display: flex;\n flex: 1;\n gap: 12px;\n align-items: flex-start;\n\n min-inline-size: 0;\n\n color: inherit;\n text-decoration: none;\n\n &:hover {\n color: inherit;\n }\n `,\n /**\n * A table inside padded card body meets the card's left, right, and bottom\n * edges. A table that is the only body content also meets the header.\n * Padding amounts come from `--surface-pad-*` on the same element.\n */\n tableBleed: css`\n /* A table nested in a cell keeps the cell's own inset. */\n && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) {\n width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n }\n\n && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):last-child {\n margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n }\n\n && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):first-child:last-child {\n margin-block-start: calc(-1 * var(--surface-pad-block, 16px));\n }\n\n /* ProTable keeps its search and toolbar in the padding. The table itself\n meets the card's left, right, and bottom edges. Lower-specificity\n selectors stay above the :has(th/td) rules for stylelint. */\n && .ant-table-css-var,\n && .ant-table-wrapper {\n --ant-table-cell-padding-inline: var(--surface-pad-inline, 16px);\n --ant-table-cell-padding-inline-md: var(--surface-pad-inline, 16px);\n --ant-table-cell-padding-inline-sm: var(--surface-pad-inline, 16px);\n --ant-table-header-border-radius: 0;\n }\n\n && .ant-table-wrapper {\n width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n max-width: none;\n margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n }\n\n /* A plain table that is the card body meets the header and the bottom edge.\n Its own corner radius would otherwise float inside the card padding. */\n && > .lobe-flex:only-child > .ant-table-wrapper:only-child {\n margin-block: calc(-1 * var(--surface-pad-block, 16px));\n }\n\n && .ant-pro-table:last-child {\n margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n }\n\n && .ant-table-wrapper .ant-table,\n && .ant-table-wrapper .ant-table-container,\n && .ant-table-thead > tr > th,\n && .ant-table-thead > tr > th:first-child,\n && .ant-table-thead > tr > th:last-child {\n border-radius: 0;\n }\n\n && .ant-table-wrapper .ant-table-cell {\n padding-inline: var(--surface-pad-inline, 16px);\n }\n\n && .ant-table-wrapper .ant-pagination {\n margin-block: 0;\n padding-block: 12px;\n padding-inline: var(--surface-pad-inline, 16px);\n }\n\n && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) th,\n && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) td {\n padding-inline: var(--surface-pad-inline, 16px);\n }\n\n /* The root's negative bottom margin includes this sibling. Without block\n padding the pager sits on the card edge. Same inset as the ant pagination. */\n &&\n :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper]))\n > :not([data-table-wrapper]) {\n margin-block: 0;\n padding-block: 12px;\n padding-inline: var(--surface-pad-inline, 16px);\n }\n `,\n title: css`\n overflow: hidden;\n\n min-inline-size: 0;\n\n font-size: 14px;\n font-weight: 500;\n line-height: 1.4;\n color: ${cssVar.colorText};\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n}));\n"],"mappings":";;;;;;;;;AASA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;0BAGe,OAAO,YAAY;uBACtB,OAAO,eAAe;oBACzB,OAAO,gBAAgB;oBACvB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;CAIV,MAAM,GAAG;;;CAGT,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;aAMC,OAAO,kBAAkB;;;;;;CAMpC,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;CAOT,SAAS,GAAG;;;;;;;;;;;;;;qDAcuC,OAAO,UAAU;;;UAG5D,OAAO,UAAU;UACjB,OAAO,gBAAgB;;;;;;eAMlB,OAAO,mBAAmB;;;oBAGrB,OAAO,gBAAgB;sDACW,OAAO,UAAU;;;;;;;;;uCAShC,OAAO,gBAAgB;;;;;;;6BAOjC,OAAO,gBAAgB;;;;;;;;;6BASvB,OAAO,gBAAgB;;;;;;;;;6BASvB,OAAO,gBAAgB;;;;;;;;6BAQvB,OAAO,gBAAgB;;;;;;mDAMD,OAAO,UAAU;;;;;uCAK7B,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;;;oBAMlE,OAAO,gBAAgB;;;;uCAIJ,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;CAIpF,YAAY,GAAG;;;yCAGwB,OAAO,UAAU;;;;;eAK3C,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;;;CAMV,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,SAAS,GAAG;;;CAGZ,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;CAoBhB,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ef,OAAO,GAAG;;;;;;;;aAQC,OAAO,UAAU;;;;AAI9B,EAAE"}