1.quick-add { position: relative; flex: 1; display: flex; justify-content: flex-end; align-items: center; }
2.quick-add .search { flex: 0 1 280px; min-width: 110px; }
3.quick-add .reveal button { margin-left: 6px; }
4/* Floats below the field so an error doesn't push the page down. */
5.quick-add .error {
6 position: absolute;
7 top: calc(100% + 4px);
8 right: 0;
9 z-index: 2;
10 pointer-events: none;
11 width: max-content;
12 max-width: 320px;
13 padding: 3px 8px;
14 border-radius: 6px;
15 background: var(--raised);
16 font-size: 12px;
17}
18.quick-add .search[aria-invalid="true"] { border-color: color-mix(in srgb, var(--critical) 60%, var(--line)); }
19.stat:is(.down, .up) { color: var(--text); font-weight: 600; }
20.stat.down { background: color-mix(in srgb, var(--series-1) 14%, var(--surface)); border-color: color-mix(in srgb, var(--series-1) 35%, var(--line)); }
21.stat.up { background: color-mix(in srgb, var(--series-2) 14%, var(--surface)); border-color: color-mix(in srgb, var(--series-2) 35%, var(--line)); }
22.stat.down svg { color: var(--series-1); }
23.stat.up svg { color: var(--series-2); }
24
25.torrent-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
26.torrent-filters .search { max-width: 220px; margin-left: auto; }
27
28.torrents.fill { overflow: auto; }
29.torrents > table.data { table-layout: fixed; }
30.torrents th.progress { width: 148px; }
31.torrents th.size { width: 72px; }
32.torrents th.speed { width: calc(92px + var(--gutter)); }
33.torrents tr.torrent > td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
34.torrents td.name button {
35 display: block;
36 width: 100%;
37 border: 0;
38 padding: 0;
39 background: none;
40 color: inherit;
41 font: inherit;
42 text-align: left;
43 overflow: hidden;
44 text-overflow: ellipsis;
45 cursor: pointer;
46}
47.torrents tr.open td.name button { white-space: normal; overflow-wrap: anywhere; }
48.torrents tr.torrent { cursor: pointer; }
49.torrents tr.torrent:hover td { background: var(--hover); }
50.torrents tr.torrent.open td { background: var(--accent-wash); border-bottom-color: transparent; }
51.torrents tr.paused td.name { color: var(--text-2); }
52.torrents tr.outside > td { opacity: 0.55; }
53.torrents td.progress > div { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; font-size: 12px; }
54.torrents td.progress .meter { min-width: 0; height: 5px; }
55.torrents td.progress .status-label { grid-column: 2; min-width: 0; }
56.torrents td.speed span { display: inline-flex; gap: 3px; align-items: center; }
57.torrents td.speed .down svg { color: var(--series-1); }
58.torrents td.speed .up svg { color: var(--series-2); }
59
60.torrents tr.expanded > td { background: var(--panel); padding: 8px 10px 10px; white-space: normal; }
61.torrent-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
62.torrent-actions .queue { display: flex; gap: 4px; align-items: center; margin-left: 10px; }
63.torrent-actions .queue span { color: var(--text-2); font-size: 12px; margin-right: 4px; }
64.torrent-detail .facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 4px; font-size: 12px; }
65.torrent-detail .facts div { display: flex; gap: 6px; }
66.torrent-detail .facts dt { color: var(--muted); }
67.torrent-detail .facts dd { margin: 0; font-variant-numeric: tabular-nums; }
68.torrent-detail .empty { padding: 12px 0; margin: 0; font-size: 12px; }
69.torrent-detail table.files { table-layout: fixed; }
70.torrent-detail table.files td { border-bottom-color: var(--line); padding: 4px 6px; }
71.torrent-detail table.files td.name { overflow-wrap: anywhere; padding-left: 0; }
72.torrent-detail table.files td:nth-child(2) { width: 72px; }
73.torrent-detail table.files td.get { width: 48px; }
74.torrent-detail .download { display: inline-grid; place-items: center; width: 26px; height: 18px; border-radius: 5px; color: var(--accent); }
75.torrent-detail .download:hover { background: var(--accent-wash); }
76.torrent-detail .file-skeleton { height: 22px; margin-top: 6px; }
77.torrents .row-skeleton { height: 16px; margin: 11px var(--gutter); }
78
79.torrent-name { overflow-wrap: anywhere; }
80.torrent-actions a.button { gap: 5px; }