@opensig/opendesign/lib/data-table/style/index.css

@charset "UTF-8";
.o-table {
  --table-text-size: var(--o-font_size-text1);
  --table-text-height: var(--o-line_height-text1);
  --table-head-text-size: var(--table-text-size);
  --table-head-text-height: var(--table-text-height);
  --table-head-color: var(--o-color-info2);
  --table-cell-color: var(--o-color-info1);
  --table-disabled-cell-color: var(--o-color-info3);
  --table-fixed-head-shadow: var(--o-shadow-1);
  --table-fixed-col-shadow-size: 16px;
  --table-fixed-col-shadow-gradient:
    rgba(var(--o-grey-14), 0.1), rgba(var(--o-grey-14), 0.045) 41%, rgba(var(--o-grey-14), 0.022) 60%, rgba(var(--o-grey-14), 0) 100%;
  --table-tip-text-size: var(--o-font_size-tip1);
  --table-tip-text-height: var(--o-line_height-tip1);
  --table-tip-color: var(--o-color-info3);
  --table-head-bg: var(--o-color-control5);
  --table-row-hover: var(--o-color-control2-light);
  --table-row-active: var(--o-color-control3-light);
  --table-border-width: 1px;
  --table-border: var(--table-border-width) solid var(--o-color-control4);
  --table-loading-mask: var(--o-color-mask2);
  --table-loading-color: var(--o-color-info2);
  --table-body-min-height: 200px;
  --table-bg-color: var(--o-color-control5);
  --table-disabled-bg-color: var(--o-color-control4-light);
  --table-expand-bg-color: var(--o-color-fill3);
  --table-stripe-bg-color: rgba(var(--o-color-control2-light-raw), 0.4);
  --table-radius: var(--o-radius_control-m);
  --table-head-cell-height: auto;
  --table-cell-height: auto;
  --table-head-cell-padding-x: 16px;
  --table-head-cell-padding-y: 12px;
  --table-cell-padding-x: 16px;
  --table-cell-padding-y: 12px;
  --table-head-cell-padding: var(--table-head-cell-padding-y) var(--table-head-cell-padding-x);
  --table-cell-padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  --table-edge-padding: 32px;
  --table-expand-cell-padding: 32px;
  --table-column-resizer-width: 8px;
  --table-row-icon-size: var(--o-icon_size-m);
  --table-row-icon-gap: 8px;
}

.o-table-small {
  --table-text-size: var(--o-font_size-tip1);
  --table-text-height: var(--o-line_height-tip1);
  --table-head-text-size: var(--table-text-size);
  --table-head-text-height: var(--table-text-height);
  --table-radius: var(--o-radius_control-m);
  --table-head-cell-padding-y: 8px;
  --table-cell-padding-y: 8px;
  --table-edge-padding: 16px;
  --table-expand-cell-padding: 24px;
}

[data-o-theme$=".dark"] .o-table {
  --table-fixed-col-shadow-gradient: rgba(var(--o-grey-1), 0.1), rgba(var(--o-grey-1), 0.045) 80%, rgba(var(--o-grey-1), 0.022) 100%;
}

.o-table {
  position: relative;
  /* 水平外边框宽度 */
  --h-frame-border-width: 0px;
  /* 垂直外边框宽度 */
  --v-frame-border-width: 0px;
  /* 水平内边框宽度 */
  --h-border-width: 0px;
}
.o-table table {
  width: 100%;
  border-spacing: 0;
}
.o-table thead {
  position: relative;
}
.o-table thead:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: var(--o-color-main2, linear-gradient(to right, var(--o-color-control4), var(--o-color-control4)));
  background-size: 100% 1px;
}
@supports (-webkit-overflow-scrolling: touch) {
  .o-table thead:after {
    display: none;
  }
  .o-table thead th {
    border-bottom: var(--table-border);
  }
}
.o-table th,
.o-table td {
  box-sizing: border-box;
}
.o-table th,
.o-table .o-table-column-as-header {
  text-align: left;
  font-weight: 600;
  background-color: var(--table-head-bg);
  padding: var(--table-head-cell-padding);
  font-size: var(--table-head-text-size);
  line-height: var(--table-head-text-height);
  color: var(--table-head-color);
  height: var(--table-head-cell-height);
}
.o-table td {
  padding: var(--table-cell-padding);
  font-size: var(--table-text-size);
  line-height: var(--table-text-height);
  background-color: var(--table-bg-color);
  color: var(--table-cell-color);
  height: var(--table-cell-height);
}
.o-table .o-table-row-disabled td {
  background-color: var(--table-disabled-bg-color);
  color: var(--table-disabled-cell-color);
}
.o-table th:first-child,
.o-table td:first-child {
  padding-left: var(--table-edge-padding);
}
.o-table th:last-child,
.o-table td:last-child {
  padding-right: var(--table-edge-padding);
}

