web: a knob's ruler stands in the strip's slot, and a sub-chip is its name again
The strip a chip opened kept a row of its own while a knob's ruler opened over it, so WB's COLOR TEMP put the panel on the screen twice — the rows in the strip and the panel under them — and charged the photo a row for the saying. The path under the bar (.crumb) already names the panel the ruler came from and is one tap from its strip, so the ruler now stands in the strip's slot and the strip stands down with the bar: on 390x844 LIGHT's WB strip is 42px and the photo 639px, COLOR TEMP's ruler 60px and the photo 621px, the path TABS > LIGHT > WB > COLOR TEMP walking back to the strip and then to the bar. A sub-chip also wore the initials of its own label on a tile over it — COLOR TEMP as CT, PRO NEG HI as PNH — which is the name the pill already prints, spelled twice and set 60px tall: LIGHT's WB strip measured 73px on that tile, 42px as the name alone. The ruler's own "<" goes with them: the path names the strip it would reopen, and a wide screen draws neither the path nor a ruler in the bar. Checks: - npm run build (tsc --noEmit + vite) clean: dist/assets/index-2IP_1LL_.css 71.42 kB. - Chromium 390x844, light and dark, LIGHT: the bar 40px / the photo 641px; WB open, the bar gone and its strip 42px in the slot, the photo 639px; COLOR TEMP's ruler 60px in that slot, the photo 621px, the path TABS > LIGHT > WB > COLOR TEMP; crumb-strip lands back on the WB strip and crumb-tab on the bar at 641px. No page error and no sideways scroll (390px of 390px) in any state; on 1280x900 .dev-panels is painted and .dev-chips/.crumb are not.
This commit is contained in:
@@ -114,11 +114,10 @@
|
||||
/* 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); }
|
||||
/* Three things that belong to the phone alone: the mark a sub-chip wears on its
|
||||
tile, the path back up under the strip, and LIGHT's panels as a chip row. A
|
||||
desktop draws none of them — a chip there is its label, every column is in
|
||||
sight, and LIGHT's panels are the column itself. */
|
||||
.chip-icon, .crumb, .dev-chips { display: none; }
|
||||
/* Two things that belong to the phone alone: the path back up under the strip,
|
||||
and LIGHT's panels as a chip row. A desktop draws neither — every column is
|
||||
in sight, and LIGHT's panels are the column itself. */
|
||||
.crumb, .dev-chips { display: none; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
/* The rule a strip is read across (the mixer's PICK, its bands, the three
|
||||
knobs): a line of its own, so it breaks the row it is written into whichever
|
||||
@@ -1657,7 +1656,17 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
|
||||
.workspace:has(.chips > .col-sub[data-col="options"]) .col-main,
|
||||
.workspace:has(.chips > .col-sub[data-col="wm"]) .col-main { display: none; }
|
||||
|
||||
/* --- a chip's own sub-chips: the tiles the strip is drawn as ------------- */
|
||||
/* One strip at a time holds here too: the ruler a knob opens is the last
|
||||
strip of the walk, so it takes the place of the strip that opened it. The
|
||||
panel it came from stands down rather than sitting under the ruler it
|
||||
launched — the path under the bar (.crumb) already names that panel, so
|
||||
the row the panel would hold is a row of the photo spent on a name the
|
||||
finger can read below. With the strip and the bar both gone the ruler is
|
||||
the only thing left between the photo and the path, which is the slot. */
|
||||
.workspace:has(.col[data-col="slider"]) .col-sub[data-col="options"],
|
||||
.workspace:has(.col[data-col="slider"]) .col-main { display: none; }
|
||||
|
||||
/* --- a chip's own sub-chips: the pills the strip is drawn as ------------- */
|
||||
.col-sub:not(.wm-extra) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@@ -1668,36 +1677,6 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.col-sub:not(.wm-extra) .chip-row { flex-wrap: nowrap; }
|
||||
/* A sub-chip whose options are buttons wears them as tiles — a mark over a
|
||||
short name, in a bordered square — the way an icon set is read on a phone.
|
||||
A list of NAMES (the recipes, a frame's history) keeps the pill: there the
|
||||
name is the whole point and a square would cut it off. */
|
||||
.col-sub[data-col="options"] .chip,
|
||||
.col-sub[data-col="mask"] .chip {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 4px 3px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.chip-icon { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text-dim); }
|
||||
.col-sub .chip.on .chip-icon { color: inherit; }
|
||||
.col-sub[data-col="options"] .chip .chip-label,
|
||||
.col-sub[data-col="mask"] .chip .chip-label {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
/* PRO is a mark on the corner of the tile, not a third line in it. */
|
||||
.col-sub[data-col="options"] .chip .pro,
|
||||
.col-sub[data-col="mask"] .chip .pro { position: absolute; top: 2px; right: 3px; font-size: 7px; }
|
||||
/* The strip's own name is a heading, not a pick: it keeps the leading edge of
|
||||
the line and drops the button around it. */
|
||||
.col-sub .chip[data-key^="hint-"] {
|
||||
@@ -1713,7 +1692,7 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* --- the open ruler: the row over those -------------------------------- */
|
||||
/* --- the open ruler: the strip's own slot ------------------------------ */
|
||||
/* A ruler is the photo's own scale, not a panel: no box, no fill, just the
|
||||
ticks. They are drawn in the theme's own ink — dark on the light theme,
|
||||
light on the dark — at two weights, a finer mark every eighth of the track
|
||||
@@ -1732,6 +1711,11 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
/* The way back is the path under the bar (.crumb), which names the panel the
|
||||
ruler came from — the strip this "<" would reopen, one row lower and with
|
||||
the rest of the walk beside it. A wide screen draws no path, so the button
|
||||
is the phone's alone to drop. */
|
||||
.col[data-col="slider"] .back { display: none; }
|
||||
.col[data-col="slider"] input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
Reference in New Issue
Block a user