/* ========================================================================== Techmin pagination light: Figma node 9:4057 · dark: Figma node 9:24050 Everything is expressed through Bootstrap's own --bs-pagination-* API, so the markup DataTables generates (ul.pagination > li.page-item > a.page-link) needs no change at all. The --pg-* tokens carry the two themes. Load this file LAST in — the rules are single-class selectors, the same specificity as bootstrap.min.css, so they win on stylesheet order alone. `tables-techmin.css` deliberately no longer styles .page-link: its selectors are `.dt-techmin .page-link` (0,2,0) and would beat these. ========================================================================== */ /* --- Light theme --- */ .pagination { --pg-bg: #fff; --pg-border: rgba(0, 0, 0, .2); --pg-color: #000; --pg-disabled-color: rgba(0, 0, 0, .75); --pg-hover-bg: #f2f2f2; } /* --- Dark theme --- */ [data-bs-theme="dark"] .pagination { --pg-bg: #0a0a0a; --pg-border: #262626; --pg-color: #f1f1f1; --pg-disabled-color: #d4d4d4; --pg-hover-bg: #171717; } /* Geometry Mockup: a 35px row around a 21px label, stroke drawn inside the frame — so Figma's 7px / 13px padding is 6px / 12px of CSS padding plus a 1px border: 21 + 2*6 + 2*1 = 35, and the "Previous" cell measures 58.55 + 2*12 + 2*1 = 84.55 wide, exactly the gap to the next item (which overlaps it by 1px, Bootstrap's own border collapsing). Square corners, Poppins 400. The mockup gives no hover state — only the default, .active and .disabled cells are drawn. Hover reuses the table template's row-hover fill, the one neutral surface the design system already defines for both themes. */ .pagination { --bs-pagination-padding-y: 6px; --bs-pagination-padding-x: 12px; --bs-pagination-font-size: 14px; --bs-pagination-border-width: 1px; --bs-pagination-border-radius: 0; --bs-pagination-color: var(--pg-color); --bs-pagination-bg: var(--pg-bg); --bs-pagination-border-color: var(--pg-border); --bs-pagination-hover-color: var(--pg-color); --bs-pagination-hover-bg: var(--pg-hover-bg); --bs-pagination-hover-border-color: var(--pg-border); --bs-pagination-focus-color: var(--pg-color); --bs-pagination-focus-bg: var(--pg-hover-bg); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(0, 122, 255, .25); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: #007aff; --bs-pagination-active-border-color: #007aff; --bs-pagination-disabled-color: var(--pg-disabled-color); --bs-pagination-disabled-bg: var(--pg-bg); --bs-pagination-disabled-border-color: var(--pg-border); } /* Bootstrap leaves the line box and the family to inheritance; the mockup states both. Cells are as wide as their label — the mockup draws "1" narrower than "3" — so no min-width here. */ .page-link { font-family: Poppins, "Noto Sans", sans-serif; font-weight: 400; line-height: 21px; text-align: center; } /* The previous / next cells carry a chevron where the mockup has the words "Previous" / "Next". As in the button template the icon is drawn at label size and on the label's own line box, so those cells keep exactly the same 35px height as the numbered ones. */ .page-link > i { display: block; font-size: 14px; line-height: 21px; }