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

feat(studio): draw every slider as a line with a hollow node, and move the shapes into TOOLS

Browse Source 
The default ring was a solid disc on a coloured bar, which read as a crude
block next to the rest of the rail; every range input is now a hairline
track with an outline node in the accent colour, and the temperature and
tint strips keep their gradients on the track itself.

CROP, ROTATE and WATERMARK reshape the frame rather than grade it, so they
belong with the tools that work on the whole image.
This commit is contained in:
3dtours
2026-10-08 11:28:14 +07:00
parent af23f3a7c9
commit 5f78875549
3 changed files with 93 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+68 -14
View File
@@ -323,7 +323,60 @@
font-weight: 700;
cursor: pointer;
}
input[type="range"] { width: 100%; accent-color: var(--accent); }
/* A slider is a line and a node, and nothing else. The line is the theme's own
border ink at a hairline; the node is hollow — a ring drawn in the accent, no
fill of its own — so the control wears the theme's colour instead of the
browser's. `accent-color` goes with the old look: it painted a track and a
solid thumb of its own, and there is nothing of either left for it to paint.
The box is left taller than the line on purpose: the box is the drag target
(a finger is wider than a hairline), the line is what is read. */
input[type="range"] {
width: 100%;
height: 16px;
margin: 0;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
/* One rule per engine: a grouped selector naming a pseudo-element the engine
does not know is dropped whole, and the track went with it (measured). */
input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
border-radius: 999px;
background: var(--border);
}
input[type="range"]::-moz-range-track {
height: 2px;
border-radius: 999px;
background: var(--border);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
margin-top: -4px; /* (10px node - 2px line) / 2 */
border: 1.5px solid var(--accent);
border-radius: 50%;
background: transparent;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
width: 10px;
height: 10px;
border: 1.5px solid var(--accent);
border-radius: 50%;
background: transparent;
}
/* The knob the pointer is on takes the theme's own hover ink, so the node says
it is the one being dragged. */
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: var(--accent-hover); }
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb { border-color: var(--accent-hover); }
.hint { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.hint.ok { color: var(--accent); }
/* A hint that is also a control — the backup row's folder is the reader's to
@@ -1557,19 +1610,20 @@ button.hint:disabled { cursor: default; }
}
.dev-pro { font-size: 9px; letter-spacing: 0.08em; color: var(--accent); }
/* WB's two knobs: the track is the hue the value moves towards, the way
Lightroom's temperature and tint sliders are painted. Everything else keeps
the plain input's accent color. */
.track-temp, .track-tint {
height: 4px; border-radius: 999px;
appearance: none; -webkit-appearance: none;
}
.track-temp { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); }
.track-tint { background: linear-gradient(90deg, #3f9d55, #b9c2cc 50%, #c04ec4); }
.track-temp::-webkit-slider-thumb, .track-tint::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none;
width: 12px; height: 12px; border-radius: 50%;
background: var(--text); border: none; cursor: pointer;
}
Lightroom's temperature and tint sliders are painted — the same line as
everywhere else, only coloured, and a shade thicker so the cast it names can
be read. The node is the app's own ring and is left to the rule above: the
line says where the value is, the ring says where the knob is. The colour sits
on the track and not on the input (where it used to be drawn) because the
line is what is read — a background on the box would have shown through
around the hairline every other knob is drawn with. */
.track-temp::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); height: 4px; }
.track-tint::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3f9d55, #b9c2cc 50%, #c04ec4); height: 4px; }
.track-temp::-moz-range-track { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); height: 4px; }
.track-tint::-moz-range-track { background: linear-gradient(90deg, #3f9d55, #b9c2cc 50%, #c04ec4); height: 4px; }
/* The node is centred on a track twice the hairline's height, so it shifts up
the one pixel the base rule does not account for. */
.track-temp::-webkit-slider-thumb, .track-tint::-webkit-slider-thumb { margin-top: -3px; }
/* --- responsive --------------------------------------------------------- */
@media (max-width: 860px) {