fix(ui): polish the ranked-target add controls

- dark-style the format <optgroup>/<option> so the dropdown no longer shows
  light "bars" over the dark theme (mirrors the existing
  .library-source-filter-select optgroup treatment)
- replace the fiddly tiny kbps number input with a dropdown of reference
  bitrates (Any / ≥96 / ≥128 / ≥192 / ≥256 / ≥320, default 320) — no typing,
  consistent with the lossless bit-depth/sample-rate selects
- bump control font 11→13px, larger padding + min-height, format select
  min-width so the row is comfortable to use

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
dev 2026-06-24 23:14:12 +02:00
parent 774d0f6c65
commit 124e8bb21c
2 changed files with 27 additions and 6 deletions

View file

@ -5085,10 +5085,14 @@
</select>
</span>
<span class="rt-lossy-fields" style="display:none;">
<label class="rt-inline-label">
<input type="number" id="rt-add-bitrate" min="0" max="2000" step="1" value="320" style="width:70px;"
autocomplete="off" data-bwignore="" data-1p-ignore="" data-lpignore="true"> kbps
</label>
<select id="rt-add-bitrate" title="Minimum bitrate">
<option value="">Any bitrate</option>
<option value="96">≥ 96 kbps</option>
<option value="128">≥ 128 kbps</option>
<option value="192">≥ 192 kbps</option>
<option value="256">≥ 256 kbps</option>
<option value="320" selected>≥ 320 kbps</option>
</select>
</span>
<button type="button" class="rt-add-btn" onclick="addRankedTarget()">+ Add target</button>
</div>

View file

@ -4226,8 +4226,25 @@ body.helper-mode-active #dashboard-activity-feed:hover {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
padding: 4px 6px;
font-size: 13px;
padding: 7px 9px;
min-height: 34px;
}
.ranked-target-add select { min-width: 130px; cursor: pointer; }
/* Kill the default light optgroup/option bars in the dark dropdown. */
.ranked-target-add select optgroup {
background: #1a1a1e;
color: rgba(255, 255, 255, 0.55);
font-style: normal;
font-weight: 600;
}
.ranked-target-add select option {
background: #1a1a1e;
color: rgba(255, 255, 255, 0.92);
font-weight: 400;
}
.ranked-target-add .rt-inline-label {