Renamr Scaffold
03390b43f1
Requested directly: "lets add some themeing into it now, perhaps under the configuration, have white/black, and some more colors." There was no existing app-wide Settings/Configuration surface - every prior setting lived in its own panel-specific modal (Fetch Data Settings, subtitle provider settings) - so this adds the app's first one: a palette-icon button in the sidebar footer opens a new Settings modal with a 2x2 grid of theme swatches. Four themes: Aurora (the existing dark teal/green look, unchanged, stays the default), Light (a clean white/black theme - the literal "white/black" ask), Ocean (a cool blue-toned dark variant), and Sunset (a warm amber-toned dark variant) - the "some more colors" part. Picking one applies instantly via a `data-theme` attribute on <html> and persists through new get_theme/save_theme commands (added to settings.rs/lib.rs alongside delivery 25's movie-naming- scheme fix), applied on every future launch by a boot-time effect in App.tsx so it takes effect even if Settings is never reopened. theme.css's variable set was expanded to cover every place a color was previously hardcoded outside the existing --dock/--surface/etc. variables, so the whole app actually re-themes instead of leaving dark boxes behind on the Light theme: button resting/hover/active shades, the Load-files popup background, the primary button's hover tint, the header's gradient stops, and five levels of white-tint row/button hover highlights (RenamePanel.css/Header.css) all moved to new variables (--btn-bg*, --popup-bg, --accent-hover, --header- grad-a/b, --tint-02/03/05/06/16) with theme-specific values - the light theme in particular needed dark tints instead of white ones for hover states to stay visible on a white background. Verified with a new Playwright script covering: default theme on a fresh install, the Settings modal listing all 4 themes with the right one marked selected, clicking a theme applying it immediately (actual computed background color and CSS variable checked, not just the data-theme attribute) and saving it, and a previously-saved theme applying on boot before Settings is ever opened. Screenshots taken of all 4 themes across the main view and the Naming Scheme editor (whose buttons/popups were part of the hardcoded-color cleanup) to confirm visually. All prior verification suites (47 checks across naming-scheme/match-fetch/hash-files/movie-scheme), `cargo test --workspace` (162 tests), and `npm run build` still pass clean.
108 lines
2.1 KiB
CSS
108 lines
2.1 KiB
CSS
.sidebar {
|
|
width: var(--sidebar-width);
|
|
flex: 0 0 var(--sidebar-width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 64px 6px 14px;
|
|
position: relative;
|
|
/* Approximates the original's diagonal LinearGradientPaint(0,0 -> width,height,
|
|
[dock-deep, dock, dock-mist] at [0, 0.72, 1]). */
|
|
background: linear-gradient(165deg, var(--dock-deep) 0%, var(--dock) 72%, var(--dock-mist) 100%);
|
|
}
|
|
|
|
.sidebar::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 1px;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, var(--aurora-green) 0%, var(--aurora-cyan) 48%, var(--aurora-lilac) 100%);
|
|
}
|
|
|
|
.sidebar-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 8px 9px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-item {
|
|
all: unset;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: 54px;
|
|
padding: 0 10px;
|
|
border-radius: 14px;
|
|
color: var(--muted-text);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-item:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.sidebar-item.selected {
|
|
background: rgba(0, 0, 0, 0.13);
|
|
color: var(--text);
|
|
}
|
|
|
|
.sidebar-item-accent {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 11px;
|
|
bottom: 11px;
|
|
width: 3px;
|
|
border-radius: 6px;
|
|
background: var(--aurora-cyan);
|
|
}
|
|
|
|
.sidebar-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.sidebar-settings-button {
|
|
all: unset;
|
|
box-sizing: border-box;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
color: var(--muted-text);
|
|
cursor: pointer;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.sidebar-settings-button:hover {
|
|
color: var(--text);
|
|
background: var(--tint-06);
|
|
}
|
|
|
|
.sidebar-wordmark {
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
background: linear-gradient(135deg, var(--aurora-cyan), var(--aurora-lilac));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.sidebar-version {
|
|
font-size: 10px;
|
|
color: var(--muted-text);
|
|
opacity: 0.7;
|
|
}
|