@dolusoft/vue3-datatable/dist/vue3-datatable.css

Vue3 Datatable - fully customizable & easy to use datatable library

.expandbtn[data-v-da3bc8d5] {
    cursor: pointer;
}

.rightpanelbtn[data-v-b373d5f7] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.splitpanes{display:flex;width:100%;height:100%}.splitpanes--vertical{flex-direction:row}.splitpanes--horizontal{flex-direction:column}.splitpanes--dragging .splitpanes__pane{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.splitpanes__pane{width:100%;height:100%;overflow:hidden}.splitpanes--vertical .splitpanes__pane{transition:width .2s ease-out}.splitpanes--horizontal .splitpanes__pane{transition:height .2s ease-out}.splitpanes--dragging .splitpanes__pane{transition:none}.splitpanes__splitter{touch-action:none}.splitpanes--vertical>.splitpanes__splitter{min-width:1px;cursor:col-resize}.splitpanes--horizontal>.splitpanes__splitter{min-height:1px;cursor:row-resize}.splitpanes.default-theme .splitpanes__pane{background-color:#f2f2f2}.splitpanes.default-theme .splitpanes__splitter{background-color:#fff;box-sizing:border-box;position:relative;flex-shrink:0}.splitpanes.default-theme .splitpanes__splitter:before,.splitpanes.default-theme .splitpanes__splitter:after{content:"";position:absolute;top:50%;left:50%;background-color:#00000026;transition:background-color .3s}.splitpanes.default-theme .splitpanes__splitter:hover:before,.splitpanes.default-theme .splitpanes__splitter:hover:after{background-color:#00000040}.splitpanes.default-theme .splitpanes__splitter:first-child{cursor:auto}.default-theme.splitpanes .splitpanes .splitpanes__splitter{z-index:1}.default-theme.splitpanes--vertical>.splitpanes__splitter,.default-theme .splitpanes--vertical>.splitpanes__splitter{width:7px;border-left:1px solid #eee;margin-left:-1px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{transform:translateY(-50%);width:1px;height:30px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:before{margin-left:-2px}.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{margin-left:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter,.default-theme .splitpanes--horizontal>.splitpanes__splitter{height:7px;border-top:1px solid #eee;margin-top:-1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{transform:translate(-50%);width:30px;height:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before{margin-top:-2px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{margin-top:1px}

.left-menu-container {
  position: relative;
  flex-shrink: 0 !important;
}
.menu-resize-controls {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: #f0f0f0;
  border-radius: 3px 0 0 3px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}
.menu-resize-controls button {
  width: 16px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bh-datatable thead {
  z-index: 15 !important;
}
.bh-datatable tbody tr {
  position: relative;
  z-index: 1;
}
.bh-datatable tbody tr:has(td[colspan]) {
  z-index: 0;
}
/* Clear All Filters Button */
.bh-clear-all-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e0e6ed;
  border-radius: 4px;
  background: #e0e6ed;
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
  transition: all 0.2s ease;
}
.bh-clear-all-button:disabled {
  opacity: 0.5;
}
.bh-clear-all-button--active {
  background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
  border-color: var(--primary, #3b82f6);
  color: var(--primary, #3b82f6);
  cursor: pointer;
}
.bh-clear-all-button--active:hover {
  background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
}

/* Dark mode */
.dark .bh-clear-all-button {
  background: #374151;
  border-color: #4b5563;
  color: rgba(255, 255, 255, 0.4);
}
.dark .bh-clear-all-button--active {
  background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
  border-color: var(--primary, #3b82f6);
  color: var(--primary, #3b82f6);
}