@vue-ui-kit/ant

Version:
Vue3 UI Kit based on Ant Design
538 lines (495 loc) • 15.9 kB
CSS
@charset "UTF-8";
/**
 * EVirtTable（PCanvasGrid / PCanvasTable）主题变量
 * - 与 PGrid 共用 --p-* 语义变量，保证 Canvas 表格与 DOM 表格同色
 * - 无对应 --p-* 的项使用 storybook theme.css 默认值
 * - e-virt-table 初始化时通过 Config.updateCssVar() 读取 --evt-*
 */
/* Higher specificity than e-virt-table@1.4.x runtime-injected :root defaults. */
:root:root {
  --evt-border-color: var(--p-border-color, #d9d9d9);
  --evt-header-bg-color: var(--p-table-thead-bg-color, #f2f3f6);
  --evt-body-bg-color: var(--p-table-row-bg-color, #fff);
  --evt-stripe-color: var(--p-striped-bg-color, #f2f3f6);
  --evt-highlight-hover-row-color: var(--p-table-row-hover-bg-color, #e6e7ea);
  --evt-select-border-color: var(--p-primary-color, #4096ff);
  /* 可用 --p-select-area-color 覆盖；勿写死以免压过业务/示例 :root */
  --evt-select-area-color: var(--p-select-area-color, rgba(82, 146, 247, 0.1));
  /* 固定列阴影：靠近列边界 → 渐隐末端（宽度由 config.FIXED_COLUMN_SHADOW_WIDTH 控制） */
  --evt-fixed-column-shadow-color: rgba(0, 0, 0, 0.1);
  --evt-fixed-column-shadow-fade-color: rgba(0, 0, 0, 0);
  --evt-sort-icon-color: var(--p-primary-color, #4096ff);
  --evt-required-color: var(--p-danger-color, #f5222d);
  --evt-error-tip-color: var(--p-danger-color, #f5222d);
  --evt-error-tip-icon-color: var(--p-danger-color, #f5222d);
  --evt-readonly-color: var(--p-table-row-bg-color, #fff);
  --evt-scroller-track-color: var(--p-table-row-bg-color, #fff);
  /* Canvas / HTML overlayer 共用文字色（业务可覆盖 --p-text-color） */
  --evt-header-text-color: var(--p-text-color, #000000);
  --evt-body-text-color: var(--p-text-color, #000000);
  --evt-footer-text-color: var(--p-text-color, #000000);
  --evt-readonly-text-color: var(--p-text-color, #000000);
  /* 默认 14px。font 简写必须是「字重 字号 字体」；表头 bold、表体 normal */
  --evt-header-font:
    bold 14px 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --evt-body-font:
    normal 14px 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --evt-scroller-color: #dee0e3;
  --evt-scroller-focus-color: #bbbec4;
  --evt-edit-bg-color: #fcf6ed;
  --evt-footer-bg-color: #fafafa;
  --evt-autofill-point-border-color: #fff;
  --evt-editor-bg-color: #fff;
  --evt-editor-text-color: var(--p-text-color, #000000);
  --evt-context-menu-bg-color: #fff;
  --evt-context-menu-text-color: var(--p-text-color, #000000);
  --evt-context-menu-item-hover-bg-color: #f5f5f5;
}

/* 夜间：背景随 --p-* 传递，仅覆盖 Canvas 专用色 */
html[theme-mode=dark],
:root[data-theme=dark],
:root.dark {
  --evt-header-text-color: var(--p-text-color, #ffffff);
  --evt-body-text-color: var(--p-text-color, #ffffff);
  --evt-footer-text-color: var(--p-text-color, #ffffff);
  --evt-readonly-text-color: var(--p-text-color, #ffffff);
  --evt-scroller-color: #414243;
  --evt-scroller-track-color: #141414;
  --evt-scroller-focus-color: #a3a6ad;
  --evt-edit-bg-color: #141414;
  --evt-footer-bg-color: #262727;
  --evt-autofill-point-border-color: #a3a6ad;
  --evt-editor-bg-color: #434343;
  --evt-editor-text-color: var(--p-text-color, #ffffff);
  --evt-context-menu-bg-color: #141414;
  --evt-context-menu-text-color: var(--p-text-color, #ffffff);
  --evt-context-menu-item-hover-bg-color: #414243;
}

/* #region EVirtTable overlayer cell */
.canvas-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 0 8px;
  /* 与 Canvas BODY_TEXT_COLOR 一致，避免 slot HTML 继承页面色偏深/偏浅 */
  color: var(--evt-body-text-color);
}

/* e-virt-table 给 .canvas-cell 写死 userSelect:none；不改单元格本身，只放开插槽后代以便框选文字 */
.canvas-cell * {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/**
 * HTML overlayer 选中态：SVG 滤镜只给「文字/标签」叠 --evt-select-area-color，
 * 不给透明底再铺一层（底色交给 Canvas 那一次，避免加深）。
 */
.canvas-cell.evt-selected-cell-layer {
  background: transparent;
  filter: url(#evt-select-area-overlay-filter);
}

/* #endregion */
.p-pane {
  background-color: var(--p-theme-bg, #fff);
  padding: 16px;
  border-radius: 4px;
}

.p-search-form--single-row .p-wrapper > .ant-form > .ant-row {
  flex-wrap: nowrap;
}
.p-search-form--single-row .p-wrapper > .ant-form > .ant-row > .ant-col:not(:last-child) {
  flex-shrink: 1;
  min-width: 0;
}
.p-search-form--single-row .p-wrapper > .ant-form > .ant-row > .ant-col:last-child {
  flex: none !important;
  margin-left: auto;
}

.text-slate-5 {
  color: #64748b;
}

/* #region patch for env without unocss/tailwind/windicss */
.w-full {
  width: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.py-4x {
  padding-top: 4px;
  padding-bottom: 4px;
}

.px-2x {
  padding-left: 2px;
  padding-right: 2px;
}

.pl-4x {
  padding-left: 1em;
}

.pl-8 {
  padding-left: 2em;
}

.h-0 {
  height: 0;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-4px {
  gap: 4px;
}

.gap-8px {
  gap: 8px;
}

.gap-12px {
  gap: 12px;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.min-w-0 {
  min-width: 0;
}

.min-h-0 {
  min-height: 0;
}

.pt-8px {
  padding-top: 8px;
}

.px-16px {
  padding-left: 16px;
  padding-right: 16px;
}

.mt-4px {
  margin-top: 4px;
}

.text-right {
  text-align: right;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-hidden {
  overflow: hidden;
}

/* #endregion */
/* #region P family styles */
.p-theme-bg {
  background-color: var(--p-theme-bg, #fff);
}

.p-wrapper .p-form-wrapper {
  z-index: 4;
}
.p-wrapper {
  /* PGrid / PCanvasGrid 底部栏（已选统计、分页）统一间距 */
}
.p-wrapper .p-grid-footer {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 0;
}
.p-wrapper .p-canvas-pagination.ant-pagination {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  margin-left: auto;
}
.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
  border-color: var(--p-border-color, #d9d9d9) !important;
}
.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus {
  border-color: var(--p-primary-color, #4096ff) !important;
}
.p-wrapper .p-error-hang-out .ant-form-item-explain-error {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: none !important;
}
.p-wrapper .ant-form-item-explain-error {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-out 0.3s, transform 0.3s ease-out 0.3s, max-height 0.3s ease-out 0.3s;
}
.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error {
  opacity: 1;
  transform: translateY(0);
  max-height: 100px;
}
.p-wrapper .p-toolbar-wrapper {
  box-shadow: 0 8px var(--p-bg-color, #fff);
  border-radius: 0.5em 0.5em 0 0;
  margin-bottom: -0.5em;
}
.p-wrapper .p-canvas-toolbar-wrapper {
  box-shadow: 0 8px var(--p-theme-bg, #fff);
  border-radius: 0.5em 0.5em 0 0;
}
.p-wrapper .ant-form .ant-form-item {
  margin-bottom: 0;
}
.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label > label:before {
  display: inline-block;
  margin-inline-end: 4px;
  color: var(--p-danger-color, #ff4d4f);
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: "*";
}
.p-wrapper .ant-form .ant-form-item .ant-form-item-label {
  display: flex;
  align-items: start;
  justify-content: flex-end;
}
.p-wrapper .ant-form .ant-form-item .ant-form-item-label > label {
  white-space: break-spaces;
  align-items: flex-start;
  height: fit-content;
  padding-top: 0.36em;
}
.p-wrapper .ant-form .ant-form-item .ant-form-item-label > label:after {
  padding-left: 4px;
  margin-inline-start: unset;
}
.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label {
  justify-content: flex-start;
  font-weight: 600;
}
.p-wrapper .ant-table-wrapper .ant-table {
  background-color: var(--p-table-row-bg-color, #fff);
}
.p-wrapper .ant-table-wrapper .ant-table td.ant-table-cell {
  background-color: var(--p-table-row-bg-color, #fff);
}
.p-wrapper .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
}
.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination {
  margin: unset;
  padding: 16px 0;
}
.p-wrapper .ant-table-wrapper tr.p-grid-row-striped {
  background-color: var(--p-striped-bg-color, #f2f3f6);
}
.p-wrapper .ant-table-wrapper tr.p-grid-row-striped > td.ant-table-cell {
  background-color: var(--p-striped-bg-color, #e6e7ea);
}
.p-wrapper .ant-table-wrapper tr.p-grid-row-striped > td.ant-table-cell.ant-table-cell-row-hover {
  background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
}
.p-wrapper .ant-table-wrapper .ant-table-thead > tr > th {
  background-color: var(--p-table-thead-bg-color, #f2f3f6);
}
.p-wrapper .ant-table-sticky-scroll {
  visibility: hidden;
}
.p-wrapper .ant-table-header.ant-table-sticky-holder:before {
  content: "";
  width: 100%;
  position: absolute;
  height: 22px;
  display: block;
  backdrop-filter: blur(2px);
  top: -16px;
}
.p-wrapper .ant-table-wrapper .ant-pagination {
  gap: 8px;
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-prev,
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-next {
  border: 1px solid var(--p-pagination-border-color, #bbbdbf);
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-total-text {
  margin-inline-end: 0;
  padding-inline-end: 8px;
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item {
  border: 1px solid var(--p-pagination-border-color, transparent);
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active) {
  background-color: var(--p-pagination-bg-color, #fff);
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active) > a {
  color: var(--p-pagination-color, #323335);
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active):hover {
  background-color: var(--p-pagination-hover-bg-color, rgba(0, 0, 0, 0.0588235294));
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active):hover > a {
  color: var(--p-pagination-active-color, rgba(0, 0, 0, 0.8784313725));
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item.ant-pagination-item-active {
  background-color: var(--p-pagination-active-bg-color, #fff);
  border-color: var(--p-pagination-active-border-color, var(--p-primary-color, #4096ff));
}
.p-wrapper .ant-table-wrapper .ant-pagination .ant-pagination-item.ant-pagination-item-active > a {
  color: var(--p-pagination-active-color, var(--p-primary-color, #4096ff));
}
.p-wrapper .h-lack .ant-table-wrapper .ant-table-pagination.ant-pagination {
  padding: unset;
  margin-top: 8px;
}
.p-wrapper .p-inner-scroll > .ant-table-wrapper, .p-wrapper .p-inner-scroll > .p-grid-table-body > .ant-table-wrapper {
  height: 100%;
}
.p-wrapper .p-inner-scroll > .ant-table-wrapper > .ant-spin-nested-loading, .p-wrapper .p-inner-scroll > .p-grid-table-body > .ant-table-wrapper > .ant-spin-nested-loading {
  height: 100%;
}
.p-wrapper .p-inner-scroll > .ant-table-wrapper > .ant-spin-nested-loading > .ant-spin-container, .p-wrapper .p-inner-scroll > .p-grid-table-body > .ant-table-wrapper > .ant-spin-nested-loading > .ant-spin-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.p-wrapper .p-inner-scroll > .ant-table-wrapper > .ant-spin-nested-loading > .ant-spin-container > .ant-table, .p-wrapper .p-inner-scroll > .p-grid-table-body > .ant-table-wrapper > .ant-spin-nested-loading > .ant-spin-container > .ant-table {
  flex: 1;
  height: 0;
  overflow-y: hidden;
  /*border-radius: unset; 修复模糊问题 according to https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-yscroll-and-fixed-height*/
  border-radius: unset;
}
.p-wrapper .p-inner-scroll > .ant-table-wrapper > .ant-spin-nested-loading > .ant-spin-container > .ant-table > .ant-table-container > .ant-table-body, .p-wrapper .p-inner-scroll > .p-grid-table-body > .ant-table-wrapper > .ant-spin-nested-loading > .ant-spin-container > .ant-table > .ant-table-container > .ant-table-body {
  position: relative;
}
.p-wrapper .ant-pagination-options .ant-select {
  width: 100px;
}
.p-wrapper .ant-table-cell:not(.normal-break) {
  word-break: break-all;
}

.p-error-group-tab {
  position: relative;
  overflow: visible;
  color: var(--p-danger-color, #f5222d) !important;
}
.p-error-group-tab:after {
  content: "🏷️";
  position: absolute;
  top: -1em;
  right: 0;
  width: 1em;
  height: 1em;
  font-size: 0.8em;
  animation: heartbeat 2s infinite;
}

.ant-picker-dropdown .ant-picker-footer {
  padding-left: 4px;
}

.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
  border-color: var(--p-border-color, #d9d9d9) !important;
}
.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus {
  border-color: var(--p-primary-color, #4096ff) !important;
}
.p-error-hang-out .ant-form-item-explain-error {
  display: none;
}

.no-error-border {
  border-color: var(--p-border-color, #d9d9d9) !important;
}
.no-error-border:focus {
  border-color: var(--p-primary-color, #4096ff) !important;
}

@media (max-width: 575px) {
  .p-wrapper .ant-form .ant-form-item .ant-form-item-label {
    justify-content: flex-start;
  }
}
.collapsible-card {
  background-color: var(--p-bg-color, #fff);
  border-color: var(--p-border-light-color, #f0f0f0);
}
.collapsible-card .ant-collapse-header {
  padding: 0 12px;
  min-height: 38px;
  display: flex;
  align-items: center;
  font-weight: 600;
  /* 业务侧可用 --collapsible-card-header-bg 覆盖为 --amp-bg-secondary 等 */
  background-color: var(--collapsible-card-header-bg, transparent);
}
.collapsible-card .ant-collapse-header .ant-collapse-expand-icon {
  padding-inline-end: 8px;
}
.collapsible-card .ant-collapse-content {
  border-color: var(--p-border-light-color, #f0f0f0);
}
.collapsible-card .ant-collapse-content .ant-collapse-content-box {
  padding: var(--collapsible-card-body-padding, 12px);
}
.collapsible-card .ant-collapse-item {
  border-color: var(--p-border-light-color, #f0f0f0);
}
.collapsible-card .collapsible-card__expand-icon {
  transition: transform 0.2s;
}

/* #endregion */
/**/
.p-content-align-right.ant-form-item .ant-form-item-control-input-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}

/**/
.p-content-align-center.ant-form-item .ant-form-item-control-input-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  6% {
    transform: scale(1.22);
  }
  12% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.18);
  }
  24% {
    transform: scale(1);
  }
  48% {
    transform: scale(1);
  }
  54% {
    transform: scale(1.22);
  }
  60% {
    transform: scale(1);
  }
  66% {
    transform: scale(1.18);
  }
  72% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}