OpenXE/www/themes/new/css/datatables_custom.css

/**
    LAYOUT
*/
.datatable-container .datatable-top,
.datatable-container .datatable-bottom {
    clear: both;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 -5px;
}

.datatable-container .datatable-top {
    align-items: center;
    margin: 0 0 10px 0;
}

.datatable-container .datatable-bottom {
    align-items: center;
    margin: 10px 0 0 0;
}

.datatable-container .datatable-info,
.datatable-container .datatable-length,
.datatable-container .datatable-search,
.datatable-container .datatable-buttons,
.datatable-container .datatable-paginate {
    max-width: 100%;
    padding: 0 5px;
}
.datatable-container .datatable-buttons {
    align-self: center;
}

/**
    DEFAULT ÜBERSCHREIBEN
 */

.datatable-container .dataTables_wrapper table.dataTable {
    border-collapse: separate;
    border-spacing: 0 5px;
    background-color: var(--body-background);
}

.datatable-container .dataTables_wrapper table.dataTable.compact {
    border-spacing: 0 1px;
}

.datatable-container table.dataTable.display tbody th,
.datatable-container table.dataTable.display tbody td {
    border: none;
}

.datatable-container table.dataTable tfoot th,
.datatable-container table.dataTable tfoot td {
    padding: 5px 10px;
    border-color: var(--fieldset-dark);
}

.datatable-container .dataTables_wrapper .dataTables_length,
.datatable-container .dataTables_wrapper .dataTables_filter,
.datatable-container .dataTables_wrapper .dataTables_info,
.datatable-container .dataTables_wrapper .dataTables_paginate,
.datatable-container .dataTables_wrapper div.dt-buttons {
    padding: 0;
}

.datatable-container .dataTables_wrapper .dataTables_processing {
    background: url('../images/loading.gif') no-repeat 50% 0;
    background-size: 150px;
    padding-top: 90px;
}

.datatable-container .dataTables_wrapper .dataTables_length input,
.datatable-container .dataTables_wrapper .dataTables_filter input,
.datatable-container .dataTables_wrapper .dataTables_length select,
.datatable-container .dataTables_wrapper .dataTables_filter select {
    border: 1px solid var(--textfield-border);
}

/**
    FILTER
*/
.datatable-container table.dataTable thead .column-filter-row td,
.datatable-container table.dataTable thead .column-filter-row th,
.datatable-container table.dataTable.compact thead .column-filter-row td,
.datatable-container table.dataTable.compact thead .column-filter-row th {
    padding: 3px;
}

.datatable-container table.dataTable .column-filter-row .column-filter {
    box-sizing: border-box;
}

.datatable-container table.dataTable .column-filter-row input {
    width: 100%;
    margin: 0;
    padding: 4px;
}

.datatable-container table.dataTable .column-filter-row input::placeholder {
    color: var(--info);
}

.datatable-container table.dataTable .column-filter-row input:not(:placeholder-shown) {
    color: var(--grey);
    background-color: var(--green-light);
}

.datatable-container table.dataTable .column-filter-row input:focus::placeholder {
    color: transparent;
}

.datatable-container table.dataTable .column-filter-row input {
    color: var(--grey);
    text-align: center;
    background-color: var(--filter);
    border: 1px solid var(--filter);
}

.datatable-container table.dataTable .column-filter-row input:focus {
    color: var(--grey);
    background-color: var(--green-light);
    border: 1px solid var(--green);
}

