/* Plex-inspired dark theme */
:root {
--bg: #1a1a1a;
--surface: #262626;
--surface-hover: #303030;
--border: #3a3a3a;
--text: #eeeeee;
--text-muted: #999999;
--accent: #e5a00d; /* Plex gold */
--accent-text: #1a1a1a;
--ok: #27a557; /* "in library" green */
--done: #9b6dd6; /* finished show: watched to the end */
--busy: #4a9eda; /* in progress: downloading right now */
--radius: 8px;
/* Controls that hold a word: pills, chips, badges, tabs, the search field.
They were all `border-radius: var(--radius-control)` — a capsule, which forces horizontal
padding to clear the curve and leaves the label floating in the middle of
a shape wider than it needs to be. A softened rectangle takes the same
text in less room and reads as a button rather than as a lozenge.
Anything genuinely round — an avatar, the progress bar's cap — keeps its
own 50%/999px and is not on this token. */
--radius-control: 10px;
/* ---- spacing scale -------------------------------------------------------
Every gap on the site comes from this list. It exists because the site had
twenty different values in it — 3, 5, 7, 9, 11, 13, 18, 22, 28, 30 — each
one arrived at by nudging a single component until it looked right on the
page it was on, which is exactly why nothing lined up with anything else.
Use them in this order of preference and do not invent a value in between:
--sp-1 4px inside a control (a pill's padding, an icon's offset)
--sp-2 8px between things that belong together (a row's buttons)
--sp-3 12px a heading to its own content; between rows
--sp-4 16px between blocks inside one section
--sp-5 24px the top of a page's content; between sections
--sp-6 32px between two sections that are about different things
--sp-7 40px the bottom of a page, so the last row is not on the edge
*/
--sp-0: 2px; /* hairline: inside a badge or pill, never between blocks */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 40px;
/* The page's side margin. Every full-width bar and container uses it,
so the top bar's brand, the tabs, a section heading and a card's left
edge all sit on one line down the page. */
--gutter: 24px;
font-size: 15px;
}
* { box-sizing: border-box; }
/* `hidden` has to actually hide. Any author rule that sets `display` beats the
browser's own [hidden] { display: none } — author styles win over UA styles
at equal specificity — so every .foo { display: flex } silently disarms the
attribute on that element. That has been rediscovered one component at a
time (the tab menu, the power button, the torrent filters); say it once for
the whole app instead. */
[hidden] { display: none !important; }
/* The sticky footer needs a body that is at least a viewport tall. Three
declarations because the first two are fallbacks, not decoration:
`height: 100%` on is what makes the percentage below resolve at all,
`100vh` covers browsers without dvh, and `100dvh` is the only one that is
right on a phone whose toolbars change the viewport. */
html { height: 100%; }
body {
display: flex;
flex-direction: column;
min-height: 100%;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
background: var(--bg);
color: var(--text);
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* ---- header ---- */
.topbar {
background: #121212;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
}
.topbar-inner {
max-width: 960px;
margin: 0 auto;
padding: var(--sp-4) var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.brand h1 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: .3px; }
/* Two-tone title: first word white, second gold. */
.brand h1 #brand2 { color: var(--accent); }
/* The title is the way home from every page. */
.brand-home { text-decoration: none; color: var(--text); }
.brand-home:hover h1 { opacity: .85; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-3); }
.meta { color: var(--text-muted); font-size: .8rem; text-align: right; }
/* Phones: title (+ Plex pill) on the top row, then the language selector and
the account (name, role, links) together on ONE row below it. Gaps are
tightened so a typical name fits without wrapping to a third line. */
@media (max-width: 600px) {
.topbar-inner { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
/* Language pills left, account (sign in / log out) pushed to the right. */
.topbar-right { justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.topbar-right .account { gap: var(--sp-2); font-size: .78rem; row-gap: var(--sp-1); }
.topbar-right .lang { gap: var(--sp-1); }
.topbar-right .lang button { padding: var(--sp-1) var(--sp-2); }
.meta { text-align: left; }
}
/* Plex heartbeat pill; hidden until the tracker writes status.json. */
.plex-status {
font-size: .72rem;
font-weight: 700;
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-control);
border: 1px solid;
white-space: nowrap;
}
.plex-status.up { color: var(--ok); border-color: var(--ok); }
.plex-status.down { color: #e0654f; border-color: #e0654f; }
/* the status dot breathes so the pill feels "alive" */
.plex-status .dot {
display: inline-block;
animation: plex-pulse 1.8s ease-in-out infinite;
}
@keyframes plex-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .3; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
.plex-status .dot { animation: none; }
}
/* ---- filter bar ---- */
.filters { background: var(--bg); }
.filters-inner {
max-width: 960px;
margin: 0 auto;
padding: var(--sp-4) var(--gutter) var(--sp-1);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
flex-wrap: wrap;
}
.account { display: flex; align-items: center; gap: var(--sp-3); font-size: .8rem; }
.account a { color: var(--accent); text-decoration: none; font-weight: 700; }
/* Who you are, in the header and on a request row. Gold and bold, and
nothing about your rights — see topbar.js. */
.who-name { color: var(--accent); font-weight: 700; font-size: 1.02rem; }
.req-by { color: var(--accent); font-weight: 700; font-size: .88rem; }
.banner {
max-width: 960px;
margin: var(--sp-3) auto 0;
padding: var(--sp-2) var(--sp-4);
border: 1px solid #e0654f;
border-radius: var(--radius);
color: #e0654f;
font-size: .85rem;
}
.lang { display: flex; gap: var(--sp-1); }
.lang button {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-control);
font: inherit;
font-size: .75rem;
font-weight: 700;
cursor: pointer;
}
.lang button.active {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-text);
}
.filter-box { margin: var(--sp-1) 0 var(--sp-1); }
.filter-box .search { width: 100%; }
.search {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-control);
font: inherit;
font-size: .85rem;
width: 220px;
}
.search:focus { outline: none; border-color: var(--accent); }
/* ---- second-level page tabs ------------------------------------------------
A narrower bar under the site's top bar, built by adminnav.js on the admin
pages and usernav.js on the user pages. The top bar is the same everywhere
and stays that way; this is a section saying which of its pages you are on. */
.pagenav {
background: #161616;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 9;
}
.pagenav-inner {
max-width: 960px;
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
gap: var(--sp-1);
overflow-x: auto; /* phones: scroll rather than wrap */
scrollbar-width: none;
}
.pagenav-inner::-webkit-scrollbar { display: none; }
.pagenav a {
padding: var(--sp-3) var(--sp-4);
color: var(--text-muted);
text-decoration: none;
font-size: .88rem;
font-weight: 700;
white-space: nowrap;
border-bottom: 2px solid transparent;
}
.pagenav a.active {
color: var(--text);
border-bottom-color: var(--accent);
}
/* On a pointer screen the label IS the tab: there is room for the whole name
and an icon beside it would be decoration. Both the icon and the short name
are in the markup regardless, because the bottom bar on a phone needs them
and a tab that rewrote itself at a breakpoint would need a resize listener
to get back. */
.pagenav a .navicon,
.pagenav a .navshort { display: none; }
@media (hover: hover) and (pointer: fine) {
.pagenav a:hover { color: var(--text); }
}
/* ---- content ---- */
main { max-width: 960px; margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-7); }
.status { color: var(--text-muted); text-align: center; padding: var(--sp-7) 0; }
.status.error { color: #e0654f; }
.quiet {
color: var(--text-muted);
font-size: .85rem;
padding: var(--sp-2) 0 var(--sp-0);
}
/* ---- the landing page ----------------------------------------------------
Hero (you) on top, then two columns: Up next above My shows on the left,
requests on the right. One column on a phone. */
/* Every page's content sits in one of these, and they all have the same
measure and the same breathing room. They had 10px, 18px and 22px tops and
two different bottoms, which is most of why the pages felt unrelated. */
.public-wrap,
.requests-wrap,
.hero,
.home-main,
.admin-wrap {
/* `width` as well as `max-width`, because body is a flex column and the
`margin: 0 auto` below cancels the stretch a flex child would otherwise
get — leaving these shrink-to-fit. Every one of them happened to contain
something wide enough to reach 960 anyway, so nothing looked wrong until
the request list became a grid: `1fr` columns have no intrinsic width to
push with, so it collapsed to three narrow ones in the middle of a
1280px screen. This is a no-op for the other four. */
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: var(--sp-5) var(--gutter) var(--sp-7);
}
/* The request list's own page. It was capped at 760px back when it really was
one column of rows; it is a poster grid now, and 760px of a 1440px screen
was most of why it looked like a phone that had been stretched. Same
measure as every other page. */
.public-wrap .day-nav-title { margin: 0 0 var(--sp-3); font-size: 1.15rem; }
.hero { padding-bottom: var(--sp-5); }
.hero-id { display: flex; align-items: center; gap: var(--sp-4) var(--sp-5); flex-wrap: wrap; }
.hero .p-ident { min-width: 0; flex: 1 1 200px; }
/* Pushed to the right of the name and sized by content — the numbers used to
be a full-width band underneath, which left this whole side empty. */
.hero .p-stats { flex: 0 1 auto; justify-content: flex-end; }
.hero .p-stat { flex: 0 0 auto; min-width: 84px; }
/* The disclosure is a phone thing — a desktop has the width to just show
them, so the button is hidden and .open is never consulted. */
.stats-btn { display: none; }
/* ---- stats: hidden for now ------------------------------------------------
Both the strip and the button that opens it on a phone. The numbers still
come down in the profile payload and app.js still builds them — this is a
curtain, not a removal, so bringing them back is deleting these two lines.
They are counted off My shows today, which measures how diligently somebody
keeps a list rather than what they have watched. */
.p-stats, .stats-btn { display: none !important; }
@media (max-width: 700px) {
/* Full width under the name rather than four boxes squeezed beside it. */
.hero .p-stats { flex-basis: 100%; justify-content: flex-start; }
.hero .p-stat { flex: 1 1 84px; }
}
/* Only on ?u=: whose page this is, and the way back. */
.viewing {
max-width: 960px;
margin: var(--sp-3) auto 0;
padding: var(--sp-2) var(--gutter);
background: rgba(229, 160, 13, .10);
border-left: 3px solid var(--accent);
color: var(--text-muted);
font-size: .85rem;
}
.viewing a { color: var(--accent); font-weight: 700; text-decoration: none; }
.viewing a:hover { text-decoration: underline; }
/* Nothing on somebody else's page may be pressed — see startReadOnly(). */
.home :disabled { cursor: not-allowed; }
/* ---- Up next -------------------------------------------------------------
A strip you scroll sideways, UNDER the shelf it belongs to: My shows is the
day-to-day page and this is the occasional glance, so the shelf gets the
top of the screen. Not a grid — "what is coming" is a short list read left
to right, and wrapping it into rows makes it compete with the shelf above
for the same shape. */
/* Under the shelf it belongs to. No rule between them: they are two halves of
the same question — what you have not watched, and what has not been made —
and a line said they were unrelated. The gap above is the shelf's own
bottom margin; adding one here too is what made it 56px. */
.upnext { margin: 0; padding-top: 0; }
.upnext-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.upnext-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.upnext-count {
background: var(--accent);
color: var(--accent-text);
border-radius: var(--radius-control);
padding: 1px var(--sp-2);
font-size: .78rem;
font-weight: 700;
}
/* The strip and its two arrows. position: relative so the arrows can sit
over the ends of the scroller rather than stealing width from it. */
.upnext-scroller { position: relative; }
/* A real control, not a hint. These were a 55%-opacity gradient washed over
the poster behind them — almost invisible, and since the scrollbar went
they are the only thing saying the strip continues. A solid disc with a
border reads as something to press. */
.upnext-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
background: rgba(18, 18, 18, .92);
color: var(--text);
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.upnext-arrow.left { left: calc(var(--sp-1) * -1); }
.upnext-arrow.right { right: calc(var(--sp-1) * -1); }
.upnext-arrow::before {
content: "\2039";
font-size: 1.7rem;
line-height: 1;
margin-top: -4px; /* the glyph sits high in its own box */
}
.upnext-arrow.right::before { content: "\203a"; }
@media (hover: hover) and (pointer: fine) {
.upnext-arrow:hover { border-color: var(--accent); color: var(--accent); }
}
.upnext-strip {
display: flex;
/* The same gap as every tile grid on the site — this strip is the one place
that had its own. */
gap: var(--sp-4);
overflow-x: auto;
padding: var(--sp-3) 0 var(--sp-2);
scroll-snap-type: x proximity;
/* No scrollbar: the arrows say there is more, and a bar that only shows up
mid-drag was never telling anybody anything. Touch keeps the swipe. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.upnext-strip::-webkit-scrollbar { display: none; }
.upnext-card {
flex: 0 0 140px;
scroll-snap-align: start;
/* The day band is pinned over the top of the poster, the way My shows pins
its episode code — so this is what it is pinned to. */
position: relative;
}
/* ---- the card cap --------------------------------------------------------
One band across the top of a poster, and the SAME band on all three pages
that have posters: which episode is next (My shows), which day it lands (Up
next), where a request has got to. They sit directly above and below each
other on the landing page, so three treatments of one idea read as three
unrelated things.
The band is always the same solid dark ground. Colour is carried by the
TEXT — gold for today or coming, green for already there — which is the one
part that has to differ, and the part that carries the meaning. It used to
be the band itself that was tinted, at 16% opacity, which next to My shows'
solid bar made the same-height band look lighter and smaller.
`.req-list .req-badge` deliberately, not `.req-badge`: the filter pills
above the list are the same class and are still pills. */
.w-topcode,
.upnext-day,
.req-list .req-badge {
position: absolute;
left: 0; right: 0; top: 0;
padding: var(--sp-2);
font-size: .78rem;
font-weight: 700;
letter-spacing: .3px;
/* Two layers, always: a dark base so any poster underneath stays readable,
and a wash of whatever this cap is reporting on top of it. One mechanism —
a state sets --cap-ink and --cap-wash, and both the text and the ground
follow from the same colour. */
background-color: rgba(0, 0, 0, .62);
background-image: linear-gradient(var(--cap-wash, transparent),
var(--cap-wash, transparent));
color: var(--cap-ink, #fff);
text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
/* The states, once, for every cap on the site. rgba rather than the token
because a wash needs the colour at 20% and a hex cannot be faded in place. */
.w-topcode,
.upnext-day.soon,
.req-list .req-badge.added {
--cap-ink: var(--accent);
--cap-wash: rgba(229, 160, 13, .20);
}
.upnext-day.in,
.req-list .req-badge.watched {
--cap-ink: var(--ok);
--cap-wash: rgba(39, 165, 87, .20);
}
.req-list .req-badge.downloading {
--cap-ink: var(--busy);
--cap-wash: rgba(74, 158, 218, .20);
}
.req-list .req-badge.waiting {
--cap-ink: var(--done);
--cap-wash: rgba(155, 109, 214, .20);
}
.req-list .req-badge.rejected {
--cap-ink: #e0654f;
--cap-wash: rgba(224, 101, 79, .20);
}
.req-list .req-badge.requested { --cap-ink: var(--text-muted); }
.upnext-day {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
text-transform: uppercase;
--cap-ink: var(--text-muted);
white-space: nowrap;
}
/* Coming / there / neither: the states above colour the first two. A show the
server does not have at all keeps the plain dark band — there is no promise
to make about it — and today is gold without a wash, because "today" is
about when, not about whether Plex has it. */
.upnext-day.is-today { --cap-ink: var(--accent); }
/* Inside the band the marker is a word, not a pill: the band is already the
coloured thing, and a bordered capsule inside a tinted strip is two
containers saying one thing.
Written against .upnext-card as well so it outweighs `.tile .t-plex` — the
two are equally specific otherwise, and that one comes later in the file,
which left the capsule in place and squeezed the day into an ellipsis. */
.upnext-card .upnext-day .t-plex {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
font-size: .68rem;
color: inherit;
}
.upnext-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The poster comes second, under the band. */
/* The shelves and the strip, full width. This was a two-column grid with the
request list in a fixed 340px second column; the requests moved to their own
page and the column went with them, but the track did not — which left a
third of every screen empty.
No padding-top: the hero directly above it already ends with one. */
.home-main { padding-top: 0; }
/* tile view: poster, name, episode code, in-Plex state */
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: var(--sp-4);
}
/* ---- the tile ------------------------------------------------------------
ONE tile, on every page that has one: the airing grid, My shows, Up next,
the request list. A surface panel with a 2:3 poster at the top and whatever
that page has to say underneath it.
These were three boxes doing the same job. My shows was the odd one: the
card itself had no box at all, and its POSTER carried the radius and a 1px
border, so a shelf of shows read as bordered posters loose on the page
while the strip below it read as cards. What each page puts under the
poster still differs — that is the only thing that should. */
.tile,
.w-card,
.req-list li {
position: relative;
background: var(--surface);
border-radius: var(--radius);
overflow: hidden;
padding-bottom: var(--sp-2);
}
/* Show poster, portrait (2:3); a plain dark placeholder until the image
loads, or when there is none. */
.ep-thumb,
.w-art,
.req-list img {
display: block;
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
object-fit: cover;
background: #141414;
}
.ep-thumb img, .w-art img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.tile .t-name {
font-weight: 700;
font-size: .85rem;
padding: var(--sp-2) var(--sp-2) 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tile .t-code { color: var(--accent); font-size: .75rem; font-weight: 700; padding: var(--sp-0) var(--sp-2) var(--sp-2); }
.tile .t-plex {
display: inline-block;
margin: 0 var(--sp-3);
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
padding: var(--sp-0) var(--sp-2);
border-radius: var(--radius-control);
border: 1px solid var(--border);
color: var(--text-muted);
}
.tile .t-plex.in { color: var(--ok); border-color: var(--ok); }
/* Coming, not missing: the show is on the server, this episode is not yet. */
.tile .t-plex.soon { color: var(--accent); border-color: var(--accent); }
/* tiles that link into Plex (in-library shows) */
a.tile { color: inherit; text-decoration: none; display: block; }
/* The request list. It was an aside in a second column until it got its own
page (requests.html); these are the rules it kept. */
/* ONE section heading for the whole site. The admin pages had .section-title
(30px above, a rule under it), the request page had its own h2 with the
same rule but no gap above, and the two shelf headings had neither — three
treatments for the same thing, which is what made the pages look like they
came from different places. */
.section-title,
.requests-wrap h2,
.upnext-head h2,
.watching-head h2 {
margin: 0 0 var(--sp-3);
font-size: 1.15rem;
font-weight: 700;
}
.section-title,
.requests-wrap h2 {
border-bottom: 1px solid var(--border);
padding-bottom: var(--sp-2);
}
/* Between sections. The first on a page does not need it — the container's
own top padding is already there. */
.section-title { margin-top: var(--sp-6); }
.req-form { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.req-form input {
flex: 1;
/* An carries an intrinsic min-content width of roughly 20 characters
unless told otherwise, which is enough to overflow a narrow column. */
min-width: 0;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: var(--sp-2) var(--sp-3);
border-radius: 8px;
font: inherit;
font-size: .9rem;
}
.req-form input:focus { outline: none; border-color: var(--accent); }
.req-form button {
background: var(--accent);
border: none;
color: var(--accent-text);
font: inherit;
font-weight: 700;
padding: var(--sp-2) var(--sp-4);
border-radius: 8px;
cursor: pointer;
}
/* the requester's own comment — green so it stands out from metadata */
.req-list .r-note { color: var(--ok); font-size: .82rem; font-style: italic; }
/* :empty rather than a reserved line — see .manual-error in admin.css. */
.req-error { color: #e0654f; font-size: .85rem; margin-bottom: var(--sp-2); }
.req-error:empty { display: none; }
/* ---- the request list ----------------------------------------------------
A poster grid on a screen with room, a list of rows on a phone.
It was one layout for both: a 34px thumbnail and a line of text, which is
right on 375px and looks like a phone left running on a desktop. The poster
is the thing you recognise a title by, so on a wide screen it leads.
Same DOM either way — requestRow() builds one shape and CSS decides. The
status badge and the delete sit over the poster here and back on the row on
a phone, which is why they are positioned rather than re-ordered. */
.req-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
/* The same track and the same gap as .watching-row, so a request card and a
My shows card are the same object on two pages rather than two sizes of
nearly-the-same thing. */
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: var(--sp-4);
}
.req-list img {
display: block;
width: 100%;
aspect-ratio: 2/3;
object-fit: cover;
background: #141414;
}
/* The same inset as .tile .t-name and .w-name — this is the tile's body, and
it had its own 12px, which also doubled up with the tile's own bottom
padding. */
.req-list .r-title { padding: var(--sp-2) var(--sp-2) 0; min-width: 0; }
.req-list .r-title a { color: var(--text); text-decoration: none; }
.req-list .r-meta { color: var(--text-muted); font-size: .78rem; }
.req-badge {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-control);
border: 1px solid var(--border);
color: var(--text-muted);
white-space: nowrap;
}
.req-list .r-comment { color: var(--accent); font-size: .78rem; font-style: italic; }
/* The delete ✕ carries .req-badge as well (see requests.js), so its box, its
radius, its padding and its type all come from there. This is only what a
BUTTON needs that a span does not. */
.req-list .r-delete {
background: none;
font-family: inherit;
cursor: pointer;
}
/* The last cell of the preview: "Show all (12)", shaped like the tiles it
completes rather than a line of text under the grid. It carries the tile
box already (.req-list li), so this is only the button inside it — stretched
to the full cell so the whole tile is the target. */
.req-list .req-showall { display: flex; padding: 0; }
.req-list .req-showall button {
flex: 1;
min-width: 0;
/* Centred in the whole cell, not sitting at the top of it — the tile is as
tall as a poster and a label pinned to its ceiling reads as a mistake. */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--sp-3);
background: none;
border: none;
font: inherit;
font-weight: 700;
color: var(--text-muted);
cursor: pointer;
}
/* The status is a CAP now, not a pill — the shared band at the top of this
file. What is left here is unmaking the pill it still is everywhere else:
the outline and the rounded ends belong to the filter chips above the list,
which are the same class and are still chips. The status colour survives as
the text colour, which is how Up next's band says the same kind of thing. */
.req-list .req-badge {
border: none;
border-radius: 0;
white-space: normal;
text-align: center;
}
/* The withdraw ✕ stays a pill, in the card's bottom corner — far from the cap
so a long status ("tagasi lükatud") has the whole width. It carries
.req-badge as well, so it has to opt out of every part of the cap above. */
.req-list .r-delete {
position: absolute;
top: auto;
left: auto;
bottom: var(--sp-2);
right: var(--sp-2);
padding: var(--sp-1) var(--sp-2);
border: 1px solid var(--border);
border-radius: var(--radius-control);
background: rgba(12, 12, 12, .78);
backdrop-filter: blur(3px);
text-shadow: none;
}
.req-badge.requested { border-color: var(--text-muted); }
/* Downloading is its own thing, not a shade of "done": blue says in progress
where gold says landed, and the two used to be the same pill. */
.req-badge.downloading { border-color: var(--busy); color: var(--busy); }
/* waiting: not out yet — nobody's fault, nothing to chase. Purple keeps it
clearly apart from "in progress" gold and "done" green. */
.req-badge.waiting { border-color: var(--done); color: var(--done); }
/* Landed, and still waiting for you to play it — the same gold as anything
else that wants your attention. The ones already played carry .watched
below and stay green, which is what makes the two tellable apart now they
share a status. */
.req-badge.added { border-color: var(--accent); color: var(--accent); }
.req-badge.watched { border-color: var(--ok); color: var(--ok); }
.req-badge.rejected { border-color: #e0654f; color: #e0654f; }
/* Profile filter pills: the same badge, but a button. A