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

web: accent the brand and add the studio's quick gestures

Browse Source 
- the brand "Cam", the avatar and the signed-in name follow the theme accent
- double-click a slider track resets that parameter; double-click the photo
  toggles 1:1 and the whole photo on the stage
- `*`, or a recipe chip dragged onto the star, files the look under FAVORITED
- RESET under CREATE clears the draft form, and the button now sits under a
  rule at the foot of the column
This commit is contained in:
3dtours
2026-09-18 12:09:06 +07:00
parent 0f52572f20
commit 567f650bbb
6 changed files with 144 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+10 -5
View File
@@ -15,7 +15,7 @@
}
.brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-decoration: none; }
.brand img { border-radius: 8px; }
.brand em { font-style: normal; font-weight: 400; color: var(--text-dim); }
.brand em { font-style: normal; font-weight: 400; color: var(--accent); }
/* The page name, top-left beside the mark — the same pair /admin and /profile
carry, so every screen says where the visitor is. */
.page-name { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
@@ -96,6 +96,9 @@
/* CREATE RECIPES draws a two-up form, so its column is the wide one. */
.col-create { width: 300px; }
.col-sub { background: var(--bg-elev); }
/* RESET is the way out of an edit, not one more chip: a rule and some air keep
it apart from the tab's own buttons at the foot of the column. */
.reset-row { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* In a column the chips stack: one chip per row, full width. */
.col .chip-row { flex-direction: column; align-items: stretch; }
@@ -330,7 +333,7 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
/* The mark and the page name, top-left, always a way back to the landing page —
the same pair the studio's TopBar carries. */
.adm-brand { display: flex; align-items: center; gap: 6px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.adm-brand em { font-style: normal; font-weight: 400; color: var(--text-dim); }
.adm-brand em { font-style: normal; font-weight: 400; color: var(--accent); }
.adm-brand img { border-radius: 8px; }
.adm-slot { display: flex; flex-direction: column; gap: 3px; letter-spacing: 0.04em; }
.adm-slot select { width: 100%; }
@@ -439,9 +442,9 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
height: 26px;
border-radius: 999px;
overflow: hidden;
background: var(--bg-sunken);
border: 1px solid var(--border);
color: var(--text-dim);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
color: var(--accent);
font-size: 11px;
font-weight: 600;
line-height: 1;
@@ -451,6 +454,8 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
.avatar-row { display: flex; align-items: center; gap: 10px; }
.avatar-row .avatar { width: 46px; height: 46px; font-size: 17px; }
.account-btn { display: inline-flex; align-items: center; gap: 7px; }
/* The signed-in name rides the accent with the face beside it. */
.btn.account-btn { color: var(--accent); }
/* --- responsive --------------------------------------------------------- */
@media (max-width: 860px) {