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

cleanup: extract .inline-toggle class — compact filter-row toggle pattern

Browse Source 
The "Hide downloaded" checkbox in the VOD filter row was carrying
the inline style:

  display:flex; align-items:center; gap:6px;
  color: var(--text-secondary); font-size:12px;
  cursor:pointer; user-select:none

This is a distinct visual variant of the existing .toggle-row class
(filter-row context, smaller gap, smaller font, secondary text
color) so a separate .inline-toggle class is the cleaner fit
rather than overloading .toggle-row with another modifier.

One site cleaned up now, the class is reusable for future
tool-row inline toggles without copy-pasting the seven inline
properties.

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

2
src/index.html
View File

@ -273,7 +273,7 @@
<option value="duration_asc">Shortest first</option>
</select>
<span id="vodFilterCount" style="color: var(--text-secondary); font-size:12px; min-width:80px;"></span>
<label id="vodHideDownloadedLabel" style="display:flex; align-items:center; gap:6px; color: var(--text-secondary); font-size:12px; cursor:pointer; user-select:none;" title="">
<label id="vodHideDownloadedLabel" class="inline-toggle" title="">
<input type="checkbox" id="vodHideDownloadedToggle" onchange="onVodHideDownloadedChange()">
<span id="vodHideDownloadedText">Hide downloaded</span>
</label>

14
src/styles.css
View File

@ -1952,6 +1952,20 @@ select option {
margin-left: 22px;
}
/* Compact horizontal-row toggle — used in filter rows where the
toggle sits alongside other controls (Hide downloaded, etc).
Tighter gap + secondary colour + tiny font to fit a tool-row
without dominating it. */
.inline-toggle {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-secondary);
font-size: 12px;
cursor: pointer;
user-select: none;
}
/* Sidebar queue empty state — small dashed-border card matching the
sibling streamer-list empty state. */
.queue-empty {