polish(design-v2): library tile is one connected card, Manage feels like a button
CI / test (push) Has been cancelled
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:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user