Renamr Scaffold
8118a53e35
User feedback after delivery 26: "wheres white and black themes?" - the previous "Light" theme (white bg, black text) was a reasonable literal reading of "have white/black" as one combined theme, but the user meant two distinct named themes. Renamed that theme's id/label from "light" to "White" and added a genuinely new "Black" theme: a true near-black background with a deliberately grayscale accent (light neutral grays instead of any hue), so it reads as an actual black-and-white theme rather than "Aurora but darker" - Aurora already covers the teal/green-accented dark look. White keeps its colorful green/cyan/lilac accents, which is now the visual difference between the two beyond just background color. Settings now lists 5 themes total (Aurora/White/Black/Ocean/ Sunset); the picker grid moved from 2 to 3 columns to fit them better. Verified with an expanded Playwright script (12 checks, up from 10): confirms all 5 themes list correctly, White and Black each apply their real computed background color (not just the data-theme attribute) and persist via save_theme, and the rest of the boot-time/ persistence behavior from delivery 26 still holds. All prior verification suites (47 checks), `cargo test --workspace` (162 tests), and `npm run build` still pass clean.
223 lines
7.1 KiB
CSS
223 lines
7.1 KiB
CSS
/* Aurora Curator's UI theme. The "aurora" theme below is ported 1:1 (hex values) from
|
|
the original FB-Mod fork's AuroraTheme.java / HeaderPanel.java / MainFrame.java so
|
|
the rewrite looks like a continuation of that design rather than a random restyle
|
|
(the app takes its name, "Aurora Curator", from this same Aurora theme) - it stays
|
|
the default. The other four theme blocks below (white/black/ocean/sunset) are Aurora
|
|
Curator's own additions, picked via Settings (gear icon, sidebar footer) and applied
|
|
as a `data-theme` attribute on <html>; every visible color in the app is meant to
|
|
flow through one of these custom properties so switching theme is just switching
|
|
which block of them is active - see the file's own module-doc-style notes on the
|
|
less obvious variables below. */
|
|
:root {
|
|
--dock: #08252b;
|
|
--dock-deep: #051115;
|
|
--dock-mist: #123a42;
|
|
--dock-line: #255660;
|
|
--surface: #0b151a;
|
|
--surface-alt: #101f25;
|
|
--surface-deep: #223940;
|
|
--card: #132229;
|
|
--text: #e8f4f2;
|
|
--muted-text: #9aafb0;
|
|
--aurora-green: #55d7a9;
|
|
--aurora-cyan: #52c7db;
|
|
--aurora-lilac: #a99cff;
|
|
--sunset: #f0b66b;
|
|
--list-selection: #1e4d54;
|
|
--dock-selection: #1d4850;
|
|
/* A button's resting/hover/active background - was hardcoded (#172a31/#203941/
|
|
#28515a) in a handful of spots in RenamePanel.css; pulled out to variables here so
|
|
every theme can supply its own shade instead of leaving a dark box behind on a
|
|
light theme. */
|
|
--btn-bg: #172a31;
|
|
--btn-bg-hover: #203941;
|
|
--btn-bg-active: #28515a;
|
|
/* A small floating popup's background (the Load-files split-button menu). */
|
|
--popup-bg: #16262d;
|
|
/* The primary action button's hover shade - a lightened version of --aurora-green. */
|
|
--accent-hover: #70e3bb;
|
|
/* The header bar's top-to-bottom gradient stops (its middle stop is --surface-alt). */
|
|
--header-grad-a: #111e26;
|
|
--header-grad-b: #0a161c;
|
|
/* Subtle highlight tints for row/button hover states, each a light-on-dark overlay
|
|
for this theme - previously hardcoded as literal rgba(255,255,255,X) across
|
|
RenamePanel.css, which is exactly backwards on a light theme (a white tint on an
|
|
already-light surface is invisible). Named by their alpha so the light theme below
|
|
can supply the mirror-image dark tints at matching intensities. */
|
|
--tint-02: rgba(255, 255, 255, 0.02);
|
|
--tint-03: rgba(255, 255, 255, 0.03);
|
|
--tint-05: rgba(255, 255, 255, 0.05);
|
|
--tint-06: rgba(255, 255, 255, 0.06);
|
|
--tint-16: rgba(255, 255, 255, 0.16);
|
|
--sidebar-width: 158px;
|
|
--header-height: 68px;
|
|
}
|
|
|
|
/* White - a clean white-background/black-text theme, the literal "white" half of the
|
|
theming request. --dock-deep doubles as "the text color that sits well on top of
|
|
--aurora-green" (see RenamePanel.css's .action-button.primary) - here that's white,
|
|
since this theme's --aurora-green is deliberately darkened for contrast on a white
|
|
page, the opposite of the dark themes' light-green-on-dark-text pairing. Keeps
|
|
colorful accents (green/cyan/lilac) unlike Black below, which is deliberately
|
|
grayscale - that's the visual difference between the two beyond just background. */
|
|
:root[data-theme="white"] {
|
|
--dock: #eef2f3;
|
|
--dock-deep: #ffffff;
|
|
--dock-mist: #dde7e9;
|
|
--dock-line: #c7d3d5;
|
|
--surface: #ffffff;
|
|
--surface-alt: #f5f7f8;
|
|
--surface-deep: #dfe6e8;
|
|
--card: #f7f9fa;
|
|
--text: #15191b;
|
|
--muted-text: #5c6b6e;
|
|
--aurora-green: #1f9d74;
|
|
--aurora-cyan: #157e9c;
|
|
--aurora-lilac: #7a68d9;
|
|
--sunset: #c97a1f;
|
|
--list-selection: #d7ece7;
|
|
--dock-selection: #dbeee9;
|
|
--btn-bg: #eef2f3;
|
|
--btn-bg-hover: #e2e9eb;
|
|
--btn-bg-active: #d2dcdd;
|
|
--popup-bg: #ffffff;
|
|
--accent-hover: #29b98b;
|
|
--header-grad-a: #ffffff;
|
|
--header-grad-b: #eef2f3;
|
|
--tint-02: rgba(0, 0, 0, 0.02);
|
|
--tint-03: rgba(0, 0, 0, 0.035);
|
|
--tint-05: rgba(0, 0, 0, 0.05);
|
|
--tint-06: rgba(0, 0, 0, 0.07);
|
|
--tint-16: rgba(0, 0, 0, 0.14);
|
|
}
|
|
|
|
/* Black - a true near-black/white theme, the literal "black" half of the theming
|
|
request. Deliberately grayscale (no hue in --aurora-green/cyan/lilac, unlike every
|
|
other theme including White above) so it reads as an actual black-and-white theme
|
|
rather than just "Aurora but darker" - --aurora-green here is a light neutral gray
|
|
that still works as the primary-button accent against --dock-deep's pure black. */
|
|
:root[data-theme="black"] {
|
|
--dock: #0a0a0a;
|
|
--dock-deep: #000000;
|
|
--dock-mist: #1a1a1a;
|
|
--dock-line: #2e2e2e;
|
|
--surface: #000000;
|
|
--surface-alt: #0d0d0d;
|
|
--surface-deep: #262626;
|
|
--card: #111111;
|
|
--text: #f5f5f5;
|
|
--muted-text: #9a9a9a;
|
|
--aurora-green: #e5e5e5;
|
|
--aurora-cyan: #d0d0d0;
|
|
--aurora-lilac: #bfbfbf;
|
|
--sunset: #cfcfcf;
|
|
--list-selection: #262626;
|
|
--dock-selection: #202020;
|
|
--btn-bg: #141414;
|
|
--btn-bg-hover: #1f1f1f;
|
|
--btn-bg-active: #2a2a2a;
|
|
--popup-bg: #0d0d0d;
|
|
--accent-hover: #ffffff;
|
|
--header-grad-a: #050505;
|
|
--header-grad-b: #000000;
|
|
--tint-02: rgba(255, 255, 255, 0.02);
|
|
--tint-03: rgba(255, 255, 255, 0.03);
|
|
--tint-05: rgba(255, 255, 255, 0.05);
|
|
--tint-06: rgba(255, 255, 255, 0.06);
|
|
--tint-16: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
/* Ocean - a cool blue-toned dark variant. */
|
|
:root[data-theme="ocean"] {
|
|
--dock: #071c2e;
|
|
--dock-deep: #030f1c;
|
|
--dock-mist: #0f3350;
|
|
--dock-line: #1c4a68;
|
|
--surface: #071620;
|
|
--surface-alt: #0c1e2b;
|
|
--surface-deep: #1a3548;
|
|
--card: #0f232f;
|
|
--text: #e7f2f8;
|
|
--muted-text: #93aebe;
|
|
--aurora-green: #4fd0e8;
|
|
--aurora-cyan: #5aa9ff;
|
|
--aurora-lilac: #8ea0ff;
|
|
--sunset: #ffb46b;
|
|
--list-selection: #1a3f57;
|
|
--dock-selection: #193a52;
|
|
--btn-bg: #12293a;
|
|
--btn-bg-hover: #1a3a4f;
|
|
--btn-bg-active: #234a63;
|
|
--popup-bg: #102432;
|
|
--accent-hover: #7fe0f2;
|
|
--header-grad-a: #0c1f2e;
|
|
--header-grad-b: #061420;
|
|
--tint-02: rgba(255, 255, 255, 0.02);
|
|
--tint-03: rgba(255, 255, 255, 0.03);
|
|
--tint-05: rgba(255, 255, 255, 0.05);
|
|
--tint-06: rgba(255, 255, 255, 0.06);
|
|
--tint-16: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
/* Sunset - a warm amber/coral-toned dark variant. */
|
|
:root[data-theme="sunset"] {
|
|
--dock: #2b1408;
|
|
--dock-deep: #150a04;
|
|
--dock-mist: #3d2011;
|
|
--dock-line: #5c3319;
|
|
--surface: #1a0f08;
|
|
--surface-alt: #23140c;
|
|
--surface-deep: #40261a;
|
|
--card: #241610;
|
|
--text: #f7ece3;
|
|
--muted-text: #c2a190;
|
|
--aurora-green: #f0955a;
|
|
--aurora-cyan: #f0b66b;
|
|
--aurora-lilac: #e0866f;
|
|
--sunset: #ffd08a;
|
|
--list-selection: #4a2c17;
|
|
--dock-selection: #452a16;
|
|
--btn-bg: #2c1a10;
|
|
--btn-bg-hover: #3c2416;
|
|
--btn-bg-active: #4f301d;
|
|
--popup-bg: #24160e;
|
|
--accent-hover: #f5b083;
|
|
--header-grad-a: #24140b;
|
|
--header-grad-b: #140b05;
|
|
--tint-02: rgba(255, 255, 255, 0.02);
|
|
--tint-03: rgba(255, 255, 255, 0.03);
|
|
--tint-05: rgba(255, 255, 255, 0.05);
|
|
--tint-06: rgba(255, 255, 255, 0.06);
|
|
--tint-16: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
font-family: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.app-shell {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|