ninja_hippo/card-grader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace History-row authenticity dot with a visible badge

Browse source 
A 8px dot next to the card name only rewards someone who already suspects
a card and goes looking for it -- the badge needs to be the thing that
catches your eye scanning the home-screen list itself. Same red/amber
tiers as the detail-view banner, using the existing .pill shape so it sits
naturally next to the photo-count meta line rather than needing new
layout.
This commit is contained in:
Barely Removable 2026-08-23 11:55:29 -07:00
parent 3cacf2f292
commit deabe74593
2 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

24
static/style.css
View file

@ -450,14 +450,24 @@ textarea { resize: vertical; min-height: 64px; }
font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5;
}
/* History-row version: a plain dot, since the row has no room for the full
banner text and opening the card gives the real explanation. */
.authenticity-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-right: 6px; vertical-align: middle;
background: var(--critical);
/* History-row badge: a real pill, not just a dot — needs to catch the eye
scanning the home-screen list itself, not only reward someone who
already suspects a card and opens it to check. Same colour-mix technique
as .pill-critical/.pill-marginal elsewhere, just spelled out explicitly
since neither of those set the text colour this needs. */
.authenticity-pill {
margin-left: 2px;
}
.authenticity-pill.authenticity-high {
border-color: color-mix(in srgb, var(--critical) 55%, transparent);
color: var(--critical);
background: color-mix(in srgb, var(--critical) 15%, transparent);
}
.authenticity-pill.authenticity-check {
border-color: color-mix(in srgb, var(--warning) 55%, transparent);
color: var(--warning);
background: color-mix(in srgb, var(--warning) 15%, transparent);
}
.authenticity-dot.authenticity-check { background: var(--warning); }
/* -------------------------------------------------------------- banner */