garrettmills/mtgc
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Show reference-data update time, location filter UI, and tile fixes

Browse Source 
- Status gains reference_updated_at (sourced from reference.db's file
  mtime, so it needs no separate persisted state) and the sidebar's
  "Your library" panel shows it as a relative "Updated Xh ago" stamp
  that self-refreshes every minute.
- Add a Location field to the Library tab's filters panel, wired to the
  new LibraryFilter.location.
- Bump every font-size in the stylesheet up one step for a slightly
  larger, easier-to-read UI overall.
- Fix the library/deck tile view's +/- quantity overlay permanently
  covering the card art's own printed mana cost (top-right corner) —
  it now only fades in on hover/focus, like the other row actions.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Garrett Mills
2026-07-07 21:35:09 -05:00
parent 436975f64f
commit 67c97bbd7a
5 changed files with 113 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/styles.css
View File

@@ -68,7 +68,7 @@ body {
font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
background: var(--bg-app);
color: var(--text);
font-size: 14px;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
@@ -108,7 +108,7 @@ button {
border-radius: var(--radius);
padding: 7px 13px;
cursor: pointer;
font-size: 13px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
transition: background 0.12s, border-color 0.12s, transform 0.05s, filter 0.12s;
@@ -155,7 +155,7 @@ button.danger:active {
}
button.big {
padding: 11px 22px;
font-size: 15px;
font-size: 16px;
border-radius: 10px;
}
@@ -166,7 +166,7 @@ select {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 11px;
font-size: 13px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.12s, box-shadow 0.12s;
}
@@ -235,7 +235,7 @@ select option {
background: linear-gradient(150deg, var(--accent-hover), var(--accent-active));
color: #fff;
font-weight: 800;
font-size: 18px;
font-size: 19px;
display: flex;
align-items: center;
justify-content: center;
@@ -243,7 +243,7 @@ select option {
}
.brand-text {
font-weight: 700;
font-size: 15px;
font-size: 16px;
color: var(--text-strong);
letter-spacing: 0.2px;
}
@@ -264,7 +264,7 @@ select option {
border-radius: var(--radius);
background: transparent;
color: var(--muted);
font-size: 14px;
font-size: 15px;
font-weight: 550;
}
.nav-item:hover {
@@ -309,7 +309,7 @@ select option {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-size: 13px;
color: var(--muted);
}
.status-dot {
@@ -334,14 +334,14 @@ select option {
margin-bottom: 10px;
}
.lib-stats-title {
font-size: 11px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--faint);
}
.lib-stats-loading {
font-size: 11px;
font-size: 12px;
color: var(--faint);
padding-bottom: 10px;
}
@@ -368,14 +368,14 @@ select option {
transform: translateY(-1px);
}
.lib-stat-value {
font-size: 16px;
font-size: 17px;
font-weight: 800;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 14px var(--accent-glow);
}
.lib-stat-label {
font-size: 9px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -400,7 +400,10 @@ select option {
.lib-color-seg.G { background: var(--mtg-g); }
.lib-color-seg.C { background: var(--mtg-c); }
.lib-stats-sub {
font-size: 10px;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 11px;
color: var(--faint);
}
@@ -424,7 +427,7 @@ select option {
.path {
flex: 1 1 auto;
min-width: 0;
font-size: 12px;
font-size: 13px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: var(--faint);
background: rgba(0, 0, 0, 0.25);
@@ -444,7 +447,7 @@ select option {
padding: 8px 18px 10px;
background: var(--bg-elev);
border-bottom: 1px solid var(--border-soft);
font-size: 12px;
font-size: 13px;
}
.ingest-bar-head {
display: flex;
@@ -462,7 +465,7 @@ select option {
.ingest-bar-cancel {
flex-shrink: 0;
padding: 3px 10px;
font-size: 11px;
font-size: 12px;
color: var(--muted);
}
.ingest-bar-cancel:hover {
@@ -494,7 +497,7 @@ select option {
.ingest-segment-label {
display: block;
margin-top: 3px;
font-size: 10px;
font-size: 11px;
color: var(--faint);
white-space: nowrap;
overflow: hidden;
@@ -546,7 +549,7 @@ select option {
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
font-size: 36px;
color: #fff;
background: linear-gradient(150deg, var(--accent-hover), var(--accent-active));
box-shadow: 0 10px 30px var(--accent-glow);
@@ -561,14 +564,14 @@ select option {
h2 {
margin: 2px 0 14px;
font-size: 19px;
font-size: 20px;
font-weight: 700;
color: var(--text-strong);
letter-spacing: -0.2px;
}
h3 {
margin: 18px 0 10px;
font-size: 12px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
@@ -578,7 +581,7 @@ h3 {
}
h4 {
margin: 14px 0 7px;
font-size: 13px;
font-size: 14px;
font-weight: 600;
color: var(--accent-hover);
}
@@ -587,7 +590,7 @@ h4 {
}
.hint {
color: var(--muted);
font-size: 13px;
font-size: 14px;
line-height: 1.65;
}
.row {
@@ -602,7 +605,7 @@ h4 {
color: var(--accent-hover);
border-radius: 999px;
padding: 1px 9px;
font-size: 11px;
font-size: 12px;
font-weight: 700;
}
@@ -631,7 +634,7 @@ h4 {
border: none;
border-radius: 0;
color: var(--muted);
font-size: 15px;
font-size: 16px;
font-weight: 600;
line-height: 1;
cursor: pointer;
@@ -654,7 +657,7 @@ h4 {
min-width: 22px;
text-align: center;
padding: 0 2px;
font-size: 13px;
font-size: 14px;
font-weight: 700;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
@@ -792,7 +795,7 @@ li:focus-within .row-actions {
}
.dialog-title {
margin: 0 0 10px;
font-size: 15px;
font-size: 16px;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
@@ -803,7 +806,7 @@ li:focus-within .row-actions {
.dialog-message {
margin: 0 0 18px;
color: var(--muted);
font-size: 13px;
font-size: 14px;
line-height: 1.5;
}
.dialog-field {
@@ -818,7 +821,7 @@ li:focus-within .row-actions {
.dialog-error {
margin: -6px 0 14px;
color: var(--danger);
font-size: 12px;
font-size: 13px;
}
.dialog-actions {
display: flex;
@@ -860,7 +863,7 @@ li:focus-within .row-actions {
}
.card-type {
color: var(--muted);
font-size: 12px;
font-size: 13px;
}
/* ============================================================
@@ -875,7 +878,7 @@ li:focus-within .row-actions {
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 10px;
font-size: 11px;
font-weight: 800;
display: inline-flex;
align-items: center;
@@ -914,7 +917,7 @@ table {
th {
text-align: left;
padding: 8px 12px;
font-size: 11px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -947,7 +950,7 @@ tbody tr:hover {
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 8px;
font-size: 11px;
font-size: 12px;
color: var(--text);
margin-right: 4px;
}
@@ -972,7 +975,7 @@ tbody tr:hover {
gap: 6px;
}
.field > label {
font-size: 11px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
@@ -980,7 +983,7 @@ tbody tr:hover {
}
.location-input {
padding: 4px 8px;
font-size: 12px;
font-size: 13px;
max-width: 160px;
}
@@ -1012,7 +1015,7 @@ tbody tr:hover {
color: var(--faint);
border: 1px dashed var(--border);
border-radius: 5px;
font-size: 18px;
font-size: 19px;
}
.hover-card {
position: fixed;
@@ -1098,7 +1101,7 @@ tbody tr:hover {
background: rgba(20, 20, 24, 0.75);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
font-size: 12px;
font-size: 13px;
font-weight: 600;
backdrop-filter: blur(4px);
}
@@ -1151,13 +1154,21 @@ tbody tr:hover {
right: 8px;
display: flex;
gap: 6px;
/* The card art's own mana cost prints in this corner — only cover it while
the tile is actually being interacted with. */
opacity: 0;
transition: opacity 0.12s;
}
.tile:hover .tile-corner,
.tile:focus-within .tile-corner {
opacity: 1;
}
.tile-badge {
background: rgba(0, 0, 0, 0.78);
color: #fff;
border-radius: 8px;
padding: 2px 9px;
font-size: 12px;
font-size: 13px;
font-weight: 700;
backdrop-filter: blur(2px);
}
@@ -1180,7 +1191,7 @@ tbody tr:hover {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-size: 13px;
color: var(--muted);
}
.view-toggle {
@@ -1194,7 +1205,7 @@ tbody tr:hover {
border: none;
border-radius: 0;
background: transparent;
font-size: 12px;
font-size: 13px;
padding: 5px 12px;
color: var(--muted);
}