polish(design-v2): library tile is one connected card, Manage feels like a button
CI / test (push) Has been cancelled

Each library tile becomes a single glass card containing the photo and
the Manage row with no gap — the Manage button bar sits below the photo
with its own dark-glass background and a 1px top divider so it reads as
a tappable footer. Manage-action ('Manage ▸') in yellow for affordance.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-15 17:04:27 -04:00
parent 59f5e6e0eb
commit 25f698f067
9 changed files with 46 additions and 9 deletions
+37
View File
@@ -155,6 +155,43 @@
.home-view__empty-title { font-family: var(--font-display-v2); }
.library__add-btn { background: var(--color-primary); color: var(--color-primary-fg); }
// Library tile becomes a single connected card — photo and Manage button
// share the same surface, no gap between them. Manage gets a button-bar feel.
.library__item {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
gap: 0 !important;
box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5);
backdrop-filter: saturate(160%) blur(20px);
-webkit-backdrop-filter: saturate(160%) blur(20px);
}
.library__thumb {
border-radius: 0 !important;
}
.library__manage {
background: rgba(0,0,0,0.25) !important;
border-top: 1px solid var(--color-border);
border-radius: 0 !important;
padding: var(--space-3) var(--space-4) !important;
transition: background var(--duration-fast) var(--ease-out);
&:hover { background: rgba(0,0,0,0.4) !important; }
}
.library__manage-summary {
color: var(--color-text-muted);
font-size: var(--text-sm);
font-family: var(--font-family);
b { color: var(--color-text); }
}
.library__manage-action {
color: var(--brand-yellow) !important;
font-weight: 700;
font-size: var(--text-sm);
}
.library__manage-lock { color: var(--color-text-muted); }
// ── Settings polish ────────────────────────────────────────────────
.settings {
&__title { font-family: var(--font-display-v2); font-weight: 400; letter-spacing: 0.005em; }