rsuite/Table/styles/index.css

A suite of react components

:root,
.rs-theme-light {
  --rs-gray-0: #fff;
  --rs-gray-50: #f7f7fa;
  --rs-gray-100: #f2f2f5;
  --rs-gray-200: #e5e5ea;
  --rs-gray-500: #939393;
  --rs-gray-600: #717273;
  --rs-gray-700: #575757;
  --rs-gray-800: #343434;
  --rs-gray-900: #121212;
  --rs-primary-50: #f2faff;
  --rs-primary-500: #3498ff;
  --rs-text-secondary: var(--rs-gray-600);
  --rs-border-secondary: var(--rs-gray-100);
  --rs-bg-card: var(--rs-gray-0);
  --rs-state-hover-bg: var(--rs-primary-50);
  --rs-loader-ring: rgb(from var(--rs-gray-50) r g b / 80%);
  --rs-loader-rotor: var(--rs-gray-500);
  --rs-loader-backdrop: rgb(from var(--rs-gray-0) r g b / 90%);
  --rs-table-border-color: var(--rs-border-secondary);
  --rs-table-shadow: rgba(9, 9, 9, 0.08);
  --rs-table-sort: var(--rs-primary-500);
  --rs-table-resize: var(--rs-primary-500);
  --rs-table-scrollbar-track: var(--rs-gray-200);
  --rs-table-scrollbar-thumb: var(--rs-gray-800);
  --rs-table-scrollbar-thumb-active: var(--rs-gray-900);
  --rs-table-scrollbar-vertical-track: rgb(from var(--rs-gray-200) r g b / 40%);
}
@supports not (color: rgb(from white r g b)) {
  :root,
  .rs-theme-light {
    --rs-loader-ring: rgba(247, 247, 250, 0.8);
    --rs-loader-backdrop: rgba(255, 255, 255, 0.9);
    --rs-table-scrollbar-vertical-track: rgba(229, 229, 234, 0.4);
  }
}
.rs-theme-dark {
  --rs-gray-0: #fff;
  --rs-gray-50: #e9ebf0;
  --rs-gray-100: #cbced4;
  --rs-gray-200: #a4a9b3;
  --rs-gray-500: #5c6066;
  --rs-gray-600: #3c3f43;
  --rs-gray-700: #292d33;
  --rs-gray-800: #1a1d24;
  --rs-gray-900: #0f131a;
  --rs-primary-50: #f2fcff;
  --rs-primary-500: #34c3ff;
  --rs-text-secondary: var(--rs-gray-200);
  --rs-border-secondary: var(--rs-gray-700);
  --rs-bg-card: var(--rs-gray-800);
  --rs-state-hover-bg: var(--rs-gray-600);
  --rs-loader-ring: rgb(from var(--rs-gray-50) r g b / 30%);
  --rs-loader-rotor: var(--rs-gray-0);
  --rs-loader-backdrop: rgb(from var(--rs-gray-900) r g b / 83%);
  --rs-table-border-color: var(--rs-border-secondary);
  --rs-table-shadow: rgba(9, 9, 9, 0.99);
  --rs-table-sort: var(--rs-primary-500);
  --rs-table-resize: var(--rs-primary-500);
  --rs-table-scrollbar-track: var(--rs-gray-700);
  --rs-table-scrollbar-thumb: var(--rs-gray-200);
  --rs-table-scrollbar-thumb-active: var(--rs-gray-100);
  --rs-table-scrollbar-vertical-track: var(--rs-gray-700);
}
@supports not (color: rgb(from white r g b)) {
  .rs-theme-dark {
    --rs-loader-ring: rgba(233, 235, 240, 0.3);
    --rs-loader-backdrop: rgba(15, 19, 26, 0.83);
  }
}
.rs-theme-high-contrast {
  --rs-gray-0: #fff;
  --rs-gray-50: #e9ebf0;
  --rs-gray-100: #cbced4;
  --rs-gray-200: #a4a9b3;
  --rs-gray-500: #5c6066;
  --rs-gray-600: #3c3f43;
  --rs-gray-700: #292d33;
  --rs-gray-800: #1a1d24;
  --rs-gray-900: #0f131a;
  --rs-primary-50: #fffef2;
  --rs-primary-500: #ffff00;
  --rs-text-secondary: var(--rs-gray-200);
  --rs-border-secondary: var(--rs-gray-700);
  --rs-bg-card: var(--rs-gray-800);
  --rs-state-hover-bg: var(--rs-gray-600);
  --rs-loader-ring: rgb(from var(--rs-gray-50) r g b / 30%);
  --rs-loader-rotor: var(--rs-gray-0);
  --rs-loader-backdrop: rgb(from var(--rs-gray-900) r g b / 83%);
  --rs-table-border-color: var(--rs-border-secondary);
  --rs-table-shadow: rgba(9, 9, 9, 0.99);
  --rs-table-sort: var(--rs-primary-500);
  --rs-table-resize: var(--rs-primary-500);
  --rs-table-scrollbar-track: var(--rs-gray-700);
  --rs-table-scrollbar-thumb: var(--rs-gray-200);
  --rs-table-scrollbar-thumb-active: var(--rs-gray-100);
  --rs-table-scrollbar-vertical-track: var(--rs-gray-700);
}
@supports not (color: rgb(from white r g b)) {
  .rs-theme-high-contrast {
    --rs-loader-ring: rgba(233, 235, 240, 0.3);
    --rs-loader-backdrop: rgba(15, 19, 26, 0.83);
  }
}
/* stylelint-disable */
*[class*='rs-'] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
*[class*='rs-']::before,
*[class*='rs-']::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.rs-table {
  position: relative;
  overflow: hidden;
}
.rs-table-column-resizing {
  cursor: ew-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.rs-table-row {
  overflow: hidden;
  position: absolute;
  height: 36px;
  width: 100%;
  top: 0;
}
.rs-table-row.virtualized {
  pointer-events: none;
}
@media not all and (min-resolution: 0.001dpcm) {
  .rs-table-row.virtualized {
    visibility: hidden;
  }
}
.rs-table-row-expanded {
  position: absolute;
  height: 46px;
  bottom: 0;
  width: 100%;
  z-index: 4;
  border-top: 1px solid #f2f2f5;
  border-top: 1px solid var(--rs-table-border-color);
  padding: 10px;
  background-color: #fff;
  background-color: var(--rs-bg-card);
}
.rs-table-hover .rs-table-row:hover .rs-table-cell-group {
  background-color: #fff;
  background-color: var(--rs-bg-card);
}
.rs-table-hover .rs-table-row:hover .rs-table-cell {
  background-color: #fff;
  background-color: var(--rs-bg-card);
}
.rs-table-row-header {
  background-color: #fff;
  background-color: var(--rs-bg-card);
}
.rs-table-row-header .rs-table-cell {
  background-color: #fff;
  background-color: var(--rs-bg-card);
}
.rs-table-row-header .rs-table-cell-group-shadow {
  z-index: 5;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.rs-table-hover .rs-table-row:not(.rs-table-row-header):hover,
.rs-table-hover .rs-table-row:hover .rs-table-cell-group,
.rs-table-hover .rs-table-row:hover .rs-table-cell {
  background-color: #f2faff;
  background-color: var(--rs-state-hover-bg);
}
.rs-table-hover .rs-table-row-header:hover .rs-table-cell-group,
.rs-table-hover .rs-table-row-header:hover .rs-table-cell {
  background-color: #fff;
  background-color: var(--rs-bg-card);
}
.rs-table-header-row-wrapper {
  z-index: 2;
  position: relative;
  font-size: 12px;
  color: #717273;
  color: var(--rs-text-secondary);
}
.rs-table-affix-header {
  z-index: 3;
  visibility: hidden;
}
.rs-table-affix-header.fixed {
  visibility: visible;
}
.rs-table-body-row-wrapper {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.rs-table-body-info {
  width: 100%;
  text-align: center;
  top: 50%;
  position: absolute;
  margin-top: -20px;
  line-height: 40px;
}
.rs-table-body-info .icon {
  margin: 0 10px;
}
.rs-table-body-info-wheel-area {
  width: 100%;
}
.rs-table-body-wheel-area {
  width: 100%;
}
.rs-table-loader-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgb(from #fff r g b / 90%);
  background-color: var(--rs-loader-backdrop);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  pointer-events: none;
}
@media not all and (min-resolution: 0.001dpcm) {
  .rs-table-loader-wrapper {
    visibility: hidden;
  }
}
.rs-table-loader {
  width: 100%;
  text-align: center;
  top: 50%;
  position: absolute;
  margin-top: -20px;
  line-height: 40px;
}
.rs-table-loader-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  margin-right: 12px;
  padding-top: 3px;
}
.rs-table-loader-icon::before,
.rs-table-loader-icon::after {
  width: 18px;
  height: 18px;
}
.rs-table-loader-icon::before,
.rs-table-loader-icon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  border-radius: 50%;
}
.rs-table-loader-icon::before {
  border: 3px solid rgb(from #f7f7fa r g b / 80%);
  border: 3px solid var(--rs-loader-ring);
}
.rs-table-loader-icon::after {
  border-width: 3px;
  border-style: solid;
  border-color: #939393 transparent transparent;
  border-color: var(--rs-loader-rotor) transparent transparent;
  -webkit-animation: loaderSpin 0.6s infinite linear;
          animation: loaderSpin 0.6s infinite linear;
}
.rs-table-loading .rs-table-loader-wrapper {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.rs-table-cell {
  height: 36px;
  display: block;
  overflow: hidden;
  position: absolute;
  white-space: normal;
  background-color: #fff;
  background-color: var(--rs-bg-card);
  border-bottom: 1px solid #f2f2f5;
  border-bottom: 1px solid var(--rs-table-border-color);
}
.rs-table-cell.first {
  border-left-width: 0;
}
.rs-table-cell-wrap1 {
  display: table;
}
.rs-table-cell-wrap2 {
  display: table-row;
}
.rs-table-cell-wrap3 {
  display: table-cell;
  vertical-align: middle;
}
.rs-table-cell-content {
  padding: 13px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.rs-table-cell-header .rs-table-cell-content {
  padding: 10px 10px;
  line-height: 1.66666667;
}
.rs-table-cell-header-sort-wrapper {
  cursor: pointer;
  margin-left: 5px;
  display: inline-block;
}
.rs-table-cell-header-icon-sort {
  color: #3498ff;
  color: var(--rs-table-sort);
  font-size: 16px;
  line-height: 1.66666667;
}
.rs-table-cell-rowspan {
  border-bottom: 1px solid #f2f2f5 !important;
  border-bottom: 1px solid var(--rs-table-border-color) !important;
}
.rs-table-cell-full-text:hover {
  z-index: 1 !important;
  width: auto !important;
  -webkit-box-shadow: inset #3498ff 0px 0px 2px;
  -webkit-box-shadow: inset var(--rs-primary-500) 0px 0px 2px;
          box-shadow: inset #3498ff 0px 0px 2px;
          box-shadow: inset var(--rs-primary-500) 0px 0px 2px;
}
.rs-table-cell-full-text:hover .rs-table-cell-content {
  width: auto !important;
}
.rs-table-cell-header-sortable .rs-table-cell-content {
  cursor: pointer;
}
.rs-table-column-resize-spanner {
  height: 36px;
  width: 3px;
  z-index: 3;
  position: absolute;
  cursor: ew-resize !important;
  outline: none;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.rs-table-column-resize-spanner::after,
.rs-table-column-resize-spanner::before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
  bottom: 0;
  top: 0;
  display: none;
}
.rs-table-column-resize-spanner::before {
  border-style: dashed solid dashed dashed;
  border-color: transparent #3498ff transparent transparent;
  border-color: transparent var(--rs-table-resize) transparent transparent;
  border-width: 3px;
  right: 4px;
}
.rs-table-column-resize-spanner::after {
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent #3498ff;
  border-color: transparent transparent transparent var(--rs-table-resize);
  border-width: 3px;
  left: 4px;
}
.rs-table:not(.rs-table-column-resizing) .rs-table-cell-header .rs-table-cell:hover ~ .rs-table-column-resize-spanner,
.rs-table:not(.rs-table-column-resizing) .rs-table-column-resize-spanner:hover {
  background-color: #3498ff;
  background-color: var(--rs-table-resize);
}
.rs-table:not(.rs-table-column-resizing) .rs-table-cell-header .rs-table-cell:hover ~ .rs-table-column-resize-spanner::before,
.rs-table:not(.rs-table-column-resizing) .rs-table-column-resize-spanner:hover::before,
.rs-table:not(.rs-table-column-resizing) .rs-table-cell-header .rs-table-cell:hover ~ .rs-table-column-resize-spanner::after,
.rs-table:not(.rs-table-column-resizing) .rs-table-column-resize-spanner:hover::after {
  display: block;
}
.rs-table-cell-group-fixed-right,
.rs-table-cell-group-fixed-left {
  position: absolute;
  z-index: 4;
  background-color: #fff;
  background-color: var(--rs-bg-card);
}
.rs-table-cell-group-shadow,
.rs-table-cell-group-left-shadow {
  -webkit-box-shadow: 3px 0 5px rgba(9, 9, 9, 0.08) /* rtl:ignore */;
  -webkit-box-shadow: 3px 0 5px var(--rs-table-shadow) /* rtl:ignore */;
          box-shadow: 3px 0 5px rgba(9, 9, 9, 0.08) /* rtl:ignore */;
          box-shadow: 3px 0 5px var(--rs-table-shadow) /* rtl:ignore */;
}
.rs-table-cell-group-right-shadow {
  -webkit-box-shadow: -3px 0 5px rgba(9, 9, 9, 0.08) /* rtl:ignore */;
  -webkit-box-shadow: -3px 0 5px var(--rs-table-shadow) /* rtl:ignore */;
          box-shadow: -3px 0 5px rgba(9, 9, 9, 0.08) /* rtl:ignore */;
          box-shadow: -3px 0 5px var(--rs-table-shadow) /* rtl:ignore */;
}
.rs-table-mouse-area {
  display: none;
  background-color: #3498ff;
  background-color: var(--rs-table-resize);
  left: -1px;
  top: 0;
  position: absolute;
  width: 1px;
  z-index: 6;
}
.rs-table-mouse-area > span {
  height: 36px;
  width: 3px;
  z-index: 3;
  cursor: ew-resize !important;
  outline: none;
  background-color: #3498ff;
  background-color: var(--rs-table-resize);
  position: absolute;
  left: -1.5px;
}
.rs-table-word-wrap .rs-table-cell-content {
  white-space: normal;
}
.rs-table-bordered {
  border: 1px solid #f2f2f5;
  border: 1px solid var(--rs-table-border-color);
}
.rs-table-cell-bordered .rs-table-cell {
  border-right: 1px solid #f2f2f5;
  border-right: 1px solid var(--rs-table-border-color);
}
.rs-table-column-group {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
}
.rs-table-column-group-header {
  border-bottom: 1px solid #f2f2f5;
  border-bottom: 1px solid var(--rs-table-border-color);
  position: absolute;
  width: 100%;
}
.rs-table-column-group-header-content {
  display: table-cell;
  padding: 10px;
}
.rs-table-column-group-cell {
  position: absolute;
  border-right: 1px solid #f2f2f5;
  border-right: 1px solid var(--rs-table-border-color);
}
.rs-table:not(.rs-table-has-rowspan) .rs-table-row {
  border-bottom: 1px solid #f2f2f5;
  border-bottom: 1px solid var(--rs-table-border-color);
}
.rs-table-cell-expand-wrapper {
  margin-right: 10px;
  display: inline-block;
  cursor: pointer;
}
.rs-table-cell-expand-icon {
  cursor: pointer;
  outline: none;
  font-size: 16px;
}
.rs-table-scrollbar {
  background-color: #e5e5ea;
  background-color: var(--rs-table-scrollbar-track);
  position: absolute;
  -webkit-transition: background 0.1s linear, -webkit-transform 0.1s linear;
  transition: background 0.1s linear, -webkit-transform 0.1s linear;
  transition: background 0.1s linear, transform 0.1s linear;
  transition: background 0.1s linear, transform 0.1s linear, -webkit-transform 0.1s linear;
  opacity: 0.6;
  z-index: 1;
}
.rs-table-scrollbar-hide {
  display: none;
}
.rs-table-scrollbar-handle {
  position: absolute;
  background-color: #343434;
  background-color: var(--rs-table-scrollbar-thumb);
  border-radius: 4px;
}
.rs-table-scrollbar-pressed {
  z-index: 1;
}
.rs-table-scrollbar-pressed .rs-table-scrollbar-handle {
  background-color: #121212;
  background-color: var(--rs-table-scrollbar-thumb-active);
}
.rs-table-scrollbar-horizontal {
  width: 100%;
  height: 10px;
  bottom: 0;
}
.rs-table-scrollbar-horizontal.fixed {
  position: fixed;
}
.rs-table-scrollbar-horizontal .rs-table-scrollbar-handle {
  height: 8px;
  left: 0 /* rtl:ignore */;
  top: 1px;
}
.rs-table-scrollbar-pressed.rs-table-scrollbar-horizontal:hover,
.rs-table-scrollbar-horizontal:hover {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-transform: scaleY(1.3);
          transform: scaleY(1.3);
}
.rs-table-scrollbar-vertical {
  top: 0;
  right: 0;
  width: 10px;
  bottom: 10px;
  background-color: rgb(from #e5e5ea r g b / 40%);
  background-color: var(--rs-table-scrollbar-vertical-track);
}
.rs-table-scrollbar-vertical .rs-table-scrollbar-handle {
  min-height: 20px;
  width: 8px;
  top: 0;
  left: 1px;
}
.rs-table-scrollbar-pressed.rs-table-scrollbar-vertical:hover,
.rs-table-scrollbar-vertical:hover {
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: scaleX(1.3);
          transform: scaleX(1.3);
}