3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: move the section jumps to their own strip and grow the Theme menu

Browse Source 
The six section links leave the top bar for a thin shelf under it, each a
bordered pill at the page's normal text size, so the bar itself stays a
row of actions and the jumps still read as buttons.

The Theme menu gains the workspace's colour groups — the landing palette
now takes its hue from the accent tokens — an Auto mode that follows the
OS scheme live, and a dropdown in place of the three font chips.
This commit is contained in:
3dtours
2026-09-18 11:30:12 +07:00
parent e437946ee0
commit 8259bd468d
6 changed files with 123 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+13
View File
@@ -119,6 +119,19 @@
.chip .val { color: var(--text-dim); font-family: var(--mono); font-size: 11px; }
.chip .pro { font-size: 9px; letter-spacing: 0.08em; color: var(--accent); }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }
/* The font group as a dropdown: one row that shows the current pairing instead
of three chips that all have to fit. */
.font-select {
display: block;
width: 100%;
margin-top: 8px;
padding-right: 26px;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa2ad' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.font-select option { background: var(--bg-elev); color: var(--text); }
/* The ruler column: "<" back button, label + live value, slider, colour swatch
for the knobs that drive a hue (WB's TEMPERATURE / TINT). */
docker/frontend/src/styles/landing.css
+40 -24
View File
@@ -8,8 +8,11 @@
--lp-bg: #090a0f;
--lp-bg2: #0d0e12;
--lp-card: #161820;
--lp-amber: #fbbf24;
--lp-orange: #f59e0b;
/* The colour group in the Theme menu retints the page: the workspace already
resolves the accent hue, so the blueprint's amber/orange pair just borrows
it. --lp-red stays the film red, the one fixed point of the palette. */
--lp-amber: var(--accent);
--lp-orange: var(--accent-hover);
--lp-red: #ff5e36;
--lp-cyan: #38bdf8;
--lp-indigo: #818cf8;
@@ -42,7 +45,7 @@
--lp-muted: #5b6472;
--lp-line: rgba(20, 22, 28, 0.12);
--lp-nav: rgba(247, 247, 248, 0.72);
--lp-ink-amber: #a16207;
--lp-ink-amber: hsl(var(--accent-h) var(--accent-s) 32%);
}
[data-theme="light"] .lp-hero h1 { background: linear-gradient(100deg, #14161c 8%, var(--lp-amber) 62%, var(--lp-red) 98%); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .lp-glow { opacity: 0.5; }
@@ -54,10 +57,10 @@
[data-theme="light"] .lp-frame { background: #ffffff; }
[data-theme="light"] .lp-perf i { background: rgba(20, 22, 28, 0.55); box-shadow: none; }
[data-theme="light"] .lp-recipe-card { background: linear-gradient(160deg, #ffffff, #eef0f4); box-shadow: 0 24px 60px rgba(20, 22, 28, 0.18); }
[data-theme="light"] .lp-plan.vip { background: linear-gradient(180deg, rgba(245, 158, 11, 0.14), rgba(255, 255, 255, 0.92)); }
[data-theme="light"] .lp-plan.vip { background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0.92)); }
[data-theme="light"] .lp-toast { background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 50px rgba(20, 22, 28, 0.22); }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
.lp ::selection { background: var(--lp-amber); color: #10121a; }
.lp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.lp h1, .lp h2, .lp h3 { font-family: var(--lp-display); font-weight: 800; line-height: 1.1; margin: 0; }
@@ -93,12 +96,12 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
cursor: pointer;
white-space: nowrap;
}
.lp-btn:hover { border-color: rgba(251, 191, 36, 0.5); }
.lp-btn:hover { border-color: var(--accent-line); }
.lp-btn.lp-primary {
background: linear-gradient(120deg, var(--lp-amber), var(--lp-orange));
border-color: transparent;
color: #14100a;
box-shadow: 0 10px 30px rgba(245, 158, 11, 0.25);
box-shadow: 0 10px 30px var(--accent-soft);
}
.lp-btn.lp-primary:hover { filter: brightness(1.07); }
.lp-btn.lp-sm { padding: 9px 15px; font-size: 13px; }
@@ -118,8 +121,21 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
.lp-logo em { font-style: normal; color: var(--lp-ink-amber); }
.lp-logo-word { white-space: nowrap; }
.lp-logo-mark { border-radius: 8px; display: block; width: 30px; height: 30px; }
.lp-nav-links { display: flex; gap: 16px; margin-left: 14px; font-size: 12.5px; color: var(--lp-muted); }
.lp-nav-links a:hover { color: var(--lp-text); }
/* A short shelf of section jumps under the bar. Each one is a bordered pill,
so it reads as a button; the text keeps the page's normal size while the
shelf itself stays thin. */
.lp-subnav { border-top: 1px solid var(--lp-line); }
.lp-subnav .lp-wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; height: auto; padding-top: 7px; padding-bottom: 7px; }
.lp-subnav-link {
padding: 4px 11px;
border: 1px solid var(--lp-line);
border-radius: 999px;
color: var(--lp-muted);
font-size: 14px;
line-height: 1.35;
white-space: nowrap;
}
.lp-subnav-link:hover { color: var(--lp-text); border-color: var(--accent-line); }
.lp-nav .lp-spacer { flex: 1 1 auto; }
.lp-tools { display: flex; gap: 6px; }
.lp-tool {
@@ -135,13 +151,13 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
font-size: 12px;
cursor: pointer;
}
.lp-tool:hover { color: var(--lp-text); border-color: rgba(251, 191, 36, 0.5); }
.lp-tool:hover { color: var(--lp-text); border-color: var(--accent-line); }
/* The theme popover borrows the workspace's .popover/.chip shell, re-skinned for
the landing palette. */
.lp-theme-pop { background: var(--lp-card); border-color: var(--lp-line); }
.lp-theme-pop .chip { background: transparent; border-color: var(--lp-line); color: var(--lp-muted); }
.lp-theme-pop .chip { background-color: transparent; border-color: var(--lp-line); color: var(--lp-muted); }
.lp-theme-pop .chip:hover { color: var(--lp-text); }
.lp-theme-pop .chip.on { color: var(--lp-ink-amber); border-color: var(--lp-ink-amber); background: rgba(251, 191, 36, 0.12); }
.lp-theme-pop .chip.on { color: var(--lp-ink-amber); border-color: var(--lp-ink-amber); background-color: var(--accent-soft); }
/* The account chip: a face + a name, opening the two things that account can
do — its page (Admin / Profile) and log out. */
.lp-account { display: inline-flex; align-items: center; gap: 7px; }
@@ -157,11 +173,11 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
color: var(--lp-muted);
text-decoration: none;
}
.lp-acc-pop .btn:hover { color: var(--lp-text); border-color: rgba(251, 191, 36, 0.5); }
.lp-acc-pop .btn:hover { color: var(--lp-text); border-color: var(--accent-line); }
.lp-burger { display: none; }
@media (max-width: 1160px) {
.lp-nav-links, .lp-nav .lp-wrap > .lp-btn, .lp-nav .lp-account { display: none; }
.lp-subnav, .lp-nav .lp-wrap > .lp-btn, .lp-nav .lp-account { display: none; }
.lp-burger {
display: inline-flex;
flex-direction: column;
@@ -186,13 +202,13 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
@media (min-width: 1161px) { .lp-sheet { display: none; } }
/* --- 2. hero ------------------------------------------------------------ */
.lp-hero { position: relative; padding: 140px 0 74px; overflow: hidden; }
.lp-hero { position: relative; padding: 184px 0 74px; overflow: hidden; }
.lp-glow {
position: absolute;
inset: -30% -10% auto -10%;
height: 560px;
background:
radial-gradient(420px 280px at 20% 30%, rgba(245, 158, 11, 0.22), transparent 70%),
radial-gradient(420px 280px at 20% 30%, var(--accent-soft), transparent 70%),
radial-gradient(380px 260px at 78% 22%, rgba(255, 94, 54, 0.16), transparent 70%),
radial-gradient(420px 300px at 55% 80%, rgba(129, 140, 248, 0.14), transparent 70%);
pointer-events: none;
@@ -204,8 +220,8 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
gap: 8px;
padding: 6px 13px;
border-radius: 999px;
border: 1px solid rgba(251, 191, 36, 0.35);
background: rgba(251, 191, 36, 0.08);
border: 1px solid var(--accent-line);
background: var(--accent-soft);
color: var(--lp-ink-amber);
font-family: var(--lp-mono);
font-size: 11px;
@@ -303,7 +319,7 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
font-family: var(--lp-mono);
cursor: pointer;
}
.lp-tab[aria-pressed="true"] { border-color: var(--lp-amber); color: var(--lp-ink-amber); background: rgba(251, 191, 36, 0.1); }
.lp-tab[aria-pressed="true"] { border-color: var(--lp-amber); color: var(--lp-ink-amber); background: var(--accent-soft); }
.lp-view { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--lp-line); background: #000; }
.lp-view img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: filter 380ms ease; }
.lp-hud {
@@ -346,7 +362,7 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
/* --- 7. QR -------------------------------------------------------------- */
.lp-qr { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 34px; align-items: center; }
.lp-recipe-card {
border: 1px solid rgba(251, 191, 36, 0.3);
border: 1px solid var(--accent-line);
border-radius: 18px;
background: linear-gradient(160deg, #1b1d27, #0e0f14);
padding: 16px;
@@ -369,8 +385,8 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.4);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
color: var(--lp-ink-amber);
font-family: var(--lp-mono);
font-size: 12px;
@@ -381,7 +397,7 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
/* --- 8. pricing --------------------------------------------------------- */
.lp-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 860px; }
.lp-plan { border: 1px solid var(--lp-line); background: var(--lp-card); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; }
.lp-plan.vip { border-color: rgba(251, 191, 36, 0.45); background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(22, 24, 32, 0.9)); position: relative; }
.lp-plan.vip { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), rgba(22, 24, 32, 0.9)); position: relative; }
.lp-plan.vip::after {
content: 'MOST POPULAR';
position: absolute;
@@ -439,7 +455,7 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
bottom: 18px;
z-index: 60;
max-width: min(340px, calc(100vw - 36px));
border: 1px solid rgba(251, 191, 36, 0.4);
border: 1px solid var(--accent-line);
background: rgba(22, 24, 32, 0.96);
border-radius: 12px;
padding: 12px 16px;