in an overflow-x: auto container so wide content
scrolls horizontally inside the container instead of
overflowing the viewport. The container has min-width: 0
so the flex parent can shrink it; without this, flex
items default to min-width: auto which lets the table
push the parent wider than the viewport. */
.wnl-table-wrap {
overflow-x: auto;
overflow-y: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #050505;
min-width: 0;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
/* The dense table itself is bound to the wrap. table-layout: fixed
makes columns respect their declared widths; width: 100% keeps
the table at the wrap's width. Any overflow scrolls inside the
wrap (overflow-x: auto above) instead of pushing the page wider. */
.wnl-table-dense {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 12px;
}
/* ── Dense table (fixed layout, equal-width columns) ────────── */
/* `table-layout: fixed` makes the table respect its parent
width instead of auto-expanding to fit content. All columns
get equal share of the table width. Long text in cells
truncates with ellipsis. The table fits its parent at every
viewport, no horizontal scroll on the table itself. */
.wnl-table-dense {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 12px;
}
.wnl-table-dense thead th {
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 9px;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
text-align: left;
font-weight: 500;
background: transparent;
}
.wnl-table-dense tbody td {
padding: 8px 12px;
vertical-align: middle;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wnl-table-dense tbody tr:hover {
background: rgba(255, 255, 255, 0.02);
}
/* Equal-width columns: each | and | gets 1/N of the table
where N is the number of columns. Done via the child count:
a 5-col table gives each column 20%, a 9-col gives 11%, etc.
This works for any column count (projects 8, videos 9, research 7). */
.wnl-table-dense > thead > tr > th,
.wnl-table-dense > tbody > tr > td {
width: calc(100% / var(--col-count, 8));
}
/* The actions cell (last column) is wider than the equal split
because 5 buttons don't fit in 1/N. Override with a fixed
pixel width that fits ↑↓ Edit View Del with padding. */
.wnl-table-dense > thead > tr > th:last-child,
.wnl-table-dense > tbody > tr > td:last-child {
width: 220px;
text-align: right;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
/* The checkbox and # cells: keep them narrow, don't truncate. */
.wnl-table-dense > thead > tr > th:nth-child(1),
.wnl-table-dense > tbody > tr > td:nth-child(1) {
width: 36px;
text-align: center;
overflow: visible;
text-overflow: clip;
white-space: normal;
}
.wnl-table-dense > thead > tr > th:nth-child(2),
.wnl-table-dense > tbody > tr > td:nth-child(2) {
width: 48px;
overflow: visible;
text-overflow: clip;
white-space: normal;
}
/* Year column is short (4-digit number). */
.wnl-table-dense > thead > tr > th:nth-child(5),
.wnl-table-dense > tbody > tr > td:nth-child(5) {
width: 60px;
text-align: center;
}
/* Status column (7th): allow the status tags (FEATURED, HIDDEN,
DRAFT) to wrap to multiple lines when the cell is too narrow
for 2+ tags side by side. The default `white-space: nowrap`
on .wnl-table-dense tbody td would force all tags onto one
line, causing them to overlap / clip. Override here. */
.wnl-table-dense > thead > tr > th:nth-child(7),
.wnl-table-dense > tbody > tr > td:nth-child(7) {
white-space: normal;
}
/* Status tags: inline-block so multiple tags wrap onto
separate lines when the cell is narrow. Margin-top on
the second+ tag adds vertical breathing room. Tags are
LEFT-justified inside the cell (not centered/right). */
.wnl-table-dense > tbody > tr > td:nth-child(7) > span {
display: inline-block;
margin-bottom: 4px;
text-align: left;
}
.wnl-table-dense > tbody > tr > td:nth-child(7) > span + span {
margin-left: 6px;
margin-top: 0;
}
/* ── Status cell: keep the tag at the left of the cell.
Tags stay as inline-block so 2+ tags wrap to a second
line. ─────────────────────────────────────────────────── */
.wnl-table-dense > tbody > tr > td:nth-child(7) {
text-align: left;
vertical-align: top;
padding-top: 8px;
padding-bottom: 12px;
}
/* ── Responsive collapse (mobile cards) ────────────────────── */
/* On viewports ≤768px, transform the dense table into a card
list. Each row becomes its own card. Each cell shows its
column label (from the data-label attribute) above the value.
This is the canonical solution for all .wnl-table-dense
tables — no per-page patches. The labels come from
data-label on each | , so each page sets its own columns. */
@media (max-width: 768px) {
.wnl-table-dense {
border: 0;
}
.wnl-table-dense > thead {
display: none;
}
/* Hide th cells too — table-layout: fixed uses th widths to
determine column widths even when thead is display:none.
The th's width: 36px/48px/60px/220px would force the first
row of cells to those widths, breaking the card layout. */
.wnl-table-dense > thead > tr > th {
display: none;
width: auto !important;
}
.wnl-table-dense > tbody > tr {
display: block;
margin-bottom: 12px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #050505;
}
.wnl-table-dense > tbody > tr > td {
/* Label inline with value, both on the left. Compact, no
wasted space. Value is right-aligned within the cell
via auto margin-left. Long values ellipsis-truncate. */
display: flex !important;
justify-content: flex-start;
align-items: center;
gap: 12px;
padding: 8px 0;
border: 0;
width: 100% !important;
max-width: none !important;
white-space: nowrap;
}
/* The label sits inline, with a colon separator. Fixed
min-width so all values align to the same X position
across rows. */
.wnl-table-dense > tbody > tr > td::before {
content: attr(data-label) ":";
flex: 0 0 90px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4);
}
/* Value sits next to the label, sized to content, ellipsis
if too long for the cell. */
.wnl-table-dense > tbody > tr > td > * {
flex: 0 1 auto;
text-align: left;
font-size: 12px;
color: #fff;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* The actions cell is full-width on mobile: stack the buttons
in a single row, LEFT-aligned, no truncation. Tighter
gap + smaller padding on mobile so all 5 fit without
wrapping. */
.wnl-table-dense > tbody > tr > td:last-child {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 4px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
width: 100%;
white-space: nowrap;
}
/* On mobile, the action buttons need to be smaller to fit
5 buttons in the cell. Reduce padding + font size. */
@media (max-width: 768px) {
.wnl-table-dense > tbody > tr > td:last-child .btn,
.wnl-table-dense > tbody > tr > td:last-child button {
padding: 4px 6px !important;
font-size: 9px !important;
letter-spacing: 0.1em !important;
}
}
/* The actions cell has a visible label too so its content
starts at the same x as the other values. The label
is "Actions:" in muted mono. */
.wnl-table-dense > tbody > tr > td:last-child {
text-align: left;
white-space: nowrap;
flex-wrap: nowrap;
}
.wnl-table-dense > tbody > tr > td:last-child::before {
display: block;
content: "Actions:";
flex: 0 0 90px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4);
}
/* Hide the checkbox + # cells on mobile (selection is via
the batch-select-all on top, not per-row). */
.wnl-table-dense > tbody > tr > td:nth-child(1),
.wnl-table-dense > tbody > tr > td:nth-child(2) {
display: none;
}
}
/* ── In-page subnav (e.g. Active / Trash) ──────────────────── */
.wnl-page-subnav {
display: inline-flex;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 24px;
}
.wnl-subnav-tab {
padding: 10px 18px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
background: transparent;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.wnl-subnav-tab:last-child {
border-right: none;
}
.wnl-subnav-tab:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.wnl-subnav-tab.is-active {
background: #fff;
color: #000;
}
/* ── Responsive: stat grid + page header on mobile ──────────── */
@media (max-width: 1100px) {
.wnl-stat-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.wnl-page-header {
flex-direction: column;
align-items: flex-start;
padding-top: 72px;
padding-bottom: 12px;
margin-bottom: 12px;
}
.wnl-page-header-title {
font-size: 22px;
}
.wnl-action-row {
width: 100%;
margin-top: 8px;
}
.wnl-container {
padding: 0 16px 24px 16px;
}
.wnl-filter-select {
min-width: 0;
width: 100%;
}
}
@media (max-width: 400px) {
.wnl-stat-row {
grid-template-columns: 1fr;
}
}
/* ── CANONICAL TYPOGRAPHY SCALE (v20260716) ────────────────── */
/* Use these classes instead of inline font-size. Applies to ALL
admin pages. Future implementations MUST use this scale. */
/* Section headers (RECENT LEADS, TOP REFERRERS, etc.) */
.admin-label-section {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
/* Table headers (WHEN, NAME, ENTITY, etc.) */
.admin-label-header {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
/* Table data (all cell content) — the workhorse */
.admin-text {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.9);
}
/* Meta text (timestamps, secondary info) */
.admin-text-meta {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.5);
}
/* Card/page titles */
.admin-title {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.05em;
color: #fff;
}
/* Badge text (LOW, NEW, URGENT, etc.) */
.admin-label-badge {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Tiny labels (counts, file extensions) */
.admin-label-xs {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6);
}
/* Mono-style for code/paths (use sparingly) */
.admin-mono {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.05em;
}
|