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

cleanup: .settings-card.centered + .info-text + .stats-summary-grid

Browse Source 
Three more inline-styled blocks moved into CSS classes:

- The Clips Info card had max-width:600px; margin:20px auto inline on the settings-card itself, plus color/line-height/white-space:pre-line inline on the info paragraph. Now .settings-card.centered (modifier for narrow-centred cards) and .info-text (multi-line description text with preserved authored line breaks).

- The Stats Summary KPI grid carried a 3-property grid declaration inline (display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px). The layout is unique to this one container, but lifting it to .stats-summary-grid makes the markup self-documenting and matches the rest of the .stats-* class family.

Net: 3 inline style attributes gone, 3 new CSS rules.

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

6
src/index.html
View File

@ -304,9 +304,9 @@
<div class="clip-status" id="clipStatus"></div>
</div>
<div class="settings-card" style="max-width: 600px; margin: 20px auto;">
<div class="settings-card centered">
<h3 id="clipsInfoTitle">Info</h3>
<p style="color: var(--text-secondary); line-height: 1.6; white-space: pre-line;" id="clipsInfoText">
<p id="clipsInfoText" class="info-text">
Unterstutzte Formate:
- https://clips.twitch.tv/ClipName
- https://www.twitch.tv/streamer/clip/ClipName
@ -431,7 +431,7 @@
<div class="settings-card">
<h3 id="statsSummaryTitle">Uebersicht</h3>
<div id="statsSummaryGrid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px;"></div>
<div id="statsSummaryGrid" class="stats-summary-grid"></div>
</div>
<div class="settings-card">

25
src/styles.css
View File

@ -1626,6 +1626,14 @@ select option {
margin-bottom: 20px;
}
/* Centred-narrow settings card — used for the standalone Clips Info
card where the content (a short list of supported URL formats) reads
better at a constrained width than across the full main column. */
.settings-card.centered {
max-width: 600px;
margin: 20px auto;
}
.settings-card h3 {
font-size: 16px;
margin-bottom: 15px;
@ -2221,6 +2229,23 @@ select option {
color: var(--accent);
}
/* Multi-line info text — preserves authored line breaks (white-space:
pre-line) so the Clips card can list URL formats one-per-line in
the HTML without separate <br>/<li> markup. */
.info-text {
color: var(--text-secondary);
line-height: 1.6;
white-space: pre-line;
}
/* Responsive KPI grid for the Stats Summary card — fits as many 180px
tiles per row as the column allows, with equal-share growth. */
.stats-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
/* Flush variant: the intro sits flush against the next sibling block
(e.g. the stats summary grid) and gets its top breathing room from
the preceding section-header row rather than its own bottom margin. */