.o-table-stripe tbody:not(:has([rowspan])) tr:not(.o-table-highlight):nth-child(even) td {
  background-image: linear-gradient(to right, var(--table-stripe-bg-color), var(--table-stripe-bg-color));
}

@media (hover: hover) {
  td.o-table-highlight,
  .o-table-highlight td {
    background-color: var(--table-row-hover);
  }
}
@media (hover: none) {
  td.o-table-highlight,
  .o-table-highlight td {
    background-color: var(--table-row-active);
  }
}

.o-table-wrap {
  border-radius: var(--table-radius);
  overflow: hidden;
}

.o-table thead:has([rowspan]),
.o-table thead:has([colspan]) {
  --h-border-width: var(--table-border-width);
}
.o-table thead:has([rowspan]) tr:not(:last-child) th:not(.o-table-last-header-row-cell),
.o-table thead:has([colspan]) tr:not(:last-child) th:not(.o-table-last-header-row-cell) {
  border-bottom: var(--table-border);
}
.o-table thead:has([rowspan]) th,
.o-table thead:has([colspan]) th {
  border-left: var(--table-border);
}
.o-table thead:has([rowspan]) th.o-cell-first-col,
.o-table thead:has([colspan]) th.o-cell-first-col {
  border-left: none;
}

.o-table-border-all,
.o-table-border-frame {
  border: var(--table-border);
  --h-frame-border-width: var(--table-border-width);
  --v-frame-border-width: var(--table-border-width);
}

.o-table-border-all,
.o-table-border-row {
  --h-border-width: var(--table-border-width);
}
.o-table-border-all td,
.o-table-border-row td {
  border-bottom: var(--table-border);
}

.o-table-border-all tr.o-row-last td,
.o-table-border-frame tr.o-row-last td,
.o-table-border-row tr.o-row-last td {
  border-bottom-color: transparent;
}
.o-table-border-all td.o-cell-last-row,
.o-table-border-frame td.o-cell-last-row,
.o-table-border-row td.o-cell-last-row {
  border-bottom-color: transparent;
}

.o-table-border-all td,
.o-table-border-column td {
  border-right: var(--table-border);
}
.o-table-border-all td.o-cell-last-col,
.o-table-border-column td.o-cell-last-col {
  border-right-color: transparent;
}

.o-table-tip-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-tip-text-size);
  line-height: var(--table-tip-text-height);
  color: var(--table-tip-color);
  min-height: var(--table-body-min-height);
}

.o-table-loading-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-tip-text-size);
  line-height: var(--table-tip-text-height);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--table-loading-mask);
  color: var(--table-loading-color);
  border-radius: var(--table-radius);
}

.o-table-loading-label {
  margin-left: 8px;
}

@media (max-width: 1680px) {
  .o-table-medium {
    --table-text-size: var(--o-font_size-tip1);
    --table-text-height: var(--o-line_height-tip1);
    --table-head-cell-padding-y: 8px;
    --table-cell-padding-y: 8px;
    --table-edge-padding: 24px;
    --table-expand-cell-padding: 24px;
    --table-row-icon-size: var(--o-icon_size-s);
  }
}
@media (max-width: 1200px) {
  .o-table-medium {
    --table-radius: var(--o-radius_control-s);
    --table-head-cell-padding-x: 12px;
    --table-cell-padding-x: 12px;
    --table-edge-padding: 20px;
    --table-expand-cell-padding: 16px;
  }
}
@media (max-width: 840px) {
  .o-table-medium {
    --table-text-size: var(--o-font_size-tip2);
    --table-text-height: var(--o-line_height-tip2);
    --table-head-cell-padding-x: 8px;
    --table-cell-padding-x: 8px;
    --table-edge-padding: 8px;
    --table-expand-cell-padding: 12px;
    --table-row-icon-size: var(--o-icon_size-m);
  }
}

@media (max-width: 1680px) {
  .o-table-small {
    --table-expand-cell-padding: 16px;
  }
}
@media (max-width: 1200px) {
  .o-table-small {
    --table-text-size: var(--o-font_size-tip2);
    --table-text-height: var(--o-line_height-tip2);
    --table-head-cell-padding-x: 8px;
    --table-cell-padding-x: 8px;
    --table-edge-padding: 8px;
    --table-expand-cell-padding: 12px;
    --table-radius: var(--o-radius_control-s);
  }
}

