stable.css

/*
 *  club-QuickBox skin for ruTorrent -- scrollable-table (.stable) engine.
 *  Torrent list, file list, peer and tracker lists all share this engine.
 *  Every color reads from a --qb-* token; the only rasters are the kept
 *  column-drag ghost and resize grip, both replaced here with token chrome.
 */

/* ============================================================
 * Table shell + engine color contract
 * ============================================================ */
.stable {
	border: none;
	background: var(--qb-surface);
	--header-bg-color: var(--qb-surface);
	--header-bg-image: none;
	--header-border-color: var(--qb-border);
	--col-resize-sep-bg-color: var(--qb-border);
	--row-border-color: var(--qb-border-soft);
	/* Zebra tint for the odd row when the user turns on "alternate list
	 * background colors". Taken from the surface->surface-2 ramp (not a
	 * foreground wash, which lands on top of surface-2 on the dark variants),
	 * so the odd row sits strictly between the even row (surface) and the hover
	 * (surface-2): subtle on every variant, yet hover and selection still read. */
	--cqb-row-stripe: color-mix(in srgb, var(--qb-surface-2) 45%, var(--qb-surface));
	--row-odd-bg-color: var(--cqb-row-stripe);
	--row-even-bg-color: var(--qb-surface);
	--row-active-bg-color: var(--qb-surface-3);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Header -- 36px, 11px uppercase muted, one bottom hairline,
 * no per-cell boxes, SVG sort chevron on the active column.
 * ============================================================ */
.stable thead {
	background: var(--qb-surface);
	border: none;
	border-bottom: 1px solid var(--qb-border);
	color: var(--qb-fg-muted);
	font-family: var(--qb-font);
	text-shadow: none;
}

.stable thead table tr {
	background: none;
	border: none;
}

.stable thead table tr td {
	position: relative;
	border: none;
	background: transparent;
	color: var(--qb-fg-muted);
	font-family: var(--qb-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 16px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.stable thead table tr td:hover {
	color: var(--qb-foreground);
	background: var(--qb-surface-2);
}

.stable thead td div {
	height: 36px;
	display: flex;
	align-items: center;
	padding: 0 20px 0 10px !important;
}

/* Sort chevron: the engine toggles .asc / .desc on the active header cell. */
.stable thead table tr td.asc::after,
.stable thead table tr td.desc::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	background-color: var(--qb-primary);
	-webkit-mask: center / 12px no-repeat;
	mask: center / 12px no-repeat;
}

.stable thead table tr td.asc::after {
	-webkit-mask-image: url(images/icons/sort-asc.svg);
	mask-image: url(images/icons/sort-asc.svg);
}

.stable thead table tr td.desc::after {
	-webkit-mask-image: url(images/icons/sort-desc.svg);
	mask-image: url(images/icons/sort-desc.svg);
}

.stable thead table tr td.asc,
.stable thead table tr td.desc {
	color: var(--qb-foreground);
}

/* Column resize grip -- a hairline, never a raster. */
.stable thead div.resz {
	border: none;
	border-right: 1px solid var(--qb-border);
	background: none;
	width: 1px;
}

.stable thead div.resz:hover {
	border-right-color: var(--qb-primary);
}

/* ============================================================
 * Body -- 32px rows, hover wash, accented selection,
 * soft hairline separators, tabular numerics.
 * ============================================================ */
.stable-body,
.stable tbody {
	background: var(--qb-surface);
	color: var(--qb-foreground);
	text-shadow: none;
}

.stable tbody tr,
.stable-body tr {
	cursor: pointer;
	border: none;
}

.stable tbody tr td,
.stable-body td {
	border: none;
	border-bottom: 1px solid var(--qb-border-soft);
	background-color: var(--qb-surface);
	vertical-align: middle;
	transition: background-color 0.12s ease;
}

.stable tbody tr td div:not(.meter-value),
.stable-body td div:not(.meter-value) {
	font-family: var(--qb-font) !important;
	font-size: 11px;
	line-height: 16px;
	height: 20px !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.stable-body tr {
	height: 32px;
}

/* Zebra: the odd-row stripe is painted by the engine (it adds .alternate to
 * every table) from --row-odd-bg-color, so it appears only when the user
 * enables "alternate list background colors" and the rows stay flat when it is
 * off. The engine floors its virtual-scroll window to an even row index, so the
 * stripe holds steady while scrolling, sorting or filtering a long list. */

/* Hover wins over the stripe on every row, striped or flat. The .alternate-
 * scoped selector outranks the engine's striped-odd rule so hover always shows. */
.stable-body tr:hover td,
.stable tbody tr:hover td,
.stable.alternate .stable-body tr:hover td {
	background-color: var(--qb-surface-2);
}

/* Selection -- primary tint, winning over both the stripe and hover. Tint only;
 * no left-edge accent bar (an AI-UI tell). */
.stable tbody tr.selected td,
.stable-body tr.selected td,
.stable.alternate .stable-body tr.selected td {
	background-color: var(--qb-surface-3);
	color: var(--qb-foreground);
	text-shadow: none;
}

/* ============================================================
 * Column drag ghost + separator (token chrome, no raster)
 * ============================================================ */
.stable-move-header,
.gecko .stable-move-header,
.ie .stable-move-header,
.webkit .stable-move-header {
	background: var(--qb-surface-3);
	border: 1px solid var(--qb-primary);
	border-radius: var(--qb-radius);
	opacity: 0.85;
}

.stable-active-header {
	border-color: var(--qb-primary) !important;
}

.stable-separator-header {
	background: var(--qb-primary);
	width: 2px;
}

/* Scroll-position strip -- token surface, no headers.png. */
.stable-scrollpos,
.stable-scrollpos:nth-child(2n+1) {
	background: var(--qb-surface-2);
	height: 16px;
	line-height: 16px;
	border-bottom: 1px solid var(--qb-border);
	color: var(--qb-fg-muted);
}

/* Progress cells are styled in css/table.css (single-track recipe). */

/* ============================================================
 * Status / type icon cell
 * ============================================================ */
.stable-icon {
	float: left;
	height: 16px;
	width: 18px;
	margin: 8px 6px 0 6px;
	padding: 0 !important;
}