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); }
|
.home-view__empty-title { font-family: var(--font-display-v2); }
|
||||||
.library__add-btn { background: var(--color-primary); color: var(--color-primary-fg); }
|
.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 polish ────────────────────────────────────────────────
|
||||||
.settings {
|
.settings {
|
||||||
&__title { font-family: var(--font-display-v2); font-weight: 400; letter-spacing: 0.005em; }
|
&__title { font-family: var(--font-display-v2); font-weight: 400; letter-spacing: 0.005em; }
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -17,9 +17,9 @@
|
|||||||
<meta name="mobile-web-app-capable" content="yes" />
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||||
<meta name="apple-mobile-web-app-title" content="WeVisto" />
|
<meta name="apple-mobile-web-app-title" content="WeVisto" />
|
||||||
<script type="module" crossorigin src="/build/assets/index-CToMjSpo.js"></script>
|
<script type="module" crossorigin src="/build/assets/index-Ct33aET2.js"></script>
|
||||||
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
||||||
<link rel="stylesheet" crossorigin href="/build/assets/index-DVLiEb9t.css">
|
<link rel="stylesheet" crossorigin href="/build/assets/index-Shs-JUMi.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user