.o-data-table {
  --table-filter-trigger-gap: 4px;
  --table-filter-trigger-size: 16px;
}

.o-table-header-fill {
  --table-head-bg: var(--o-color-control3-light);
  --table-head-border-bottom: var(--table-border-width) solid var(--table-head-bg);
}

.o-data-table-column-filter-popup {
  --popup-bg-color: var(--o-color-control5-light);
  --popup-radius: var(--o-radius-xs);
  --popup-shadow: var(--o-shadow-2);
  --table-filter-popup-width: 192px;
}

.o-data-table-column-filter-wrapper {
  --table-filter-option-list-max-height-default: 256px;
}

.o-data-table {
  border-radius: var(--table-radius);
  overflow: hidden;
  position: relative;
}
.o-data-table .o-table-scroll-bar .o-scrollbar-x {
  width: calc(100% - var(--table-edge-padding) * 2);
}
.o-data-table .o-table-scroll-bar .o-scrollbar-y {
  margin: calc(var(--table-header-height) * 1px + var(--table-cell-padding-y)) 0 var(--table-cell-padding-y) 0;
  height: calc(100% - var(--table-header-height) * 1px - var(--table-cell-padding-y) * 2);
}
.o-data-table .o-table-scroll-bar .o-scrollbar-rail {
  z-index: 4;
}
.o-data-table .o-table-wrap {
  height: var(--table-height);
  max-height: var(--table-max-height);
  overflow: auto;
  position: relative;
  border-radius: unset;
}
.o-data-table .o-table-header {
  position: sticky;
  top: 0;
  z-index: 2;
  transition: box-shadow var(--o-duration-s) var(--o-easing-standard);
  background-color: var(--table-head-bg);
}
.o-data-table.o-table-border-all .o-table-header, .o-data-table.o-table-border-frame .o-table-header {
  top: 0;
}
.o-data-table.is-overflow-top:not(.o-table-header-split-line) .o-table-header {
  box-shadow: var(--table-fixed-head-shadow);
}
.o-data-table .o-table-body-cell {
  position: relative;
}
.o-data-table .o-data-table-header-divider-v {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: calc(0px - var(--table-border-width));
  right: calc(0px - var(--table-border-width));
  width: 1px;
  background-image: var(--o-color-main2, linear-gradient(to right, var(--o-color-control4), var(--o-color-control4)));
  background-size: 1px 100%;
}
.o-data-table .o-table-header:after {
  display: none;
}
.o-data-table .o-data-table-header-divider-h {
  position: sticky;
  z-index: 3;
  top: calc(var(--table-header-height) * 1px);
  left: 0;
  right: 0;
  height: 1px;
  background-image: var(--o-color-main2, linear-gradient(to right, var(--o-color-control4), var(--o-color-control4)));
  background-size: 100% 1px;
}
.o-data-table.o-table-header-fill th {
  border-bottom: var(--table-head-border-bottom);
}
.o-data-table.o-table-header-split-line .o-table-column-as-header + .o-table-body-cell {
  border-left-color: transparent;
}
.o-data-table .o-table-expand-cell {
  background-color: var(--table-expand-bg-color);
}
.o-data-table .o-table-cell__inner {
  display: flex;
  align-items: center;
  word-break: break-word;
}
.o-data-table .o-table-cell-tooltip .o-table-cell__inner-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--cell-max-row);
  line-clamp: var(--cell-max-row);
  -webkit-box-orient: vertical;
}
.o-data-table .o-table-header-cell {
  white-space: nowrap;
}
.o-data-table .o-table-header-cell .o-svg-icon {
  font-size: var(--o-icon_size-xs);
}
.o-data-table .o-table-cell-wrappable {
  white-space: normal;
}
.o-data-table .o-table-header-cell .o-table-cell__inner {
  padding: var(--table-head-cell-padding);
}
.o-data-table .o-table-body-cell .o-table-cell__inner {
  padding: var(--table-cell-padding);
}
.o-data-table .o-table-cell .o-table-expand-cell__inner {
  padding: var(--table-expand-cell-padding);
}
.o-data-table .o-table-cell {
  position: relative;
  padding: unset !important;
}
.o-data-table .o-table-cell.o-cell-first-col {
  padding-left: unset;
}
.o-data-table .o-table-cell.o-cell-first-col .o-table-cell__inner {
  padding-left: var(--table-edge-padding);
}
.o-data-table .o-table-cell.o-cell-last-col {
  padding-right: unset;
}
.o-data-table .o-table-cell.o-cell-last-col .o-table-cell__inner {
  padding-right: var(--table-edge-padding);
}
.o-data-table .o-table-cell.o-cell-last-col .o-table-expand-cell__inner {
  padding-right: var(--table-expand-cell-padding);
}
.o-data-table.o-table-border-all td, .o-data-table.o-table-border-column td {
  border-left: var(--table-border);
  border-right: none;
}
.o-data-table.o-table-border-all td.o-cell-first-col, .o-data-table.o-table-border-column td.o-cell-first-col {
  border-left: none;
}
.o-data-table.o-table-border-all.is-overflow-right .o-table-cell-first-right-fixed, .o-data-table.o-table-border-column.is-overflow-right .o-table-cell-first-right-fixed {
  border-left: none;
}
.o-data-table .o-table-cell-fixed {
  position: sticky;
  position: -webkit-sticky;
  z-index: 1;
}
.o-data-table .o-data-table-left-shadow,
.o-data-table .o-data-table-right-shadow {
  z-index: 3;
}
.o-data-table .o-table-cell-last-left-fixed:after,
.o-data-table .o-table-cell-first-right-fixed:before,
.o-data-table .o-data-table-left-shadow,
.o-data-table .o-data-table-right-shadow {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(0px - var(--h-border-width));
  width: var(--table-fixed-col-shadow-size);
  display: none;
}
.o-data-table .o-table-cell-last-left-fixed:after,
.o-data-table .o-data-table-left-shadow {
  background: linear-gradient(90deg, var(--table-fixed-col-shadow-gradient));
}
.o-data-table .o-table-cell-last-left-fixed:after {
  right: 0;
  transform: translateX(100%);
}
.o-data-table .o-data-table-left-shadow {
  left: 0;
}
.o-data-table .o-table-cell-first-right-fixed:before,
.o-data-table .o-data-table-right-shadow {
  background: linear-gradient(-90deg, var(--table-fixed-col-shadow-gradient));
}
.o-data-table .o-table-cell-first-right-fixed:before {
  left: 0;
  transform: translateX(-100%);
}
.o-data-table .o-data-table-right-shadow {
  right: 0;
}
.o-data-table.is-overflow-left .o-table-cell-last-left-fixed:after {
  display: block;
}
.o-data-table.is-overflow-left .o-data-table-left-shadow {
  display: block;
}
.o-data-table.is-overflow-right .o-table-cell-first-right-fixed:before {
  display: block;
}
.o-data-table.is-overflow-right .o-data-table-right-shadow {
  display: block;
}
.o-data-table .empty-placeholder {
  height: calc(var(--table-height) - var(--table-header-height) * 1px - var(--h-border-width) * 2);
  min-height: calc(var(--table-body-min-height) - var(--table-header-height) * 1px - var(--h-border-width) * 2);
}
.o-data-table .o-table-loading-wrap,
.o-data-table .o-table-tip-wrap {
  min-height: unset;
  position: absolute;
  top: calc(var(--table-header-height) * 1px);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--table-bg-color);
  border-radius: 0;
}
.o-data-table .o-table-column-resizer__indicator {
  position: absolute;
  left: calc(var(--table-column-resizer-width) / 2 - var(--table-border-width) / 2);
  z-index: 3;
  width: var(--table-border-width);
  height: var(--table-height);
  border-left: var(--table-border-width) dashed var(--o-color-info4);
}
.o-data-table .o-table-column-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  right: calc(0px - var(--table-column-resizer-width) / 2);
  width: var(--table-column-resizer-width);
}
@media (hover: hover) {
  .o-data-table .o-table-column-resizer:hover {
    cursor: col-resize;
  }
}
@media (hover: hover) {
  .o-data-table .o-table-header:where(:not(:has([rowspan])):not(:has([colspan]))) .o-table-column-resizer:hover:after {
    display: block;
    content: "";
    position: absolute;
    left: calc(var(--table-column-resizer-width) / 2);
    top: 0;
    bottom: calc(0px - var(--table-border-width));
    z-index: 3;
    width: var(--table-border-width);
    border-left: var(--table-border);
  }
}
.o-data-table .o-cell-last-col .o-table-column-resizer {
  width: calc(var(--table-column-resizer-width) / 2);
  right: 0;
}

