cleanup: extract recurring inline form patterns into utility classes
Audit turned up two ~6-occurrence inline-style patterns in Settings: - `style="font-size:12px; color:var(--text-secondary);"` on small sub-labels above stacked inputs (autoCleanupDaysLabel, TargetLabel, ActionLabel, autoVodPollMinutesLabel, autoVodMaxAgeHoursLabel, statsLastScannedLabel) - `style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:NNNpx;"` on labels that wrap a sublabel + control as a vertical pair in a flex row (3 of these in the auto-cleanup grid) Both lifted to .form-sublabel and .form-stack utility classes. Plus a .form-note for block-level secondary-coloured text (the cleanupReport "X files would be freed" panel). The min-width values stay inline since they vary per call site (120 / 160 / 200). Zero visual change — the class values match what was inline. Future edits to "what does a small label look like" go through one selector instead of grep + sed across six sites. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE
parent
e68db24e10
commit
5d61094226
@ -422,7 +422,7 @@
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;">
|
||||
<h3 id="statsTitle" style="margin:0;">Archiv-Statistik</h3>
|
||||
<div style="display:flex; gap:8px; align-items:center;">
|
||||
<span id="statsLastScannedLabel" style="font-size:12px; color:var(--text-secondary);"></span>
|
||||
<span id="statsLastScannedLabel" class="form-sublabel"></span>
|
||||
<button class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -706,19 +706,19 @@
|
||||
<span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
|
||||
</label>
|
||||
<div class="form-row" style="gap:12px; flex-wrap:wrap; margin-bottom: 8px;">
|
||||
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:120px;">
|
||||
<span id="autoCleanupDaysLabel" style="font-size:12px; color:var(--text-secondary);">Tage-Schwelle</span>
|
||||
<label class="form-stack" style="min-width:120px;">
|
||||
<span id="autoCleanupDaysLabel" class="form-sublabel">Tage-Schwelle</span>
|
||||
<input type="number" id="autoCleanupDays" min="1" max="3650" value="30">
|
||||
</label>
|
||||
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px;">
|
||||
<span id="autoCleanupTargetLabel" style="font-size:12px; color:var(--text-secondary);">Bereich</span>
|
||||
<label class="form-stack" style="min-width:160px;">
|
||||
<span id="autoCleanupTargetLabel" class="form-sublabel">Bereich</span>
|
||||
<select id="autoCleanupTarget">
|
||||
<option value="live_only" id="autoCleanupTargetLive">Nur Live-Aufnahmen</option>
|
||||
<option value="all" id="autoCleanupTargetAll">Alle Aufnahmen</option>
|
||||
</select>
|
||||
</label>
|
||||
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px;">
|
||||
<span id="autoCleanupActionLabel" style="font-size:12px; color:var(--text-secondary);">Aktion</span>
|
||||
<label class="form-stack" style="min-width:160px;">
|
||||
<span id="autoCleanupActionLabel" class="form-sublabel">Aktion</span>
|
||||
<select id="autoCleanupAction">
|
||||
<option value="archive" id="autoCleanupActionArchive">In Archiv verschieben</option>
|
||||
<option value="delete" id="autoCleanupActionDelete">Loeschen</option>
|
||||
@ -729,7 +729,7 @@
|
||||
<button class="btn-secondary" id="btnCleanupDryRun" onclick="runCleanupDryRun()">Vorschau</button>
|
||||
<button class="btn-secondary" id="btnCleanupRunNow" onclick="runCleanupNow()">Jetzt ausfuehren</button>
|
||||
</div>
|
||||
<div id="cleanupReport" style="color: var(--text-secondary); font-size:12px;"></div>
|
||||
<div id="cleanupReport" class="form-note"></div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card">
|
||||
@ -763,9 +763,9 @@
|
||||
<h3 id="autoVodCardTitle">Auto-VOD-Download</h3>
|
||||
<p id="autoVodCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Streamer mit aktiviertem VOD-Toggle werden in dem hier festgelegten Intervall auf neue Twitch-VODs geprueft. Neue VODs innerhalb des Alters-Fensters werden automatisch zur Download-Queue hinzugefuegt.</p>
|
||||
<div class="form-row" style="margin-bottom: 10px; align-items: center;">
|
||||
<span id="autoVodPollMinutesLabel" style="font-size:12px; color:var(--text-secondary);">Poll-Intervall (Minuten)</span>
|
||||
<span id="autoVodPollMinutesLabel" class="form-sublabel">Poll-Intervall (Minuten)</span>
|
||||
<input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" style="width:90px;">
|
||||
<span id="autoVodMaxAgeHoursLabel" style="font-size:12px; color:var(--text-secondary); margin-left:12px;">Max. Alter (Stunden)</span>
|
||||
<span id="autoVodMaxAgeHoursLabel" class="form-sublabel" style="margin-left:12px;">Max. Alter (Stunden)</span>
|
||||
<input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" style="width:90px;">
|
||||
</div>
|
||||
<div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;">
|
||||
|
||||
@ -1900,6 +1900,36 @@ select option {
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FORM UTILITY CLASSES — small recurring patterns
|
||||
============================================
|
||||
These replace the 6+ inline-style copies of the same visual
|
||||
pattern that were scattered across Settings cards. */
|
||||
|
||||
/* Small secondary-coloured label / note text. Used as field-label
|
||||
above stacked inputs, as inline metadata next to controls, etc. */
|
||||
.form-sublabel {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Vertical stack: label on top, control below, equal flex share in
|
||||
a flex-row. Used for the 3-up auto-cleanup row + poll-config rows. */
|
||||
.form-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Block-level note text — same colour as .form-sublabel but reserved
|
||||
for full-row paragraphs like the cleanup report area. */
|
||||
.form-note {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* Old generic scrollbar rules were dead — superseded by the
|
||||
purple-themed *::-webkit-scrollbar block further down the file.
|
||||
Removed to avoid confusion when someone greps for scrollbar styles. */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user