Theme-RoundedYellow: refresh for Stash v0.31 (2.0)

[nexalapp]

A refresh of Rounded Yellow for Stash v0.31, made inside the existing Theme-RoundedYellow.css (no new stylesheet). It keeps the theme's identity: a near-black ground with charcoal cards, large rounded corners, and one warm yellow for everything active.

What changed

• Colour: the palette moves into variables at the top: a near-black page, charcoal cards and controls, one raised grey, one hairline and one yellow. Yellow is used as a fill with dark text, or as text at #f2c230 where it passes WCAG AA on the dark ground. The stock blue that leaked through (top-right icons, size slider, the New button) and Stash's blue-grey panels are now yellow or neutral.
• Radii: two only: 6px for controls and buttons, 20px for cards, panels, menus and dialogs.
• Buttons: primary actions (Edit, New, dialog confirms) are filled yellow with dark text; secondary actions are raised grey; Delete is filled red.
• Top nav: plain labels; the active page is yellow with a yellow underline on the bar's edge; neutral icons on the right.
• Toolbar (Stash v0.29+): dark bordered segments share a 34px height with a yellow-filled 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: the cover fades into the card above a translucent footer band; hover lifts the card 2px with a yellow hairline, selection is a yellow ring; studio chip top-left; bold white resolution and duration on the cover; counts centred and pinned to the bottom so they line up across a row; 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 header; white titles, grey labels, yellow links; tabs with a yellow underline on the bar's line; the slim pinned header slides in only once the full header has scrolled away.
• Scene page: yellow progress bar, a circle behind the big play button that turns yellow on hover, grey tag chips.
• Settings: the active item on a yellow block, white headings, yellow toggles.
• 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; dialogs such as Edit filter fill the screen; long Stash IDs fit the header.
• Theme Switch menu: solid and on the theme's colours.

Version 1.0 → 2.0. README gains a short description and 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).

Scenes	Scene

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

[discourse-stashapp]

This pull request has been mentioned on Stash Forum. There might be relevant details there:

https://discourse.stashapp.cc/t/theme-rounded-yellow/1431/3