.o-data-table-info__trigger,
.o-data-table-column-filter__trigger,
.o-data-table-sorter {
  margin-left: var(--table-filter-trigger-gap);
  font-size: var(--table-filter-trigger-size);
  line-height: var(--table-filter-trigger-size);
  width: var(--table-filter-trigger-size);
  height: var(--table-filter-trigger-size);
}
@media (hover: hover) {
  .o-data-table-info__trigger:hover,
  .o-data-table-column-filter__trigger:hover,
  .o-data-table-sorter:hover {
    cursor: pointer;
  }
  .o-data-table-info__trigger:hover.disabled,
  .o-data-table-column-filter__trigger:hover.disabled,
  .o-data-table-sorter:hover.disabled {
    cursor: not-allowed;
  }
}
.o-data-table-info__trigger.active, .o-data-table-info__trigger.o-data-table-sorter-asc .sort_svg__up-arrow, .o-data-table-info__trigger.o-data-table-sorter-desc .sort_svg__down-arrow,
.o-data-table-column-filter__trigger.active,
.o-data-table-column-filter__trigger.o-data-table-sorter-asc .sort_svg__up-arrow,
.o-data-table-column-filter__trigger.o-data-table-sorter-desc .sort_svg__down-arrow,
.o-data-table-sorter.active,
.o-data-table-sorter.o-data-table-sorter-asc .sort_svg__up-arrow,
.o-data-table-sorter.o-data-table-sorter-desc .sort_svg__down-arrow {
  color: var(--o-color-primary1);
}

