@zhsz/cool-design-crud/lib/index.css

html:root {
  --vxe-icon-background-color: var(--td-bg-color-container, #fff);
  --vxe-font-color: #606266;
  --vxe-primary-color: var(--td-brand-color, #409eff);
  --vxe-success-color: #67c23a;
  --vxe-info-color: #909399;
  --vxe-warning-color: #e6a23c;
  --vxe-danger-color: #f56c6c;
  --vxe-font-lighten-color: #797b80;
  --vxe-primary-lighten-color: #73b8ff;
  --vxe-success-lighten-color: #85cf60;
  --vxe-info-lighten-color: #abadb1;
  --vxe-warning-lighten-color: #ecb869;
  --vxe-danger-lighten-color: #f89c9c;
  --vxe-font-disabled-color: #bfbfbf;
  --vxe-primary-disabled-color: #a6d2ff;
  --vxe-success-disabled-color: #a3db87;
  --vxe-info-disabled-color: #c5c7ca;
  --vxe-warning-disabled-color: #f2cd96;
  --vxe-danger-disabled-color: #fbcccc;
  --vxe-input-border-color: #dcdfe6;
  --vxe-input-disabled-color: #dcdfe6;
  --vxe-input-disabled-background-color: #f3f3f3;
  --vxe-input-placeholder-color: #c0c4cc;
  --vxe-table-popup-border-color: var(--td-table-border-color, #e8eaec);
  --vxe-table-header-font-color: #606266;
  --vxe-table-footer-font-color: #606266;
  --vxe-table-border-color: var(--td-table-border-color, #e8eaec);
  --vxe-table-resizable-line-color: #d9dddf;
  --vxe-table-resizable-drag-line-color: var(--td-brand-color, #409eff);
  --vxe-table-header-background-color: var(--td-table-header-color, #f8f8f9);
  --vxe-table-body-background-color: var(--td-bg-color-container, #fff);
  --vxe-table-footer-background-color: var(--td-bg-color-container, #fff);
  --vxe-table-tree-node-line-color: #909399;
  --vxe-table-tree-node-line-style: dotted;
  --vxe-table-row-hover-background-color: var(--zh-table-row-hover-background-color, #f5f7fa);
  --vxe-table-row-striped-background-color: #fafafa;
  --vxe-table-row-hover-striped-background-color: var(--zh-table-row-hover-background-color, #f5f7fa);
  --vxe-table-row-radio-checked-background-color: #fff3e0;
  --vxe-table-row-hover-radio-checked-background-color: #ffebbc;
  --vxe-table-row-checkbox-checked-background-color: #fff3e0;
  --vxe-table-row-hover-checkbox-checked-background-color: #ffebbc;
  --vxe-table-row-current-background-color: var(--td-bg-color-container-hover, #e6f7ff);
  --vxe-table-row-hover-current-background-color: #d7effb;
  --vxe-table-column-hover-background-color: #d7effb;
  --vxe-table-column-current-background-color: var(--td-bg-color-container-hover, #e6f7ff);
  --vxe-table-column-icon-border-color: #c0c4cc;
  --vxe-table-column-icon-border-hover-color: #515a6e;
  --vxe-table-cell-placeholder-color: #c0c4cc;
  --vxe-table-cell-dirty-update-color: #f56c6c;
  --vxe-table-cell-dirty-insert-color: #19a15f;
  --vxe-table-cell-area-border-color: var(--td-brand-color, #409eff);
  --vxe-table-cell-main-area-extension-border-color: var(--td-bg-color-container, #fff);
  --vxe-table-cell-main-area-extension-background-color: var(--td-brand-color, #409eff);
  --vxe-table-cell-copy-area-border-color: var(--td-brand-color, #409eff);
  --vxe-table-cell-extend-area-border-color: var(--td-brand-color, #409eff);
  --vxe-table-cell-active-area-border-color: var(--td-brand-color, #409eff);
  --vxe-table-cell-area-background-color: rgba(64, 158, 255, 0.2);
  --vxe-table-checkbox-range-border-color: #006af1;
  --vxe-table-filter-panel-background-color: var(--td-bg-color-container, #fff);
  --vxe-table-menu-background-color: var(--td-bg-color-container, #fff);
  --vxe-loading-color: var(--td-brand-color, #409eff);
  --vxe-loading-background-color: #ffffff80;
  --vxe-loading-z-index: 999;
  --vxe-table-validate-error-color: #f56c6c;
  --vxe-table-validate-error-background-color: var(--td-bg-color-container, #fff);
  --vxe-grid-maximize-background-color: var(--td-bg-color-container, #fff);
  --vxe-toolbar-background-color: var(--td-bg-color-container, #fff);
  --vxe-toolbar-custom-active-background-color: #d9dadb;
  --vxe-toolbar-panel-background-color: var(--td-bg-color-container, #fff);
  --vxe-tooltip-dark-color: var(--td-bg-color-container, #fff);
  --vxe-tooltip-dark-background-color: #303133;
  --vxe-tooltip-light-background-color: var(--td-bg-color-container, #fff);
  --vxe-pager-background-color: var(--td-bg-color-container, #fff);
  --vxe-pager-perfect-background-color: var(--td-bg-color-container, #fff);
  --vxe-pager-perfect-button-background-color: #f4f4f5;
  --vxe-modal-header-background-color: #f8f8f8;
  --vxe-modal-body-background-color: var(--td-bg-color-container, #fff);
  --vxe-modal-border-color: #ebeef5;
  --vxe-checkbox-icon-background-color: var(--td-bg-color-container, #fff);
  --vxe-checkbox-checked-icon-border-color: var(--td-bg-color-container, #fff);
  --vxe-checkbox-indeterminate-icon-background-color: var(--td-bg-color-container, #fff);
  --vxe-radio-icon-background-color: var(--td-bg-color-container, #fff);
  --vxe-radio-checked-icon-background-color: var(--td-bg-color-container, #fff);
  --vxe-radio-indeterminate-icon-background-color: var(--td-bg-color-container, #fff);
  --vxe-radio-button-default-background-color: var(--td-bg-color-container, #fff);
  --vxe-button-default-background-color: var(--td-bg-color-container, #fff);
  --vxe-button-dropdown-panel-background-color: var(--td-bg-color-container, #fff);
  --vxe-input-background-color: var(--td-bg-color-container, #fff);
  --vxe-input-panel-background-color: var(--td-bg-color-container, #fff);
  --vxe-input-number-disabled-color: #e4e7ed;
  --vxe-input-date-festival-color: #999;
  --vxe-input-date-festival-important-color: var(--td-brand-color, #409eff);
  --vxe-input-date-notice-background-color: red;
  --vxe-input-date-picker-hover-background-color: #f2f6fc;
  --vxe-input-date-picker-selected-color: var(--td-bg-color-container, #fff);
  --vxe-input-date-time-confirm-button-color: var(--td-bg-color-container, #fff);
  --vxe-input-date-picker-festival-selected-color: var(--td-bg-color-container, #fff);
  --vxe-input-date-picker-notice-selected-background-color: var(--td-bg-color-container, #fff);
  --vxe-input-date-extra-color: #67c23a;
  --vxe-input-date-extra-important-color: #fd2222;
  --vxe-textarea-background-color: var(--td-bg-color-container, #fff);
  --vxe-textarea-count-color: #999;
  --vxe-textarea-count-background-color: var(--td-bg-color-container, #fff);
  --vxe-textarea-count-error-color: #f56c6c;
  --vxe-form-background-color: var(--td-bg-color-container, #fff);
  --vxe-form-validate-error-color: #f56c6c;
  --vxe-form-validate-error-background-color: inherit;
  --vxe-select-option-hover-background-color: var(--zh-table-row-hover-background-color, #f5f7fa);
  --vxe-select-panel-background-color: var(--td-bg-color-container, #fff);
  --vxe-select-empty-color: #c0c4cc;
  --vxe-optgroup-title-color: #909399;
  --vxe-switch-font-color: var(--td-bg-color-container, #fff);
  --vxe-switch-icon-background-color: var(--td-bg-color-container, #fff);
  --vxe-switch-open-background-color: var(--td-brand-color, #409eff);
  --vxe-switch-close-background-color: rgba(0, 0, 0, 0.35);
  --vxe-switch-disabled-background-color: rgba(0, 0, 0, 0.15);
  --vxe-pulldown-panel-background-color: var(--td-bg-color-container, #fff);
}
.cl-crud {
  height: 100%;
  position: relative;
  box-sizing: border-box;
}
.cl-crud > .cl-row > :not(.cl-flex1) {
  margin-bottom: 10px;
}
.cl-crud .cl-toolbar {
  margin-left: var(--td-comp-margin-s);
}
.cl-crud .cl-row--last > :not(.cl-flex1) {
  margin-bottom: 0;
}
.cl-crud .t-button + .t-button {
  margin-left: var(--td-comp-margin-s);
}
.cl-crud.is-border {
  border: 1px solid var(--td-border-level-1-color, #e7e7e7);
}
.cl-crud .t-form-inline .t-form__item {
  margin-right: 0;
}
.cl-crud .t-row {
  width: 100%;
}
.cl-crud .t-pagination__total {
  margin-right: 10px;
}
.cl-crud .vxe-toolbar .vxe-custom--wrapper {
  margin-left: 0;
}
.cl-crud .vxe-grid--toolbar-wrapper .vxe-toolbar {
  padding: 10px;
}
.cl-crud .vxe-table--body-wrapper,
.cl-crud .vxe-table--fixed-left-body-wrapper,
.cl-crud .vxe-table--fixed-right-body-wrapper {
  /* 轨道的背景颜色 */
  /* 滑块的背景颜色 */
  /* 滑块的悬停背景颜色 */
}
.cl-crud .vxe-table--body-wrapper::-webkit-scrollbar,
.cl-crud .vxe-table--fixed-left-body-wrapper::-webkit-scrollbar,
.cl-crud .vxe-table--fixed-right-body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.cl-crud .vxe-table--body-wrapper::-webkit-scrollbar-track,
.cl-crud .vxe-table--fixed-left-body-wrapper::-webkit-scrollbar-track,
.cl-crud .vxe-table--fixed-right-body-wrapper::-webkit-scrollbar-track {
  border-radius: 4px;
}
.cl-crud .vxe-table--body-wrapper::-webkit-scrollbar-thumb,
.cl-crud .vxe-table--fixed-left-body-wrapper::-webkit-scrollbar-thumb,
.cl-crud .vxe-table--fixed-right-body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #9093994d;
}
.cl-crud .vxe-table--body-wrapper::-webkit-scrollbar-thumb:hover,
.cl-crud .vxe-table--fixed-left-body-wrapper::-webkit-scrollbar-thumb:hover,
.cl-crud .vxe-table--fixed-right-body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #909399;
}
.cl-flex1 {
  flex: 1;
  font-size: 12px;
  margin: 0 !important;
}
.cl-search-key {
  display: inline-flex;
}
.cl-search-key__select {
  margin-right: 10px;
  width: 120px;
}
.cl-search-key__wrap {
  display: inline-flex;
}
.cl-search-key__wrap .t-input__wrap {
  flex: 1;
}
.cl-search-key__wrap .t-button {
  margin-left: 10px;
}
.cl-table {
  width: 100%;
  font-size: 14px;
}
.cl-table .vxe-header--column .vxe-cell--title {
  font-weight: bold;
  color: var(--td-table-font-color, #333);
}
.cl-table .vxe-body--row .vxe-cell--label {
  color: var(--td-table-font-color2, #606266);
}
.cl-table .vxe-table--header .vxe-table--render-default .vxe-cell {
  color: var(--td-table-font-color, #333);
}
.cl-table .vxe-table--body .vxe-table--render-default .vxe-cell {
  color: var(--td-table-font-color2, #606266);
}
.cl-query {
  margin: 0 10px;
}
.cl-query ul {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.cl-query ul li {
  background-color: var(--td-bg-color-container, #fff);
  list-style: none;
  font-size: 14px;
  cursor: pointer;
  color: #666;
  white-space: nowrap;
}
.cl-query ul li:hover {
  color: var(--td-brand-color, #409eff);
}
.cl-query ul li.is-active {
  color: var(--td-brand-color, #409eff);
  font-weight: bold;
}
.cl-query ul li span {
  display: inline-block;
  padding: 0 15px;
  border-right: 1px solid var(--td-border-level-1-color, #e7e7e7);
}
.cl-query ul li:last-child span {
  border: 0;
}
.cl-search {
  width: 100%;
}
.cl-search .t-loading__parent {
  margin-right: -16px;
}
.cl-search__container .cl-form {
  width: 100%;
}
.cl-search__container .cl-form__container {
  flex-wrap: wrap;
}
.cl-search__footer {
  margin: 0 10px 10px 0;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
}
.cl-adv-btn {
  margin-left: 10px;
}
.cl-adv-search.el-drawer {
  background-color: var(--td-bg-color-container, #fff);
}
.cl-adv-search .cl-drawer__body {
  padding: 0;
}
.cl-adv-search__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cl-adv-search__header .text {
  font-weight: normal;
}
.cl-adv-search__header .t-icon {
  cursor: pointer;
}
.cl-adv-search__header .t-icon:hover {
  color: var(--td-brand-color-active);
}
.cl-adv-search__container {
  box-sizing: border-box;
}
.cl-adv-search__container::-webkit-scrollbar {
  width: 6px;
}
.cl-adv-search__container::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: rgba(144, 147, 153, 0.3);
}
.cl-adv-search__container .t-form-inline .cl-form__container > div > .t-form__item {
  margin-bottom: 10px;
}
.cl-adv-search__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
}
.cl-form .arco-form-item {
  margin-bottom: 0;
}
.cl-form__container {
  gap: 10px;
}
.cl-form__footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cl-pagination {
  min-width: 320px;
}
.cl-pagination .t-pagination .t-select__wrap {
  min-width: 96px;
}
.cl-dialog .t-dialog {
  padding: 0;
  border-radius: 3px;
}
.cl-dialog .t-dialog__header-content {
  display: block;
}
.cl-dialog .t-dialog__header {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 10px;
  border-bottom: 1px solid var(--td-border-level-1-color, #e7e7e7);
}
.cl-dialog .t-dialog__body {
  padding: 0;
}
.cl-dialog .t-dialog__close {
  display: none;
}
.cl-dialog .t-dialog__footer {
  padding: 0;
}
.cl-dialog__container {
  padding: 20px;
}
.cl-dialog__footer {
  padding: 0 20px 20px;
}
.cl-dialog__title {
  display: block;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.5px;
}
.cl-dialog__controls {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
  width: 100%;
}
.cl-dialog__controls .minimize,
.cl-dialog__controls .maximize,
.cl-dialog__controls .close {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  outline: none;
}
.cl-dialog__controls .minimize:hover,
.cl-dialog__controls .maximize:hover,
.cl-dialog__controls .close:hover {
  opacity: 0.7;
}
.cl-dialog__controls .minimize svg,
.cl-dialog__controls .maximize svg,
.cl-dialog__controls .close svg {
  margin: 0 !important;
}
.cl-popup-container {
  height: 100%;
  width: 100%;
  pointer-events: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 101;
}
.cl-popup-container .t-watermark {
  height: 100%;
}
.cl-popup-body {
  height: 100%;
  background-color: var(--td-bg-color-container, #fff);
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
}
.cl-popup-header {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--td-border-level-1-color, #e7e7e7);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cl-context-menu {
  position: absolute;
  z-index: 9999;
}
.cl-context-menu__box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-width: 160px;
  background-color: var(--td-bg-color-container, #fff);
  border-radius: 3px;
  position: absolute;
  top: 0;
}
.cl-context-menu__box.is-append {
  right: calc(-100% - 5px);
  top: -5px;
}
.cl-context-menu__box > div {
  display: flex;
  align-items: center;
  height: 35px;
  font-size: 13px;
  cursor: pointer;
  padding: 0 15px;
  color: #666;
  position: relative;
}
.cl-context-menu__box > div:first-child {
  margin-top: 5px;
}
.cl-context-menu__box > div:last-child {
  margin-bottom: 5px;
}
.cl-context-menu__box > div span {
  height: 35px;
  line-height: 35px;
  flex: 1;
}
.cl-context-menu__box > div:hover {
  background-color: #f7f7f7;
  color: #000;
}
.cl-context-menu__box > div i:first-child {
  margin-right: 5px;
}
.cl-context-menu__box > div i:last-child {
  margin-left: 5px;
}
.cl-context-menu__box > div.is-active {
  background-color: #f7f7f7;
  color: #000;
}
.cl-context-menu__box > div.is-ellipsis span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-context-menu__box > div.is-disabled span {
  color: #ccc;
}
.cl-context-menu__box > div.is-disabled span:hover {
  color: #ccc;
}
.cl-context-menu__target {
  position: relative;
}
.cl-context-menu__target::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
}
.theme .cl-dialog {
  border-radius: 10px !important;
}
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
.cl-table__tooltip {
  /* 轨道的背景颜色 */
  /* 滑块的背景颜色 */
  /* 滑块的悬停背景颜色 */
}
.cl-table__tooltip::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.cl-table__tooltip::-webkit-scrollbar-corner {
  background: transparent;
}
.cl-table__tooltip::-webkit-scrollbar-track {
  border-radius: 4px;
}
.cl-table__tooltip::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #9093994d;
}
.cl-table__tooltip::-webkit-scrollbar-thumb:hover {
  background-color: #909399;
}
.cl-table__ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-toolbar.panel-wrapper {
  min-width: 200px;
}
.cl-toolbar .top {
  border-bottom: 1px solid var(--td-border-level-1-color, #e7e7e7);
  padding: 5px 0;
}
.cl-toolbar .body {
  padding-right: 20px;
}
.cl-toolbar .body .operations {
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cl-toolbar .body .operations.hidden {
  display: none;
}
.cl-toolbar .body .operations.level--2 {
  padding-left: 25px;
}
.cl-toolbar .body .custom--fixed-option {
  display: flex;
  gap: 5px;
}
.cl-toolbar .body .custom--fixed-option .active {
  color: var(--td-brand-color, #409eff);
}
.cl-toolbar .body .custom--fixed-option > * {
  cursor: pointer;
  font-size: 18px;
}
.cl-toolbar .body .custom--fixed-option > *.move {
  font-size: 16px;
  cursor: move;
}
.cl-toolbar .bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--td-border-level-1-color, #e7e7e7);
  padding-top: 5px;
}
.cl-toolbar .bottom > * {
  flex: 1;
}