/* ════════════════════════════════════════════════════════════════════
TLC SHARED CSS — DataTables sort icons
Master / Single Source of Truth — TurnerLee.com
URL: https://turnerlee.com/shared/core/v1/datatables-fix.css
════════════════════════════════════════════════════════════════════
Every TLC site loads this file via in their All-HeaderScripts.html.
Edit this file ONCE on TurnerLee and every site gets the update on next
page load. Do NOT duplicate these rules into per-site Custom_css.
What this fixes:
- "Pile of arrows" caused by DT 1.13.1 CSS + DT 1.10.24 JS version
mismatch (newer CSS ships SVG sprite background that tiles when paired
with older JS class system).
- Replaces the broken background-image with clean Unicode triangle
pseudo-elements; works in any font (no FontAwesome dependency).
- Active sort column (sorting_asc / sorting_desc) renders the directional
indicator at full opacity; inactive columns show both ▲▼ at 0.3.
════════════════════════════════════════════════════════════════════ */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
background-image: none !important;
position: relative;
cursor: pointer;
padding-right: 30px !important;
}
html body table.dataTable.dataTable thead tr th.sorting:before,
html body table.dataTable.dataTable thead tr th.sorting_asc:before,
html body table.dataTable.dataTable thead tr th.sorting_desc:before,
html body table.dataTable.dataTable thead tr th.sorting_asc_disabled:before,
html body table.dataTable.dataTable thead tr th.sorting_desc_disabled:before {
content: "\25B2" !important; /* ▲ up triangle */
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; /* Force consistent triangle rendering across sites; brand fonts vary so Unicode glyphs differ */
position: absolute !important;
top: 50% !important;
right: 1.4em !important;
transform: translateY(-90%);
font-size: 0.65em !important;
line-height: 1 !important;
opacity: 0.3 !important;
display: block !important;
background: none !important;
}
html body table.dataTable.dataTable thead tr th.sorting:after,
html body table.dataTable.dataTable thead tr th.sorting_asc:after,
html body table.dataTable.dataTable thead tr th.sorting_desc:after,
html body table.dataTable.dataTable thead tr th.sorting_asc_disabled:after,
html body table.dataTable.dataTable thead tr th.sorting_desc_disabled:after {
content: "\25BC" !important; /* ▼ down triangle */
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; /* Force consistent triangle rendering across sites; brand fonts vary so Unicode glyphs differ */
position: absolute !important;
top: 50% !important;
right: 1.4em !important;
transform: translateY(10%);
font-size: 0.65em !important;
line-height: 1 !important;
opacity: 0.3 !important;
display: block !important;
background: none !important;
}
/* Active sort: bring the directional indicator to full opacity.
Matches whether the th has both .sorting + .sorting_asc (DT default) OR
just .sorting_asc on its own (some DT versions/plugins strip the .sorting
class when active). Matches the same way for sorting_desc. */
html body table.dataTable.dataTable thead tr th.sorting_asc:before,
html body table.dataTable.dataTable thead tr th.sorting_desc:after {
opacity: 1 !important;
}
/* Disabled-sort columns: hide their indicators entirely */
html body table.dataTable.dataTable thead tr th.sorting_asc_disabled:before,
html body table.dataTable.dataTable thead tr th.sorting_desc_disabled:after {
opacity: 0 !important;
}
/* ════════════════════════════════════════════════════════════════════
DataTables wrapper, search box, and responsive scroll — UX fixes
════════════════════════════════════════════════════════════════════
Centralized improvements applied site-wide via the SST:
1. Search input stays put (sticky-left) when the table scrolls
horizontally on responsive — no more search box moving with data
2. Search input adapts to On Dark / On Mix context — same treatment
as it gets on white, no more bright white box on dark backgrounds
3. Border lives on the wrapper, not the table — left and right edges
stay visible at all viewport widths (was lost on horizontal scroll)
════════════════════════════════════════════════════════════════════ */
/* (3) Wrapper is the horizontal scroll container. Search box and "Showing X"
info both stick to the left so they stay anchored as content scrolls.
Border lives on the TABLE itself so it wraps only the data area, not
search or info. Trade-off: scrollbar appears at wrapper bottom (below
info). */
html body .dataTables_wrapper {
background: transparent;
position: relative;
overflow: visible; /* wrapper does NOT scroll — inner frame does */
max-width: 100%;
width: 100%; /* explicit so wrapper can't grow past parent */
box-sizing: border-box;
}
/* Defensive: prevent ANY page-level horizontal scroll when a DataTable is on
the page, regardless of which other elements are loaded on a given site.
Different sites load different brand CSS bundles (MDB on some, swiper on
others), so element width constraints vary — this clips at body level so
no descendant can push the page wider than the viewport. */
html body:has(.dataTables_wrapper) {
overflow-x: clip;
max-width: 100vw;
}
/* The .tlc-table-frame is wrapped around just the table by datatables-init.js.
Border + scroll + scrollbar-hide all live HERE, so search box (above) and
info (below) sit OUTSIDE the bordered area. Border stays visible at all 4
sides regardless of horizontal scroll position. */
html body .dataTables_wrapper .tlc-table-frame {
border: 1px solid var(--bdr, rgba(0, 0, 0, 0.09));
border-radius: 4px;
overflow-x: auto;
overflow-y: visible;
overscroll-behavior: contain;
max-width: 100%;
/* Hide scrollbar visually — scroll behavior preserved (touch/trackpad). */
scrollbar-width: none;
-ms-overflow-style: none;
}
html body .dataTables_wrapper .tlc-table-frame::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* "Showing X of Y entries" info — left edge aligned with the table frame
below it. Sits outside the bordered .tlc-table-frame as the user wants. */
html body .dataTables_wrapper .dataTables_info {
padding: 8px 0 !important;
background: transparent;
}
/* Reset table border — lives on the wrapper now to stay visible during scroll */
html body table.dataTable.dataTable {
border: 0 !important;
border-radius: 0;
}
/* (1) Search filter row — ALWAYS its own row above the table, full-width.
Beats t_tlc-styles.css's .dataTables_filter { float:left } which would
otherwise let the table flow alongside the search box. */
html body .dataTables_wrapper .dataTables_filter {
display: block !important;
float: none !important;
width: 100% !important;
text-align: left !important;
padding: 8px 0 !important;
margin: 0 0 4px !important;
background: transparent;
clear: both;
}
/* Tracker-style search: +