Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: .clip-modal-duration-value.invalid modifier — 2 inline color assigns gone

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 09:59:50 +02:00
parent 45dfd4f6fd
commit 72029e0c94
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/renderer.ts
View File

@ -1288,13 +1288,11 @@ function updateClipDuration(): void {
const duration = endSec - startSec; const duration = endSec - startSec;
const durationDisplay = byId('clipDurationDisplay'); const durationDisplay = byId('clipDurationDisplay');
if (duration > 0) { const isValid = duration > 0;
durationDisplay.textContent = formatSecondsToTime(duration); durationDisplay.classList.toggle('invalid', !isValid);
durationDisplay.style.color = '#00c853'; durationDisplay.textContent = isValid
} else { ? formatSecondsToTime(duration)
durationDisplay.textContent = UI_TEXT.clips.invalidDuration; : UI_TEXT.clips.invalidDuration;
durationDisplay.style.color = '#ff4444';
}
updateFilenameExamples(); updateFilenameExamples();
} }

8
src/styles.css
View File

@ -318,12 +318,18 @@ body {
} }
.clip-modal-duration-value { .clip-modal-duration-value {
color: #00c853; color: var(--success);
font-weight: 600; font-weight: 600;
font-family: 'Consolas', 'Segoe UI Mono', monospace; font-family: 'Consolas', 'Segoe UI Mono', monospace;
font-size: 14px; 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 { .clip-modal-hint {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 12px; font-size: 12px;