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

cleanup: .template-lint owns its own margin-top — unifies two divergent inline values

Browse Source 
Both template-lint usages (clip-cutter modal at index.html:105 and Settings filename-template card at index.html:657) had different inline margin-top values — 4px vs 6px. The visual difference is essentially imperceptible but it's a pointless divergence: the same class, same context (a lint badge directly below a template input), spaced differently for no design reason.

Hoisted margin-top:6px into the .template-lint base class. Both usages now drop their inline override and pick up the same rhythm. Clip-cutter's lint shifts 2px down — visually identical.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 07:06:03 +02:00
parent e728212981
commit 38aadb6fb9
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@ -102,7 +102,7 @@
<div id="clipFilenameTemplateWrap" class="clip-template-wrap" style="display:none;"> <div id="clipFilenameTemplateWrap" class="clip-template-wrap" style="display:none;">
<input type="text" id="clipFilenameTemplate" value="{date}_{part}.mp4" placeholder="{date}_{part}.mp4" class="clip-modal-template-input" oninput="updateFilenameExamples()"> <input type="text" id="clipFilenameTemplate" value="{date}_{part}.mp4" placeholder="{date}_{part}.mp4" class="clip-modal-template-input" oninput="updateFilenameExamples()">
<div id="clipTemplateHelp" class="clip-modal-hint">Platzhalter: {title} {id} {channel} {date} {part} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div> <div id="clipTemplateHelp" class="clip-modal-hint">Platzhalter: {title} {id} {channel} {date} {part} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
<div id="clipTemplateLint" class="template-lint ok" style="margin-top: 4px;">Template-Check: OK</div> <div id="clipTemplateLint" class="template-lint ok">Template-Check: OK</div>
<button class="btn-secondary" id="clipTemplateGuideBtn" style="margin-top: 8px;" onclick="openTemplateGuide('clip')">Template Guide</button> <button class="btn-secondary" id="clipTemplateGuideBtn" style="margin-top: 8px;" onclick="openTemplateGuide('clip')">Template Guide</button>
</div> </div>
</div> </div>
@ -654,7 +654,7 @@
<input type="text" id="defaultClipFilenameTemplate" class="input-monospace" placeholder="{date}_{part}.mp4" oninput="validateFilenameTemplates()"> <input type="text" id="defaultClipFilenameTemplate" class="input-monospace" placeholder="{date}_{part}.mp4" oninput="validateFilenameTemplates()">
</div> </div>
<div id="filenameTemplateHint" class="form-note" style="margin-top: 8px;">Platzhalter: {title} {id} {channel} {date} {part} {part_padded} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div> <div id="filenameTemplateHint" class="form-note" style="margin-top: 8px;">Platzhalter: {title} {id} {channel} {date} {part} {part_padded} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
<div id="filenameTemplateLint" class="template-lint ok" style="margin-top: 6px;">Template-Check: OK</div> <div id="filenameTemplateLint" class="template-lint ok">Template-Check: OK</div>
</div> </div>
</div> </div>

7
src/styles.css
View File

@ -2312,10 +2312,15 @@ select option {
template inputs and by the clip-cutter modal's custom template template inputs and by the clip-cutter modal's custom template
row. Two states: green for OK, red for unknown-placeholder row. Two states: green for OK, red for unknown-placeholder
warning. Pull the colours from --success / --error vars so the warning. Pull the colours from --success / --error vars so the
lint always tracks the rest of the apps semantic palette. */ lint always tracks the rest of the apps semantic palette.
margin-top is part of the class so both usage sites pick up the
same rhythm — the previous inline-style values diverged by 2px
between the two spots, an inconsistency that's not worth tracking. */
.template-lint { .template-lint {
font-size: 12px; font-size: 12px;
line-height: 1.4; line-height: 1.4;
margin-top: 6px;
transition: color 0.15s; transition: color 0.15s;
} }