ux(failing-sources): visible row separators + clearer hover
The zebra striping in 717b601 was too subtle — inside the tonal error
card, surface-tint contrast washed out and rows still looked uniform.
Operator-flagged the same issue twice.
Replace the surface-tint approach with hard visual structure:
- Bottom border on each row (1px white/0.08) — clearly delineated rows
regardless of card background
- Hover darkens to black/0.25 — much more obvious than the previous
error-tint hover, gives the eye a clear horizontal track
- Slightly more vertical padding (8px vs 6px) for tap-target comfort
- Drop the gap; borders are the separator now
This commit is contained in:
@@ -90,24 +90,28 @@ async function onViewLogs(s) {
|
||||
.fc-fail__title { font-weight: 600; }
|
||||
.fc-fail__body {
|
||||
padding: 0 14px 10px;
|
||||
display: flex; flex-direction: column; gap: 3px;
|
||||
display: flex; flex-direction: column;
|
||||
/* Borders, not gap, so the row separators are visible inside the
|
||||
* tonal error card (where surface tints get washed out and gap is
|
||||
* just empty space). */
|
||||
}
|
||||
.fc-fail__row {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 8px;
|
||||
padding: 8px 10px;
|
||||
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. */
|
||||
/* Hover-darken gives the eye a horizontal track from the artist
|
||||
* name on the left to the Logs/Retry buttons on the right.
|
||||
* Bottom border replaces the previous-too-subtle zebra striping —
|
||||
* inside the tonal error card, surface-tint contrast was negligible.
|
||||
* Operator-flagged 2026-06-01 (twice). */
|
||||
border-bottom: 1px solid rgb(255 255 255 / 0.08);
|
||||
transition: background 80ms ease;
|
||||
}
|
||||
.fc-fail__row:nth-child(even) {
|
||||
background: rgb(var(--v-theme-surface) / 0.55);
|
||||
.fc-fail__row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.fc-fail__row:hover {
|
||||
background: rgb(var(--v-theme-error) / 0.18);
|
||||
background: rgb(0 0 0 / 0.25);
|
||||
}
|
||||
.fc-fail__artist { font-weight: 600; white-space: nowrap; }
|
||||
.fc-fail__count { flex: 0 0 auto; }
|
||||
|
||||
Reference in New Issue
Block a user