/* * dt_custom.css — DataTables Phoenix Theme Overrides * ==================================================== * Makes DataTables.net feel native inside the Phoenix Bootstrap 5 admin theme. * Supports both light and dark modes automatically via CSS variables. */ /* ── Wrapper & Processing overlay ──────────────────────────────────────── */ div.dt-container { font-size: 0.875rem; } div.dt-processing { background: var(--phoenix-card-bg, #fff); border: 1px solid var(--phoenix-border-color, #dee2e6); border-radius: 0.375rem; padding: 0.5rem 1rem; color: var(--phoenix-body-color, #333); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075); z-index: 10; } /* ── Search input ───────────────────────────────────────────────────────── */ div.dt-search input { height: calc(1.5em + 0.625rem + 2px); padding: 0.3125rem 0.75rem; font-size: 0.875rem; border-radius: 0.375rem; border: 1px solid var(--phoenix-input-border-color, #ced4da); background-color: var(--phoenix-input-bg, #fff); color: var(--phoenix-input-color, #333); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } div.dt-search input:focus { border-color: var(--phoenix-primary, #2c7be5); box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.25); outline: 0; } div.dt-search label { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0; } /* ── Length select ──────────────────────────────────────────────────────── */ div.dt-length select { height: calc(1.5em + 0.625rem + 2px); padding: 0.3125rem 2rem 0.3125rem 0.75rem; font-size: 0.875rem; border-radius: 0.375rem; border: 1px solid var(--phoenix-input-border-color, #ced4da); background-color: var(--phoenix-input-bg, #fff); color: var(--phoenix-input-color, #333); appearance: auto; } /* ── Info text ──────────────────────────────────────────────────────────── */ div.dt-info { font-size: 0.8125rem; color: var(--phoenix-text-muted, #8a949f); padding-top: 0.4rem; } /* ── Pagination ─────────────────────────────────────────────────────────── */ div.dt-paging .pagination { margin-bottom: 0; justify-content: flex-end; } div.dt-paging .page-link { font-size: 0.8125rem; padding: 0.3rem 0.6rem; color: var(--phoenix-primary, #2c7be5); border-color: var(--phoenix-border-color, #dee2e6); background-color: var(--phoenix-card-bg, #fff); transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } div.dt-paging .page-link:hover { background-color: var(--phoenix-primary, #2c7be5); color: #fff; border-color: var(--phoenix-primary, #2c7be5); } div.dt-paging .page-item.active .page-link { background-color: var(--phoenix-primary, #2c7be5); border-color: var(--phoenix-primary, #2c7be5); color: #fff; } div.dt-paging .page-item.disabled .page-link { color: var(--phoenix-text-muted, #8a949f); pointer-events: none; background-color: transparent; } /* ── Table head sort indicators ─────────────────────────────────────────── */ table.dataTable thead th.dt-orderable-asc span.dt-column-order::before, table.dataTable thead th.dt-orderable-desc span.dt-column-order::after { opacity: 0.4; } table.dataTable thead th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead th.dt-ordering-desc span.dt-column-order::after { opacity: 1; color: var(--phoenix-primary, #2c7be5); } table.dataTable thead th { cursor: pointer; user-select: none; white-space: nowrap; } /* ── Dark mode support (Phoenix adds data-bs-theme="dark" to ) ──── */ [data-bs-theme="dark"] div.dt-search input, [data-bs-theme="dark"] div.dt-length select { background-color: var(--phoenix-input-bg, #1e2a3b); border-color: var(--phoenix-input-border-color, #3d4c5e); color: var(--phoenix-input-color, #c7d0dc); } [data-bs-theme="dark"] div.dt-processing { background: var(--phoenix-card-bg, #1a2436); border-color: var(--phoenix-border-color, #3d4c5e); color: var(--phoenix-body-color, #c7d0dc); } [data-bs-theme="dark"] div.dt-paging .page-link { background-color: var(--phoenix-card-bg, #1a2436); border-color: var(--phoenix-border-color, #3d4c5e); color: var(--phoenix-primary, #5a9ef5); } [data-bs-theme="dark"] div.dt-paging .page-item.active .page-link { background-color: var(--phoenix-primary, #2c7be5); border-color: var(--phoenix-primary, #2c7be5); color: #fff; } /* ── Fix Bootstrap table hover + stripe flicker in DataTables ─────────── */ table.dataTable.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--bs-table-hover-bg); } /* ── Remove double border on card + table header ──────────────────────── */ .card > .table-responsive > table.dataTable { margin-bottom: 0; } .card > .table-responsive { border-radius: 0; }