From 534f22b6321abaab942bf1422708ab5599cc9e2f Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 06:03:09 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20extract=20.card-intro=20CSS=20class?=
 =?UTF-8?q?=20=E2=80=94=20kill=207=20duplicated=20inline=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Seven settings/feature cards (Archive, API help, Storage, Cleanup, Discord, Auto-VOD, Backup) each carry an intro paragraph with the exact same inline style attribute:

    style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;"

That's the same 4-property declaration duplicated 7 times. Extracted into a single .card-intro class — HTML reads as semantic intent ("this is a card-intro paragraph") instead of repeated style soup, and any future tweak to intro-paragraph styling now lives in one place.

(statsIntro is similar but uses margin-top:8px; margin-bottom:0; — different rhythm because it sits above the stats grid, left as-is.)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html | 14 +++++++-------
 src/styles.css | 11 +++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/index.html b/src/index.html
index cf894b1..728f8a3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -454,7 +454,7 @@
                 <div class="tab-content" id="archiveTab">
                     <div class="settings-card">
                         <h3 id="archiveTitle" style="margin-top:0;">Archiv durchsuchen</h3>
-                        <p id="archiveIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Suche nach Dateinamen, Streamern oder Datum-Strings. Treffer zeigen Recordings (Live + VOD); zugehoerige Chat- und Events-Dateien werden als Companion-Buttons angeboten.</p>
+                        <p id="archiveIntro" class="card-intro">Suche nach Dateinamen, Streamern oder Datum-Strings. Treffer zeigen Recordings (Live + VOD); zugehoerige Chat- und Events-Dateien werden als Companion-Buttons angeboten.</p>
                         <div class="form-row" style="gap:8px; margin-bottom: 8px; flex-wrap: wrap; align-items:center;">
                             <input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">
                             <select id="archiveSearchType" class="select-compact">
@@ -516,7 +516,7 @@
 
                     <div class="settings-card">
                         <h3 id="apiTitle">Twitch API</h3>
-                        <p id="apiHelpText" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">
+                        <p id="apiHelpText" class="card-intro">
                             <span id="apiHelpIntro">Du brauchst eine Client-ID und ein Client-Secret von Twitch.</span>
                             <a href="#" id="apiHelpLink" onclick="event.preventDefault(); openTwitchDevConsole()" style="color: var(--accent); text-decoration: underline; cursor: pointer;">dev.twitch.tv/console/apps</a>
                         </p>
@@ -694,13 +694,13 @@
                             <h3 id="storageCardTitle" style="margin:0;">Storage</h3>
                             <button class="btn-secondary" id="btnRefreshStorage" onclick="refreshStorageStats()">Aktualisieren</button>
                         </div>
-                        <p id="storageCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Disk-Verbrauch pro Streamer im aktuellen Download-Ordner. Live-Aufnahmen werden separat ausgewiesen.</p>
+                        <p id="storageCardIntro" class="card-intro">Disk-Verbrauch pro Streamer im aktuellen Download-Ordner. Live-Aufnahmen werden separat ausgewiesen.</p>
                         <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>
-                        <p id="cleanupIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Aufnahmen aelter als X Tage automatisch archivieren oder loeschen. Schiebt Sidecar-Chat-Dateien (.chat.json/.chat.jsonl) mit der Aufnahme.</p>
+                        <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;">
                             <input type="checkbox" id="autoCleanupEnabledToggle">
                             <span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
@@ -734,7 +734,7 @@
 
                     <div class="settings-card">
                         <h3 id="discordCardTitle">Discord-Webhook</h3>
-                        <p id="discordCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Sende Benachrichtigungen an einen Discord-Channel via Webhook — nuetzlich fuer Multi-Device-Setups oder eine dedizierte Archiv-Maschine.</p>
+                        <p id="discordCardIntro" class="card-intro">Sende Benachrichtigungen an einen Discord-Channel via Webhook — nuetzlich fuer Multi-Device-Setups oder eine dedizierte Archiv-Maschine.</p>
                         <div class="form-group">
                             <label id="discordWebhookUrlLabel">Webhook-URL</label>
                             <input type="text" id="discordWebhookUrl" placeholder="https://discord.com/api/webhooks/...">
@@ -761,7 +761,7 @@
 
                     <div class="settings-card">
                         <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>
+                        <p id="autoVodCardIntro" class="card-intro">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;">
                             <label id="autoVodPollMinutesLabel" class="form-sublabel" for="autoVodPollMinutes">Poll-Intervall (Minuten)</label>
                             <input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" style="width:90px;">
@@ -777,7 +777,7 @@
 
                     <div class="settings-card">
                         <h3 id="backupCardTitle">Sicherung &amp; Wartung</h3>
-                        <p id="backupCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Konfiguration sichern, auf einem anderen Geraet wiederherstellen, oder die Liste der bereits heruntergeladenen VODs zuruecksetzen.</p>
+                        <p id="backupCardIntro" class="card-intro">Konfiguration sichern, auf einem anderen Geraet wiederherstellen, oder die Liste der bereits heruntergeladenen VODs zuruecksetzen.</p>
                         <div class="form-row" style="margin-bottom: 10px; flex-wrap: wrap;">
                             <button class="btn-secondary" id="btnExportConfig" onclick="exportConfigToFile()">Konfiguration exportieren</button>
                             <button class="btn-secondary" id="btnImportConfig" onclick="importConfigFromFile()">Konfiguration importieren</button>
diff --git a/src/styles.css b/src/styles.css
index 2de7ea0..b602e3b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2131,6 +2131,17 @@ select option {
     line-height: 1.45;
 }
 
+/* Card intro paragraph — the descriptive paragraph that sits below a
+   card heading and explains what the card does. Used identically on
+   the Archive, API-help, Storage, Cleanup, Discord, Auto-VOD and
+   Backup cards (was 7 duplicated inline style attributes). */
+.card-intro {
+    color: var(--text-secondary);
+    font-size: 13px;
+    line-height: 1.5;
+    margin-bottom: 12px;
+}
+
 /* Filename-templates 3-pair grid (VOD / Part / Clip template inputs).
    Each row is a label above an input; the label gets the 13px secondary
    styling that used to be inline on every label. */