polish(design-v2): library tile pops above harbor backdrop
CI / test (push) Has been cancelled

Surface was --color-surface (same tone as the multiplied backdrop) so
the card blended in. Switched to --color-surface-2 (lighter shade) +
stronger shadow + inset highlight so the tile clearly floats above
the harbor.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-15 17:06:24 -04:00
parent 25f698f067
commit 99b3fb9e59
9 changed files with 18 additions and 13 deletions
+9 -4
View File
@@ -157,27 +157,32 @@
// 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.
// Uses --color-surface-2 (lighter shade) so the card pops above the harbor
// multiplied backdrop that's already at --color-surface tone.
.library__item {
background: var(--color-surface);
background: var(--color-surface-2);
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);
box-shadow:
0 1px 0 color-mix(in srgb, var(--color-text) 10%, transparent) inset,
0 12px 28px -8px rgba(0,0,0,0.55);
backdrop-filter: saturate(160%) blur(20px);
-webkit-backdrop-filter: saturate(160%) blur(20px);
}
.library__thumb {
border-radius: 0 !important;
background: var(--color-surface-2);
}
.library__manage {
background: rgba(0,0,0,0.25) !important;
background: rgba(0,0,0,0.35) !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; }
&:hover { background: rgba(0,0,0,0.5) !important; }
}
.library__manage-summary {
color: var(--color-text-muted);