@acrool/react-table/dist/themes/acrool.css

Table library based for Reactjs

/** -------------------------------
 *             Header
 * ------------------------------ */
.acrool-react-table__root {
    --line-height: 50px;
    --border-radius: .4rem;

    --default-primary-color: #535bf2;
    --default-primary-contrast-color: #fff;

    --mask-bgcolor: rgba(255, 255, 255, 0.3);
    --bg-color: #fff;
    --text-color: #000;
    --sort-column: #000;
    --text-contrast-color: #fff;
    --page-text-color: rgb(170, 170, 170);
    --page-bg-color: #efefef;
    --page-bg-hover-color: #dedede;

    --border-color: rgb(233, 233, 233);
    --header-border-color: var(--border-color);
    --cell-border-color: #9ca3af;

    --tr-bg-color: #fff;
    --tr-bg-hover-color: #f1f1f1;
    --tr-even-bg-color: rgb(243, 247, 249);
    --tr-even-bg-hover-color: rgb(236, 236, 236);
}

.acrool-react-table__root.dark-theme {
    --mask-bgcolor: rgba(43, 48, 53, 0.3);
    --bg-color: #2b3035;
    --text-color: rgb(154, 160, 172);
    --text-contrast-color: #fff;
    --sort-column: #fff;

    --page-text-color: rgb(125, 132, 144);
    --page-bg-color: #495057;
    --page-bg-hover-color: #6b7279;

    --border-color: #343a40;
    --header-border-color: #585858;
    --cell-border-color: #4d4d4d;

    --tr-bg-color: #2b3035;
    --tr-bg-hover-color: #1f1f1f;
    --tr-even-bg-color: #262a2e;
    --tr-even-bg-hover-color: #1f1f1f;
}


/** -------------------------------
 *         Common Border
 * ------------------------------ */

.acrool-react-table__root tr th,
.acrool-react-table__root tr td {
    border: none;
    border-top: 1px solid var(--border-color);
}

.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:last-child tr:last-child th,
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:last-child tr:last-child td {
    border-bottom: 1px solid var(--border-color);
}

/* 邊框線 */
.acrool-react-table__root[data-mode="table"] tr th:first-child,
.acrool-react-table__root[data-mode="table"] tr td:first-child{
    border-left: 1px solid var(--border-color);
}

.acrool-react-table__root[data-mode="table"] tr th:last-child,
.acrool-react-table__root[data-mode="table"] tr td:last-child{
    border-right: 1px solid var(--border-color);
}



.acrool-react-table__root[data-mode="cell"] td{
    border-left: 1px solid var(--border-color);
}

.acrool-react-table__root[data-mode="cell"] td{
    border-right: 1px solid var(--border-color);
}
.acrool-react-table__root[data-mode="cell"] td:last-child{
    border-bottom: 1px solid var(--border-color);
}


/** -------------------------------
 *         Common Radius
 * ------------------------------ */

/* Table */
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:first-child tr:first-child th:first-child,
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:first-child tr:first-child td:first-child {
    border-top-left-radius: var(--border-radius);
}
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:first-child tr:first-child th:last-child,
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:first-child tr:first-child td:last-child {
    border-top-right-radius: var(--border-radius);
}
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:last-child tr:last-child th:last-child,
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:last-child tr:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius);
}
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:last-child tr:last-child th:first-child,
.acrool-react-table__root[data-mode="table"] .acrool-react-table__content:last-child tr:last-child td:first-child{
    border-bottom-left-radius: var(--border-radius);
}


/* Cell */
.acrool-react-table__root[data-mode="cell"] td:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}
.acrool-react-table__root[data-mode="cell"] td:last-child {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

/** -------------------------------
 *         Paginate
 * ------------------------------ */
.acrool-react-table__paginate {
    --line-height: 50px;
    --border-radius: .4rem;

    --default-primary-color: #535bf2;
    --default-primary-contrast-color: #fff;

    --mask-bgcolor: rgba(255, 255, 255, 0.3);
    --bg-color: #fff;
    --text-color: #000;
    --sort-column: #000;
    --text-contrast-color: #fff;
    --page-text-color: rgb(170, 170, 170);
    --page-bg-color: #efefef;
    --page-bg-hover-color: #dedede;

    --border-color: rgb(233, 233, 233);
    --header-border-color: var(--border-color);
    --cell-border-color: #9ca3af;

    --tr-bg-color: #fff;
    --tr-bg-hover-color: #f1f1f1;
    --tr-even-bg-color: rgb(243, 247, 249);
    --tr-even-bg-hover-color: rgb(236, 236, 236);
}

.acrool-react-table__paginate.dark-theme {
    --mask-bgcolor: rgba(43, 48, 53, 0.3);
    --bg-color: #2b3035;
    --text-color: rgb(154, 160, 172);
    --text-contrast-color: #fff;
    --sort-column: #fff;

    --page-text-color: rgb(125, 132, 144);
    --page-bg-color: #495057;
    --page-bg-hover-color: #6b7279;

    --border-color: #343a40;
    --header-border-color: #585858;
    --cell-border-color: #4d4d4d;

    --tr-bg-color: #2b3035;
    --tr-bg-hover-color: #1f1f1f;
    --tr-even-bg-color: #262a2e;
    --tr-even-bg-hover-color: #1f1f1f;
}



/** -------------------------------
 *         Common Bg
 * ------------------------------ */

.acrool-react-table__root tr th,
.acrool-react-table__root tr td{
    background-color: var(--tr-bg-color);
}

.acrool-react-table__root tr[data-even] th,
.acrool-react-table__root tr[data-even] td{
    background-color: var(--tr-even-bg-color);
}

.acrool-react-table__root[data-mode="table"][data-hover] tbody tr:hover td{
    background-color: var(--tr-bg-hover-color);
}
.acrool-react-table__root[data-mode="table"][data-hover] tbody tr[data-even]:hover td{
    background-color: var(--tr-even-bg-hover-color);
}