vue-fantable/packages/theme-dark/var.less

Vue table component for huge data

:root {
  --ve-primary-color: #121212;
  --ve-secondary-color: #363636;
  --ve-dark-text-color: #ffffffd9;
  --ve-default-font-size: 14px;

  /* fan-table */
  --ve-fixed-body-cell-index: 10;
  --ve-fixed-cell-selection-border-index: 10;
  --ve-fixed-cell-selection-corner-index: 11;
  --ve-fixed-header-index: 20;
  --ve-fixed-foot-index: 20;
  --ve-fixed-header-cell-index: 30;
  --ve-fixed-foot-cell-index: 30;
  --fan-table-head-row-height: 40px;
  --fan-table-body-row-height: 40px;
  --fan-table-foot-row-height: 40px;
  --fan-table-td-editing-line-height: 30px;
  --fan-table-head-row-td-padding: 10px;
  --fan-table-body-row-td-padding: 10px;
  --fan-table-body-row-expand-content-padding: 0 10px;
  --fan-table-foot-row-td-padding: 10px;
  --fan-table-border-color: #000;
  --fan-table-column-fixed-border-color: #434343;
  --fan-table-td-editing-font-color: #fff;
  --fan-table-td-editing-border-color: #2196f3;
  --fan-table-td-editing-background-color: #434343;
  --fan-table-td-editing-box-shadow-color: #5e5c5c;
  --fan-table-selection-border-color: #4b89ff;
  --fan-table-selection-autofill-border-color: #ff000085;
  --fan-table-selection-corner-border-color: #ffffff;
  --fan-table-selection-corner-background-color: #4b89ff;
  --fan-table-selection-area-layer-background-color: #0d65eb;
  --fan-table-td-operation-column-background-color: #1d1d1d;
  --fan-table-body-background-color: #141414;
  --fan-table-body-row-stripe-background-color: var(--ve-primary-color);
  --fan-table-body-row-hover-background-color: var(--ve-primary-color);
  --fan-table-body-row-highlight-background-color: #000;
  --fan-table-body-row-row-scrolling-background-color: #141414;
  --fan-table-header-background-color: #1d1d1d;
  --fan-table-head-text-color: var(--ve-dark-text-color);
  --fan-table-head-indicator-active-text-color: #fff;
  --fan-table-body-text-color: var(--ve-dark-text-color);
  --fan-table-body-indicator-active-text-color: #fff;
  --fan-table-foot-background-color: #1d1d1d;
  --fan-table-foot-text-color: var(--ve-dark-text-color);
  --fan-table-sort-icon-default-color: #bfbfbf;
  --fan-table-sort-icon-active-color: #108ee9;
  --fan-table-head-text-font-size: var(--ve-default-font-size);
  --fan-table-body-text-font-size: var(--ve-default-font-size);
  --fan-table-foot-text-font-size: var(--ve-default-font-size);
  --fan-table-header-filter-icon-color: #eee;
  --fan-table-header-cell-indicator-background-color: #434343;
  --fan-table-header-cell-indicator-active-background-color: #666;
  --fan-table-body-cell-indicator-background-color: #434343;
  --fan-table-body-cell-indicator-active-background-color: #666;
  --fan-table-column-resizer-handler-background-color: #4d90fe;
  --fan-table-column-resizer-line-background-color: #4d90fe;

  /* ve-pagination */
  --ve-pagination-background-color: var(--ve-primary-color);
  --ve-pagination-item-border-color: #434343;
  --ve-pagination-item-background-color: var(--ve-primary-color);
  --ve-pagination-item-text-color: var(--ve-dark-text-color);
  --ve-pagination-li-color: var(--ve-dark-text-color);
  --ve-pagination-jump-hover-color: var(--ve-dark-text-color);
  --ve-pagination-goto-background-color: #141414;
  --ve-pagination-goto-input-color: var(--ve-dark-text-color);
  --ve-pagination-goto-input-hover-color: var(--ve-dark-text-color);

  /* ve-checkbox */
  --ve-checkbox-checked-background-color: #108ee9;
  --ve-checkbox-checked-border-color: #108ee9;
  --ve-checkbox-label-text-color: var(--ve-dark-text-color);

  /* ve-radio */
  --ve-radio-checked-background-color: #108ee9;
  --ve-radio-checked-border-color: #108ee9;
  --ve-radio-label-text-color: var(--ve-dark-text-color);

  /* ve-select */
  --ve-select-text-color: var(--ve-dark-text-color);

  /* ve-dropdown */
  --ve-dropdown-z-index: 999;
  --ve-dropdown-background-color: var(--ve-secondary-color);
  --ve-dropdown-border-color: #434343;
  --ve-dropdown-text-color: var(--ve-dark-text-color);
  --ve-dropdown-item-background-color: var(--ve-secondary-color);
  --ve-dropdown-item-border-color: var(--ve-secondary-color);
  --ve-dropdown-item-active-background-color: #666666;
  --ve-dropdown-item-hover-background-color: #464646;
  --ve-dropdown-item-hover-text-color: var(--ve-dark-text-color);
  --ve-dropdown-active-text-color: var(--ve-dark-text-color);
  --ve-dropdown-operation-item-text-color: var(--ve-dark-text-color);
  --ve-dropdown-operation-item-hover-text-color: #2196f3;

  /* ve-contextmenu */
  --ve-contextmenu-background-color: var(--ve-secondary-color);
  --ve-contextmenu-border-color: var(--ve-secondary-color);
  --ve-contextmenu-border-radius: 4px;
  --ve-contextmenu-box-shadow-color: #0000001a;
  --ve-contextmenu-min-width: 180px;
  --ve-contextmenu-min-height: 50px;
  --ve-contextmenu-node-separator-line-color: hsla(0, 0%, 100%, 0.12);
  --ve-contextmenu-node-hover-background-color: #666666;
  --ve-contextmenu-node-text-color: var(--ve-dark-text-color);
  --ve-contextmenu-node-hover-text-color: var(--ve-dark-text-color);
  --ve-contextmenu-node-active-text-color: var(--ve-dark-text-color);
  --ve-contextmenu-node-disabled-text-color: #c0c4cc;
  --ve-contextmenu-node-icon-postfix-color: var(--ve-dark-text-color);
  --ve-contextmenu-node-disabled-icon-postfix-color: #c0c4cc;
}