From 72029e0c949514455ad23cf4b8c558219cac857c Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 09:59:50 +0200 Subject: [PATCH] =?UTF-8?q?cleanup:=20.clip-modal-duration-value.invalid?= =?UTF-8?q?=20modifier=20=E2=80=94=202=20inline=20color=20assigns=20gone?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit updateClipDuration in renderer.ts was setting the duration-display element's color to one of two hardcoded hex values inline: #00c853 (green) when the selection was valid and #ff4444 (red) when end <= start. Both colors are already exposed in CSS as var(--success) and var(--error), and the base .clip-modal-duration-value rule was already setting #00c853 — so the green inline assignment was redundant. Switched the base rule to use var(--success) for theme consistency, added a .clip-modal-duration-value.invalid modifier that flips to var(--error), and the renderer now toggles the .invalid class instead of poking at .style.color directly. Two inline style assignments + an if/else branch gone; the JS read more clearly as "set text + flip validity class". Co-Authored-By: Claude Opus 4.7 (1M context) --- src/renderer.ts | 12 +++++------- src/styles.css | 8 +++++++- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/renderer.ts b/src/renderer.ts index a99f27d..6b1bd5d 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -1288,13 +1288,11 @@ function updateClipDuration(): void { const duration = endSec - startSec; const durationDisplay = byId('clipDurationDisplay'); - if (duration > 0) { - durationDisplay.textContent = formatSecondsToTime(duration); - durationDisplay.style.color = '#00c853'; - } else { - durationDisplay.textContent = UI_TEXT.clips.invalidDuration; - durationDisplay.style.color = '#ff4444'; - } + const isValid = duration > 0; + durationDisplay.classList.toggle('invalid', !isValid); + durationDisplay.textContent = isValid + ? formatSecondsToTime(duration) + : UI_TEXT.clips.invalidDuration; updateFilenameExamples(); } diff --git a/src/styles.css b/src/styles.css index 1b2c2d2..153130c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -318,12 +318,18 @@ body { } .clip-modal-duration-value { - color: #00c853; + color: var(--success); font-weight: 600; font-family: 'Consolas', 'Segoe UI Mono', monospace; font-size: 14px; } +/* updateClipDuration flips this class when end <= start so the value + reads as a clear "Ungueltig!" / error message in red. */ +.clip-modal-duration-value.invalid { + color: var(--error); +} + .clip-modal-hint { color: var(--text-secondary); font-size: 12px;