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 class="clip-status" id="clipStatus"></div>
</div> </div>
<div class="settings-card" style="max-width: 600px; margin: 20px auto;"> <div class="settings-card centered">
<h3 id="clipsInfoTitle">Info</h3> <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: Unterstutzte Formate:
- https://clips.twitch.tv/ClipName - https://clips.twitch.tv/ClipName
- https://www.twitch.tv/streamer/clip/ClipName - https://www.twitch.tv/streamer/clip/ClipName
@ -431,7 +431,7 @@
<div class="settings-card"> <div class="settings-card">
<h3 id="statsSummaryTitle">Uebersicht</h3> <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>
<div class="settings-card"> <div class="settings-card">

25
src/styles.css
View File

@ -1626,6 +1626,14 @@ select option {
margin-bottom: 20px; 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 { .settings-card h3 {
font-size: 16px; font-size: 16px;
margin-bottom: 15px; margin-bottom: 15px;
@ -2221,6 +2229,23 @@ select option {
color: var(--accent); 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 /* Flush variant: the intro sits flush against the next sibling block
(e.g. the stats summary grid) and gets its top breathing room from (e.g. the stats summary grid) and gets its top breathing room from
the preceding section-header row rather than its own bottom margin. */ the preceding section-header row rather than its own bottom margin. */