/* * Evohus DataTables bridge * ----------------------------------------------------------------------------- * Gives every DataTables instance in the legacy (`_Layout.cshtml`) line the * visual language of the Evohus reference table (Admin/src/apps-contact-requests.html): * flat surface, `bg-light` header row, 14px/.75rem cell rhythm, muted info text * and square 2.25rem pagination chips. * * The portal ships the *Bootstrap 5* styling build of DataTables 2.3.7, so the * generated markup is Bootstrap-flavoured and Evohus styles most of it natively: * div.dt-container.dt-bootstrap5 * div.dt-layout-row.row > div.dt-layout-cell.dt-layout-start|end.col-md-auto * div.dt-length > label > select.form-select.form-select-sm * div.dt-search > label + input.form-control.form-control-sm * div.dt-info * div.dt-paging > ul.pagination > li.page-item.dt-paging-button > button.page-link * table.dataTable (+ the view's own `ui celled table` classes, still Fomantic * markup on unmigrated views — the surface rules below neutralise that skin) * * Everything below therefore neutralises the Fomantic skin first, then repaints * with Evohus `--dx-*` tokens. Because only tokens are used, dark mode follows * `data-bs-theme` on automatically — no per-theme literals here. * * Scope: `div.dt-container` only, so non-DataTables `.ui.table` markup on legacy * pages is left untouched. Load order matters — this file must come after * semantic.min.css, site.css, main.css and evohus-legacy-bridge.css. */ /* --------------------------------------------------------------------------- * 1. Container + layout rows * ------------------------------------------------------------------------ */ div.dt-container { width: 100%; color: var(--dx-body-color); /* The portal root font-size is 14px, so 1rem is the Evohus table text size. */ font-size: 1rem; } /* The Bootstrap 5 build tags layout rows/cells with grid classes (`row mt-2`, `col-md-auto`, `col-12`). We lay these out with flex instead, so the grid's negative gutters and column padding are neutralised here — left in place they push the toolbar rows outside the card, exactly like `.table-card` did. */ div.dt-container div.dt-layout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; } div.dt-container div.dt-layout-cell { padding-left: 0; padding-right: 0; flex: 0 0 auto; width: auto; max-width: none; } div.dt-container div.dt-layout-row:first-child { margin-bottom: 1rem; } div.dt-container div.dt-layout-row:last-child { margin-top: 1rem; } div.dt-container div.dt-layout-cell { display: flex; align-items: center; gap: .5rem; padding: 0; margin: 0; } div.dt-container div.dt-layout-cell.dt-layout-start { justify-content: flex-start; } div.dt-container div.dt-layout-cell.dt-layout-end { justify-content: flex-end; margin-left: auto; } div.dt-container div.dt-layout-cell.dt-layout-full { width: 100%; justify-content: flex-start; } div.dt-container div.dt-layout-cell:empty { display: none; } /* --------------------------------------------------------------------------- * 2. Table surface — strip the Fomantic card look * ------------------------------------------------------------------------ */ .portal-legacy-content table.dataTable, .portal-legacy-content table.ui.table { /* Defined on the table itself so the skin works both inside a DataTables wrapper and on plain server-rendered Fomantic tables. */ --dt-evohus-cell-x: .75rem; --dt-evohus-cell-y: .875rem; --dt-evohus-edge: 1.25rem; width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--dx-body-color); font-family: inherit; font-size: 1rem; vertical-align: middle; border-collapse: collapse; border-spacing: 0; } /* Fomantic draws vertical rules for `celled` and an outer frame for every `ui table`; the Evohus reference table has neither. */ .portal-legacy-content table.ui.celled.table > tbody > tr > td, .portal-legacy-content table.ui.celled.table > tbody > tr > th, .portal-legacy-content table.ui.celled.table > thead > tr > th, .portal-legacy-content table.ui.celled.table > tfoot > tr > th, .portal-legacy-content table.ui.table > tbody > tr > td, .portal-legacy-content table.ui.table > thead > tr > th { border-left: 0; border-right: 0; box-shadow: none; } .portal-legacy-content table.ui.table > tbody > tr:first-child > td { border-top: 0; } /* --------------------------------------------------------------------------- * 3. Header row — `bg-light border-bottom` in the reference * ------------------------------------------------------------------------ */ .portal-legacy-content table.dataTable > thead > tr > th, .portal-legacy-content table.ui.table > thead > tr > th { padding: var(--dt-evohus-cell-y) var(--dt-evohus-cell-x); background-color: var(--dx-tertiary-bg); border-top: 0; border-bottom: var(--dx-border-width, 1px) solid var(--dx-border-color); color: var(--dx-emphasis-color); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.25rem; text-transform: none; letter-spacing: 0; white-space: nowrap; vertical-align: middle; border-radius: 0; } .portal-legacy-content table.dataTable > tfoot > tr > th, .portal-legacy-content table.ui.table > tfoot > tr > th { padding: var(--dt-evohus-cell-y) var(--dt-evohus-cell-x); background-color: var(--dx-tertiary-bg); border-top: var(--dx-border-width, 1px) solid var(--dx-border-color); color: var(--dx-emphasis-color); font-weight: 500; } /* Edge padding mirrors Evohus `.table-card`, which pulls the first/last column out to the card gutter. */ .portal-legacy-content table.dataTable > thead > tr > th:first-child, .portal-legacy-content table.dataTable > tbody > tr > td:first-child, .portal-legacy-content table.dataTable > tfoot > tr > th:first-child, .portal-legacy-content table.ui.table > thead > tr > th:first-child, .portal-legacy-content table.ui.table > tbody > tr > td:first-child { padding-left: var(--dt-evohus-edge); } .portal-legacy-content table.dataTable > thead > tr > th:last-child, .portal-legacy-content table.dataTable > tbody > tr > td:last-child, .portal-legacy-content table.dataTable > tfoot > tr > th:last-child, .portal-legacy-content table.ui.table > thead > tr > th:last-child, .portal-legacy-content table.ui.table > tbody > tr > td:last-child { padding-right: var(--dt-evohus-edge); } /* --------------------------------------------------------------------------- * 4. Body cells * ------------------------------------------------------------------------ */ .portal-legacy-content table.dataTable > tbody > tr > td, .portal-legacy-content table.dataTable > tbody > tr > th, .portal-legacy-content table.ui.table > tbody > tr > td { padding: var(--dt-evohus-cell-y) var(--dt-evohus-cell-x); background-color: transparent; border-top: 0; border-bottom: var(--dx-border-width, 1px) solid var(--dx-border-color); color: var(--dx-body-color); vertical-align: middle; line-height: 1.375rem; } .portal-legacy-content table.dataTable > tbody > tr:last-child > td, .portal-legacy-content table.ui.table > tbody > tr:last-child > td { border-bottom: 0; } .portal-legacy-content table.dataTable > tbody > tr, .portal-legacy-content table.ui.table > tbody > tr { background-color: transparent; } /* Hover / stripe / selection all resolve through Evohus table tokens. */ .portal-legacy-content table.dataTable.ui.selectable > tbody > tr:hover, .portal-legacy-content table.ui.selectable.table > tbody > tr:hover, .portal-legacy-content table.dataTable > tbody > tr:hover { background-color: var(--dx-table-hover-bg, var(--dx-tertiary-bg)); color: var(--dx-table-hover-color, var(--dx-body-color)); } .portal-legacy-content table.dataTable.ui.striped > tbody > tr:nth-child(2n), .portal-legacy-content table.ui.striped.table > tbody > tr:nth-child(2n) { background-color: var(--dx-table-striped-bg, var(--dx-tertiary-bg)); } .portal-legacy-content table.dataTable > tbody > tr.selected > td, .portal-legacy-content table.dataTable > tbody > tr.active > td { background-color: var(--dx-primary-bg-subtle); color: var(--dx-emphasis-color); box-shadow: none; } /* `compact` / `very compact` Fomantic variants keep their tighter rhythm. */ .portal-legacy-content table.ui.compact.table { --dt-evohus-cell-y: .625rem; } .portal-legacy-content table.ui.very.compact.table { --dt-evohus-cell-y: .5rem; } /* --------------------------------------------------------------------------- * 5. Sort indicators * ------------------------------------------------------------------------ */ .portal-legacy-content table.dataTable > thead > tr > th.dt-orderable-asc, .portal-legacy-content table.dataTable > thead > tr > th.dt-orderable-desc { cursor: pointer; } .portal-legacy-content table.dataTable > thead > tr > th.dt-orderable-asc:hover, .portal-legacy-content table.dataTable > thead > tr > th.dt-orderable-desc:hover { background-color: var(--dx-secondary-bg); color: var(--dx-primary); } .portal-legacy-content table.dataTable span.dt-column-order:before, .portal-legacy-content table.dataTable span.dt-column-order:after { color: var(--dx-secondary-color); opacity: .5; } /* Only the arrow carries the accent — the reference table keeps header text in the plain emphasis colour even on the sorted column. */ .portal-legacy-content table.dataTable > thead > tr > th.dt-ordering-asc, .portal-legacy-content table.dataTable > thead > tr > th.dt-ordering-desc { color: var(--dx-emphasis-color); } .portal-legacy-content table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order:before, .portal-legacy-content table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order:after { color: var(--dx-primary); opacity: 1; } /* --------------------------------------------------------------------------- * 6. Search box — Evohus `.form-control` with a leading icon well * ------------------------------------------------------------------------ */ div.dt-container div.dt-search { display: flex; align-items: center; gap: .5rem; } div.dt-container div.dt-search label { margin: 0; color: var(--dx-secondary-color); font-size: .8125rem; font-weight: 400; white-space: nowrap; } /* The Bootstrap 5 build renders the input directly as `.form-control.form-control-sm`, which Evohus already styles — only the height needs aligning with the rest of the toolbar. */ div.dt-container div.dt-search input { height: 2.5rem; min-width: 14rem; } div.dt-container div.dt-search input::placeholder { color: var(--dx-secondary-color); } div.dt-container div.dt-search input:focus { border-color: var(--dx-primary); box-shadow: none; outline: 0; } /* --------------------------------------------------------------------------- * 7. Page-length select * ------------------------------------------------------------------------ */ div.dt-container div.dt-length { display: flex; align-items: center; gap: .5rem; color: var(--dx-secondary-color); font-size: .8125rem; } /* DataTables renders the whole control as one label with the select inline in the middle of the sentence ("Sayfada [25] kayıt göster"), so the label itself has to be the flex row — otherwise the words break around the select. */ div.dt-container div.dt-length label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--dx-secondary-color); font-weight: 400; white-space: nowrap; } /* Bootstrap 5 build: a native `select.form-select.form-select-sm`, styled by Evohus. It is no longer wrapped by Fomantic's dropdown widget, so the whole `.ui.selection.dropdown` override — including its own menu skin — is gone. Only the sizing needs to match the toolbar; `width: auto` keeps it from filling the label. */ div.dt-container div.dt-length select { display: inline-flex; flex: 0 0 auto; width: auto; min-width: 4.75rem; height: 2.5rem; } div.dt-container div.dt-length select:focus { border-color: var(--dx-primary); box-shadow: none; } /* --------------------------------------------------------------------------- * 8. Info line — "Showing 1-25 of 120 Results" * ------------------------------------------------------------------------ */ div.dt-container div.dt-info { padding: 0; color: var(--dx-secondary-color); font-size: 1rem; font-weight: 400; line-height: 1.25rem; } div.dt-container div.dt-info b { color: var(--dx-emphasis-color); font-weight: 600; } /* --------------------------------------------------------------------------- * 9. Pagination * ----------------------------------------------------------------------------- * The Bootstrap 5 build renders `ul.pagination > li.page-item > button.page-link`, * which Evohus already styles natively (2.25rem chips, .5rem gap, primary active). * Only the alignment and the button reset are ours — the Semantic build's * `.ui.pagination.menu` skin that used to live here is gone with it. * ------------------------------------------------------------------------ */ div.dt-container div.dt-paging { display: flex; justify-content: flex-end; margin: 0; } div.dt-container div.dt-paging ul.pagination { margin: 0; } /* DataTables uses a real