From c8fe5c919d61c21ff1d7b2650a4f292d907e355f Mon Sep 17 00:00:00 2001 From: 3dtours Date: Thu, 8 Oct 2026 14:38:25 +0700 Subject: [PATCH] fix(studio): give the temperature and tint tracks their colour back MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Every range rule now names `input[type="range"]` itself, so the class-only WB rules tied with the plain hairline that follows them and lost — both sliders were drawing the same grey line as every other knob, and their node sat a pixel off the thicker track. Measured on the panel: the gradients are back in amber and blue, and the ring is centred on the line. --- docker/frontend/src/styles/app.css | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css index a1fa246..de18647 100644 --- a/docker/frontend/src/styles/app.css +++ b/docker/frontend/src/styles/app.css @@ -1638,14 +1638,17 @@ button.hint:disabled { cursor: default; } 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; } + around the hairline every other knob is drawn with. + Each selector keeps the base rule's own `input[type="range"]` on it: the + class alone ties with that rule on specificity, and the later one — the plain + grey — would have won the track. */ +input[type="range"].track-temp::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); height: 4px; } +input[type="range"].track-tint::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3f9d55, #b9c2cc 50%, #c04ec4); height: 4px; } +input[type="range"].track-temp::-moz-range-track { background: linear-gradient(90deg, #3f6fd8, #b9c2cc 50%, #e8a33d); height: 4px; } +input[type="range"].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; } +input[type="range"].track-temp::-webkit-slider-thumb, input[type="range"].track-tint::-webkit-slider-thumb { margin-top: -3px; } /* --- responsive --------------------------------------------------------- */ @media (max-width: 860px) {