main ← nexalapp:theme-plex-refresh
opened 04:21PM - 15 Oct 26 UTC
A refresh of the Plex theme for Stash v0.31, made inside the existing `Theme-Ple…x.css` (no new stylesheet). It keeps the theme's direction: the classic dark media-server look, with a blurred warm-grey backdrop, translucent black cards and flat boxes. It is not a copy of any vendor interface or brand marks.
**What changed**
- **No external images:** the backdrop was two images hot-linked from GitHub user content. It is now a CSS gradient that shifts from slate at the top to warm brown at the bottom, on a fixed layer so it also stays put on phones. Nothing is loaded from outside the plugin.
- **Colour:** the palette moves into variables at the top: one translucent black for cards, one for controls, a near-opaque top bar, a solid tone for menus and dialogs, one hairline and one gold. Gold is a fill with dark text, or text at `#f0bb45`, both WCAG AA. The stock blue that leaked through (toggles, size slider, links, Stash ID chip, active view, top-right icons) and Stash's blue-grey panels are gone.
- **Radii:** one scale, 3 / 4 / 6px.
- **Buttons:** primary actions (Edit, New, dialog confirms) are filled gold with dark text; secondary actions sit on a lighter translucent box; Delete is filled red.
- **Top nav:** near-opaque dark bar with icons beside the labels; the active page on a lighter box.
- **Toolbar (Stash v0.29+):** dark translucent segments share a 34px height with a gold active view; the filter-sidebar toggle no longer hangs off the page.
- **Pagination:** centred with the result count on the same row; the floating bottom pagination is kept.
- **Cards:** translucent black with the cover fading into the body; bold white resolution and duration on the cover; descriptions in the second grey so titles lead; a hairline above centred counts pinned to the bottom so they line up across a row; hover lifts the card 2px with a gold hairline, selection is a gold ring; the favourite heart matches the select checkbox; studio and tag logos sit in a 16:9 box; performer portraits are 2:3.
- **Home page:** carousel arrows sit inside the page and are centred on the cards; only whole cards are shown, and every card in a row is the same height.
- **Detail pages:** full-bleed performer portrait fading into the backdrop; the active tab on a dark box with an underline; the slim pinned header is solid and slides in only once the full header has scrolled away.
- **Scene page:** gold progress bar and ratings, a circle behind the big play button that turns gold on hover.
- **Settings:** the active item on a lighter box, gold toggles.
- **Menus and dialogs:** solid so they read over the backdrop; dialogs such as Edit filter fill the screen on phones.
- **Phones:** the filter sidebar opens as a full-screen sheet with a full-width results button (side by side with a single column of cards on small tablets); the list toolbar fits on two rows; the ☰ menu is an even grid of tiles; long Stash IDs fit the header.
- **Theme Switch menu:** solid and on the theme's colours.
Version 1.0.5 → 2.0.0. The README drops the "host backgrounds locally" steps (there are no images any more) and gains new screenshots.
### Screenshots
Taken on an empty Stash v0.31.1 with demo content: fictional titles and names, and openly licensed photos blurred heavily so no one is identifiable (credits on the [screenshots branch](https://github.com/nexalapp/CommunityScripts/tree/screenshots)).
| Scenes | Scene |
|---|---|
|  |  |
|  |  |
<img src="https://raw.githubusercontent.com/nexalapp/CommunityScripts/644ab9d25d8287c71573eaaeb556c1096b750f5a/Theme-Plex/mobile-scenes.jpg" alt="Scenes on a phone" width="240"> <img src="https://raw.githubusercontent.com/nexalapp/CommunityScripts/644ab9d25d8287c71573eaaeb556c1096b750f5a/Theme-Plex/mobile-scene.jpg" alt="A scene on a phone" width="240">
### Testing
Tested on Stash v0.31.1 (Docker) in Chrome at 1440×900, 650×900 and 390×844, on a real library of several thousand scenes and on an empty instance with demo content: home carousels, scene, performer, studio and tag grids with the size slider, the filter sidebar and selection toolbar, scene, performer and studio pages, settings and the task queue, dialogs and the Theme Switch menu. Validated with `node validate.js --ci`.
### AI disclosure
This change was written with Claude (Anthropic) in Claude Code, from a design mockup. I reviewed the code and tested it on my own Stash install before submitting.
🤖 Generated with [Claude Code](https://claude.com/claude-code)