.o-data-table-column-filter-popup {
  width: var(--table-filter-popup-width);
}

.o-data-table-column-filter__input-container {
  padding: 16px 16px 4px 16px;
}
@media (max-width: 840px) {
  .o-data-table-column-filter__input-container {
    padding: 4px 0;
  }
}
.o-data-table-column-filter__input-container .o-input {
  width: 100%;
}

.o-data-table-column-filter__input-icon {
  font-size: var(--table-text-size);
}

.o-data-table-column-filter__options-container .o-option-list {
  --option-list-max-height-default: var(--table-filter-option-list-max-height-default);
}
.o-data-table-column-filter__options-container .o-option {
  --option-text-size: var(--table-text-size);
  --option-text-height: var(--table-text-height);
}
.o-data-table-column-filter__options-container .o-checkbox {
  --checkbox-text-size: var(--table-text-size);
  --checkbox-text-height: var(--table-text-height);
}
.o-data-table-column-filter__options-container .o-data-table-column-filter__empty {
  text-align: center;
  color: var(--o-color-info4);
  padding: 12px 0;
  font-size: var(--table-text-size);
  line-height: var(--table-text-height);
}
@media (max-width: 840px) {
  .o-data-table-column-filter__options-container .o-option-list {
    padding: 0;
  }
  .o-data-table-column-filter__options-container .o-option-multiple {
    border-radius: 0;
    --option-padding: 12px 0;
    --option-gap: 0;
    position: relative;
  }
  .o-data-table-column-filter__options-container .o-option-multiple:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--o-color-control4);
  }
  .o-data-table-column-filter__options-container .o-checkbox {
    width: 100%;
  }
  .o-data-table-column-filter__options-container .o-checkbox-wrap {
    width: 100%;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .o-data-table-column-filter__options-container .o-checkbox-label {
    margin-left: 0;
  }
}

.o-data-table-column-filter__divider {
  --o-divider-gap: 4px;
}

.o-data-table-column-filter__footer {
  padding: 4px 8px 8px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: var(--table-text-size);
  line-height: var(--table-text-height);
}

.o-table-row-icon-placeholder {
  width: var(--table-row-icon-size);
  margin-right: var(--table-row-icon-gap);
  visibility: hidden;
}

.o-table-row-expand-trigger {
  font-size: var(--table-row-icon-size);
  margin-right: var(--table-row-icon-gap);
  visibility: hidden;
  transition: transform var(--o-duration-s) var(--o-easing-standard);
}
.o-table-row-expand-trigger.expandable {
  visibility: visible;
}
@media (hover: hover) {
  .o-table-row-expand-trigger.expandable:hover {
    cursor: pointer;
  }
}
.o-table-row-expand-trigger.loading {
  visibility: visible;
}
.o-table-row-expand-trigger.expanded {
  transform: rotate(90deg);
}

.o-table-row-checkbox {
  --checkbox-input-wrap-size: var(--table-row-icon-size);
  --checkbox-label-gap: var(--table-row-icon-gap);
}