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

cleanup: settings-card h4 + hr defaults — and Auto-Cleanup label reuses .toggle-row

Browse Source 
The Auto-Cleanup subsection inside the Storage card carries three inline-styled patterns that are good candidates to live in the cascade rather than the markup:

- <hr> with border:none; border-top:1px solid var(--border-soft); margin:16px 0
- <h4> with margin:0 0 8px 0; font-size:14px
- a checkbox <label> wrapping the "Auto-Cleanup aktivieren" toggle with the same display:flex; align-items:center; gap:8px pattern that the existing .toggle-row class already encodes

Hoisted the hr + h4 styling to default .settings-card descendant rules — any future subsection divider/heading inside a settings card now follows the same rhythm without ceremony — and the label reuses .toggle-row (margin-bottom:8px stays inline because the next sibling is a form-row, not another toggle-row, so the .toggle-row + .toggle-row sibling rule doesn't apply).

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

6
src/index.html
View File

@ -698,10 +698,10 @@
<div id="storageSummary" style="color: var(--text-secondary); font-size:12px; margin-bottom:8px;"></div>
<div id="storageList"></div>
<hr style="border:none; border-top:1px solid var(--border-soft); margin:16px 0;">
<h4 id="cleanupTitle" style="margin:0 0 8px 0; font-size:14px;">Auto-Cleanup</h4>
<hr>
<h4 id="cleanupTitle">Auto-Cleanup</h4>
<p id="cleanupIntro" class="card-intro">Aufnahmen aelter als X Tage automatisch archivieren oder loeschen. Schiebt Sidecar-Chat-Dateien (.chat.json/.chat.jsonl) mit der Aufnahme.</p>
<label style="display:flex; align-items:center; gap:8px; margin-bottom: 8px;">
<label class="toggle-row" style="margin-bottom: 8px;">
<input type="checkbox" id="autoCleanupEnabledToggle">
<span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
</label>

16
src/styles.css
View File

@ -1634,6 +1634,22 @@ select option {
gap: 8px;
}
/* Subsection heading inside a settings card — used when a single card
bundles two logical groups (Storage → Auto-Cleanup) and the second
needs its own miniature heading after a divider. */
.settings-card h4 {
margin: 0 0 8px 0;
font-size: 14px;
}
/* Horizontal divider inside settings cards — soft single line, balanced
vertical breathing room, no default browser shading. */
.settings-card hr {
border: none;
border-top: 1px solid var(--border-soft);
margin: 16px 0;
}
.form-group {
margin-bottom: 15px;
}