@visualjs/grid/dist/themes/energetic.css

JavaScript Data Table

.v-grid-energetic-theme {
    /* custom variables */

    /* global */
    --primary-color: #dc4c3f;
    --border-color: rgba(189, 195, 199, 0.4);
    --default-font-size: 12px;
    /* headers */
    --header-background-color: #f8f8f8;
    --header-foreground-color: rgba(0, 0, 0, 0.5);
    --header-resizer-active-color: var(--primary-color);
    /* columns */
    --column-pinned-right-shadow: rgba(0, 0, 0, 0.06) -4px 0px 2px;
    --column-pinned-left-shadow: rgba(0, 0, 0, 0.06) 4px 0px 2px;
    /* rows */
    --row-stripe-background: #fefcfc;
    --row-hover-background: #f8f8f8;
    --row-select-background: rgba(220, 76, 63, 0.1);
    --row-drag-indicator-background: var(--primary-color);
    --row-drag-indicator-opacity: 0.2;
    --rows-pinned-top-shadow: rgba(0, 0, 0, 0.06) 0px 4px 2px;
    --rows-pinned-bottom-shadow: rgba(0, 0, 0, 0.06) 0px -4px 2px;
    /* cells */
    --cell-selected-background: rgba(220, 76, 63, 0.2);
    --cell-selected-boundary-color: var(--primary-color);
    --cell-editing-popup-background: #fafafa;

    /* global styles */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;;
}

.v-grid-energetic-theme [class^='v-grid-'], .v-grid-energetic-theme [class^='v-grid-']:focus, .v-grid-energetic-theme [class^='v-grid-']:after, .v-grid-energetic-theme [class^='v-grid-']:before {
    box-sizing: border-box;
    outline: none;
}

.v-grid-energetic-theme [class^='v-grid-']::selection {
    background-color: rgba(220, 76, 63, 0.2);
}