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

web: the mixer hangs a panel on the colour it read, and STRAIGHTEN becomes a scale on the photo

Browse Source
This commit is contained in:
3dtours
2026-09-18 18:27:28 +07:00
parent 10466e122a
commit 27035c4acb
5 changed files with 401 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+62
View File
@@ -314,6 +314,68 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
}
.hsl-swatch { display: block; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.hsl-line { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* A chip that names a colour shows it: the dot rides the leading edge. */
.chip-dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid var(--border); flex: 0 0 auto; }
/* The eyedropper's own icon, riding the cursor inside the pick layer. Its hot
spot is the tip, so it is nudged up and left of the pointer. */
.pick-icon { position: absolute; pointer-events: none; transform: translate(-2px, -21px); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65)); }
.pick-icon-body { fill: #fff; stroke: #111; stroke-width: 1.2; }
.pick-icon-tip { fill: var(--accent); stroke: #111; stroke-width: 1.2; }
/* The mixer's panel for the colour just sampled: it hangs on the photo at the
point the eyedropper read, its swatch on top and HUE/SAT/LUM in one row
under it. The layer is transparent to the pointer, the card is not. */
.hsl-panel-layer { position: absolute; pointer-events: none; }
.hsl-panel {
position: absolute;
pointer-events: auto;
width: 248px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
}
.hsl-card-head { display: flex; align-items: center; gap: 8px; }
.hsl-card-swatch { width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.hsl-card-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); }
.hsl-card-name b { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--text); }
.hsl-card-close { border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); border-radius: 999px; padding: 2px 7px; font-size: 11px; cursor: pointer; }
.hsl-card-knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-slider { min-width: 0; }
.mini-head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.08em; color: var(--text-dim); }
.mini-head b { font-family: var(--mono); letter-spacing: 0; color: var(--text); }
.mini-head b.amber { color: var(--accent); }
/* FRAME's STRAIGHTEN scale: a graduated ruler lying along the foot of the
photo. The layer is transparent to the pointer so the photo still answers a
drag outside the card; the card itself takes the drag. */
.straighten-layer { position: absolute; z-index: 3; pointer-events: none; }
.straighten-ruler {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
padding: 6px 14px 8px;
pointer-events: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
backdrop-filter: blur(6px);
box-shadow: var(--shadow);
user-select: none;
touch-action: none;
}
.straighten-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 10px; letter-spacing: 0.08em; color: var(--text-dim); }
.straighten-head b { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.straighten-head b.amber { color: var(--accent); }
.straighten-scale { position: relative; height: 30px; cursor: ew-resize; }
.straighten-tick { position: absolute; bottom: 12px; width: 1px; height: 7px; background: var(--border); transform: translateX(-50%); }
.straighten-tick.major { height: 12px; background: var(--text-dim); }
.straighten-tick.zero { height: 16px; background: var(--text); }
.straighten-tick i { position: absolute; top: 13px; left: 0; transform: translateX(-50%); font-style: normal; font-size: 9px; color: var(--text-dim); }
.straighten-needle { position: absolute; bottom: 4px; width: 2px; height: 20px; background: var(--accent); transform: translateX(-50%); pointer-events: none; }
/* Histogram overlay: a small translucent frame on the photo, dragged by its
header. The luma curve is a grey fill behind the three channel curves, which
screen over each other the way a Lightroom histogram reads. */