.datatable-container table.dataTable .column-filter-row .column-filter-numberrange {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

.datatable-container table.dataTable .column-filter-row  .column-filter-numberrange input {
    width: 49%;
    flex: 0 1 auto;
}
.datatable-container table.dataTable .column-filter-row  .column-filter-numberrange input:first-child {
    margin-right: 6px;
}

/**
    STYLING CLASSES

    - display:      Short-hand for the stripe, hover, row-border and order-column classes.
    - compact:      Reduces the amout of white-space. Increases the informaton density.
    - stripe:       Enables row striping
    - hover:        Highlights rows on mouse over
    - nowrap:       Disables line wrapping
    - row-border:   Borders between rows
    - cell-border:  Borders around all cells
    - order-column: Highlights the currently ordered column

    @see https://datatables.net/manual/styling/classes
 */

.datatable-container table.dataTable tbody tr {
    background-color: #ffffff;
}

/**
    STRIPES
*/

.datatable-container table.dataTable.stripe tbody tr.odd,
.datatable-container table.dataTable.display tbody tr.odd {
    background-color: #f9f9f9;
}

/**
    DEFAULT STYLE (not compact)
*/

.datatable-container table.dataTable thead th,
.datatable-container table.dataTable thead td {
    padding: 6px 17px 6px 12px;
}

.datatable-container table.dataTable tbody th,
.datatable-container table.dataTable tbody td {
    padding: 6px 12px;
}

/**
    COMPACT STYLE
*/

.datatable-container table.dataTable.compact thead th,
.datatable-container table.dataTable.compact thead td {
    padding: 6px 17px 6px 6px;
}

.datatable-container table.dataTable.compact tbody th,
.datatable-container table.dataTable.compact tbody td {
    padding: 3px 6px;
}

.datatable-container table.dataTable.compact tfoot th,
.datatable-container table.dataTable.compact tfoot td {
    padding: 6px;
}

/**
    ROW COLORS
*/

.datatable-container table.dataTable tr.lightgray td {
    background-color: #bcc6bc;
}

.datatable-container table.dataTable tr.lightgreen td {
    background-color: #bbeebb;
}

.datatable-container table.dataTable tr.lightteal td {
    background-color: #bbeed4;
}

.datatable-container table.dataTable tr.lightcyan td {
    background-color: #bbeeee;
}

.datatable-container table.dataTable tr.lightblue td {
    background-color: #c8c8f1;
}

.datatable-container table.dataTable tr.lightindigo td {
    background-color: #c8c8f1;
}

.datatable-container table.dataTable tr.lightviolet td {
    background-color: #dcc8f1;
}

.datatable-container table.dataTable tr.lightfuchsia td {
    background-color: #f1c8f1;
}

.datatable-container table.dataTable tr.lightpink td {
    background-color: #eebbd4;
}

.datatable-container table.dataTable tr.lightred td {
    background-color: #eebbbb;
}

.datatable-container table.dataTable tr.lightorange td {
    background-color: #eed4bb;
}

.datatable-container table.dataTable tr.lightyellow td {
    background-color: #eeeebb;
}

.datatable-container table.dataTable tr.lightlime td {
    background-color: #d4eebb;
}

/**
    SORTING ICONS
 */

.datatable-container table.dataTable thead .sorting,
.datatable-container table.dataTable thead .sorting_asc,
.datatable-container table.dataTable thead .sorting_desc,
.datatable-container table.dataTable thead .sorting_asc_disabled,
.datatable-container table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand;
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 20px; /* Extra space for sort icon */
}

.datatable-container table.dataTable thead .sorting {
    background-image: url('../images/sort_both.png');
}

.datatable-container table.dataTable thead .sorting_asc {
    background-image: url('../images/sort_asc.png');
}

.datatable-container table.dataTable thead .sorting_asc_disabled {
    background-image: url('../images/sort_asc_disabled.png');
}

.datatable-container table.dataTable thead .sorting_desc {
    background-image: url('../images/sort_desc.png');
}

.datatable-container table.dataTable thead .sorting_desc_disabled {
    background-image: url('../images/sort_desc_disabled.png');
}

/**
    DETAILS / CHILD ROWS
 */

.datatable-container table.dataTable tbody .details {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center right;
    background-image: url('../images/details_open.png');
}
.datatable-container table.dataTable tbody .details.open {
    background-image: url('../images/details_close.png');
}

/**
    BUTTONS
 */
