ux(failing-sources): zebra striping + hover highlight on rows
Operator-flagged 2026-06-01: with the failing-sources panel expanded, all rows have the same flat low-opacity background, no visual track from the artist name on the left to the Logs/Retry buttons on the right. Hard to tell which row a button belongs to when scanning down a list of 17. Three pure-CSS changes (no DOM, no logic): - 3px gap between rows (was 2px) — slightly more breathing room - Even rows get a darker surface tint (zebra striping) - Hover paints the whole row in a low-opacity error tint, so moving the cursor toward Logs/Retry lights up the whole horizontal band and the eye traces back to the artist name automatically
This commit is contained in:
@@ -90,13 +90,24 @@ async function onViewLogs(s) {
|
||||
.fc-fail__title { font-weight: 600; }
|
||||
.fc-fail__body {
|
||||
padding: 0 14px 10px;
|
||||
display: flex; flex-direction: column; gap: 2px;
|
||||
display: flex; flex-direction: column; gap: 3px;
|
||||
}
|
||||
.fc-fail__row {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
background: rgb(var(--v-theme-surface) / 0.4);
|
||||
/* Zebra striping + hover highlight: gives the eye a horizontal track
|
||||
* from the artist name on the left to the Logs/Retry buttons on the
|
||||
* right. Operator-flagged 2026-06-01 — without these, all rows blur
|
||||
* together and it's hard to pick which row a button belongs to. */
|
||||
transition: background 80ms ease;
|
||||
}
|
||||
.fc-fail__row:nth-child(even) {
|
||||
background: rgb(var(--v-theme-surface) / 0.55);
|
||||
}
|
||||
.fc-fail__row:hover {
|
||||
background: rgb(var(--v-theme-error) / 0.18);
|
||||
}
|
||||
.fc-fail__artist { font-weight: 600; white-space: nowrap; }
|
||||
.fc-fail__count { flex: 0 0 auto; }
|
||||
|
||||
Reference in New Issue
Block a user