3dtours
f13fc37b5a
Layout - the panel is a cascade of columns: the rail's tabs, the tab's chips, the open chip's sub-chips, then the ruler. A child column no longer hides the column it came from (TEMP -> COLOR TEMP keeps TEMP visible); chips stack one per row instead of wrapping - FRAME's WATERMARK opens its own column, so the frame chips stay put - CREATE RECIPES gets the wide column its two-up form needs WB colour swatches - the ruler draws a colour box under the slider that follows the value: COLOR TEMP is the Kelvin colour (Tanner Helland), TINT runs green -10 -> neutral 0 -> magenta +10 HDF EFFECT - knee 0.55..0.85 -> 0.45..0.75, blur 0.004+0.015n -> 0.006+0.024n of the width, screen alpha 0.15+0.35n -> 0.28+0.52n: a wide halo on the highlights instead of a hairline glow. Web copy of toneShader only — the phone keeps its own tuning. Tabs - rail order is PRESETS, FAVORITED, WB, LIGHT, FX, FRAME, CREATE RECIPES
129 lines
4.3 KiB
CSS
129 lines
4.3 KiB
CSS
/* Theme tokens. Switching = two attributes on <html>, set by ThemeProvider —
|
|
no React re-render, no per-component colour code. Adding an accent group is
|
|
one 3-line block below; see src/theme/themes.ts for the picker's list. */
|
|
|
|
:root {
|
|
--radius: 10px;
|
|
--radius-sm: 7px;
|
|
--rail-w: 84px;
|
|
--col-w: 168px;
|
|
--slider-w: 232px;
|
|
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-heading: var(--font);
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
/* --- font groups -------------------------------------------------------- */
|
|
/* The three pairings offered in Themes; the faces themselves are self-hosted
|
|
by styles/fonts.css, and the picker's list lives in theme/themes.ts. */
|
|
[data-fonts="studio"] {
|
|
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-heading: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
[data-fonts="editorial"] {
|
|
--font: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-heading: "Fraunces", "Be Vietnam Pro", Georgia, serif;
|
|
--mono: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
[data-fonts="native"] {
|
|
--font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-heading: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
|
|
--mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
/* --- base themes --------------------------------------------------------- */
|
|
[data-theme="light"] {
|
|
--bg: #ffffff;
|
|
--bg-sunken: #f6f7f9;
|
|
--bg-elev: #ffffff;
|
|
--border: #dcdfe4;
|
|
--border-soft: #eceef1;
|
|
--text: #14181d;
|
|
--text-dim: #5c6773;
|
|
--danger: #c2402f;
|
|
--accent-l: 42%;
|
|
--accent-fg: #ffffff;
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: #000000;
|
|
--bg-sunken: #0b0b0c;
|
|
--bg-elev: #131315;
|
|
--border: #2a2a2e;
|
|
--border-soft: #1d1d20;
|
|
--text: #f2f3f5;
|
|
--text-dim: #9aa2ad;
|
|
--danger: #ff6b57;
|
|
--accent-l: 60%;
|
|
--accent-fg: #0a0a0a;
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
/* --- accent groups ------------------------------------------------------ */
|
|
[data-accent="amber"] { --accent-h: 33; --accent-s: 92%; }
|
|
[data-accent="blue"] { --accent-h: 214; --accent-s: 88%; }
|
|
[data-accent="emerald"] { --accent-h: 158; --accent-s: 68%; }
|
|
[data-accent="rose"] { --accent-h: 343; --accent-s: 82%; }
|
|
[data-accent="violet"] { --accent-h: 265; --accent-s: 78%; }
|
|
|
|
:root {
|
|
--accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
|
|
--accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 7%));
|
|
--accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.14);
|
|
--accent-line: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.45);
|
|
}
|
|
|
|
/* --- base elements ------------------------------------------------------ */
|
|
* { box-sizing: border-box; }
|
|
html, body, #root { height: 100%; margin: 0; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
button { font: inherit; color: inherit; }
|
|
a { color: var(--accent); }
|
|
|
|
.btn {
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-elev);
|
|
color: var(--text);
|
|
padding: 7px 12px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover { border-color: var(--accent-line); }
|
|
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
|
|
.btn.primary:hover { background: var(--accent-hover); }
|
|
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
|
|
.btn.ghost:hover { color: var(--text); background: var(--bg-sunken); }
|
|
|
|
.field {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.popover {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 6px);
|
|
z-index: 40;
|
|
min-width: 220px;
|
|
background: var(--bg-elev);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 10px;
|
|
}
|