.datatable-container .dataTables_wrapper button.dt-button:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button:not(.disabled),
.datatable-container .dataTables_wrapper button.dt-button:link:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button:link:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button:link:not(.disabled),
.datatable-container .dataTables_wrapper button.dt-button:visited:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button:visited:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button:visited:not(.disabled),
.datatable-container .dataTables_wrapper button.dt-button:hover:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button:hover:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button:hover:not(.disabled),
.datatable-container .dataTables_wrapper button.dt-button.active:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button:active:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button.active:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button:active:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button.active:not(.disabled),
.datatable-container .dataTables_wrapper button.dt-button:focus:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button:focus:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button:focus:not(.disabled) {
    display: inline-block;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
    padding: 3px 8px;
    margin: 1px 0.333em 1px 0;
    text-shadow: none;
    font-weight: normal;
    font-size: 0.88em;
    color: var(--button-secondary-color) !important; /* Important ist notwendig aufgrund von Regel in www/themes/new/css/buttons.dataTables.min.css */
    outline: none;
    border: 1px solid var(--button-secondary-border-color);
    border-radius: 3px;
    background: var(--button-secondary-background) none;
    box-shadow: none;
}

.datatable-container .dataTables_wrapper button.dt-button:hover:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button:hover:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button:hover:not(.disabled) {
    color: var(--button-primary-color) !important; /* Important ist notwendig aufgrund von Regel in www/themes/new/css/buttons.dataTables.min.css */
    background-color: var(--button-primary-background);
}

.datatable-container .dataTables_wrapper button.dt-button.active:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button:active:not(.disabled),
.datatable-container .dataTables_wrapper div.dt-button.active:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button:active:not(.disabled),
.datatable-container .dataTables_wrapper a.dt-button.active:not(.disabled) {
    background: #E2E2E2;
}

.datatable-container .dataTables_wrapper .dataTables_paginate a.paginate_button,
.datatable-container .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
    margin: 1px;
    padding: 4px 8px;
    font-size: 11px;
    color: var(--text-color);
    background: #FFF none;
    border: 1px solid #FFF;
    border-radius: 3px;
}

.datatable-container .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
    font-weight: bold;
    color: #FFF !important;
    border-color: #FFF;
    background: var(--text-color) none;
}

.datatable-container .dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
.datatable-container .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
    color: #FFF !important;
    border-color: var(--text-color);
    background: var(--text-color) none;
}

/**
    INFO SECTION
 */

.datatable-container .dataTables_wrapper .dataTables_info {
    color: var(--text-color);
}

/**
    MENU SUB-TABLE
 */
.datatable-container table.dataTable table.datatable-menu {
    width: auto;
    padding: 0;
    margin: 0 auto;
    background: none;
    border-collapse: collapse;
}
.datatable-container table.dataTable table.datatable-menu tbody {
    margin: 0;
    padding: 0;
    background: none;
}

.datatable-container table.dataTable table.datatable-menu tbody tr,
.datatable-container table.dataTable table.datatable-menu tbody tr:hover {
    background: none;
}

.datatable-container table.dataTable table.datatable-menu tbody th,
.datatable-container table.dataTable table.datatable-menu tbody td {
    margin: 0;
    padding: 1px;
    background: none;
}

.datatable-container table.dataTable table.datatable-menu tbody img {
    margin: 0;
    padding: 0;
}

/*****************************************************/

/**
    DEBUG
 */

.datatable-container .debug-container {
    clear: both;
}

.datatable-container .debug-container .debug-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0 -5px;
}

.datatable-container .debug-container .debug-col-8 {
    flex-basis: 0;
    flex-grow: 8;
    max-width: 100%;
    padding: 0 5px;
}

.datatable-container .debug-container .debug-col-4 {
    flex-basis: 0;
    flex-grow: 4;
    max-width: 100%;
    padding: 0 5px;
}

.datatable-container .debug-container h3 {
    font-size: 13px;
    margin: 12px 0 0 0;
    padding: 6px 10px;
    color: #CCC;
    background-color: #333;
}

.datatable-container .debug-container pre {
    white-space: pre-wrap;
    max-width: 100%;
    overflow-x: auto;
    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
    font-size: 12px;
    margin: 0;
    padding: 6px 10px;
    color: #DDD;
    background-color: #222;
}

.datatable-container pre.dump {
    overflow-x: auto;
    max-width: 100%;
    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
    margin: 0 0 12px 0;
    padding: 6px 10px;
    text-align: left;
    color: #DDD;
    background-color: #222;
}