football2801/pictureFrame-webApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Matt Edholm
2026-05-15 17:06:24 -04:00
parent 25f698f067
commit 99b3fb9e59
9 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/design-v2.scss
+9 -4
View File
@@ -157,27 +157,32 @@
// Library tile becomes a single connected card — photo and Manage button // 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. // 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 { .library__item {
background: var(--color-surface); background: var(--color-surface-2);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
overflow: hidden; overflow: hidden;
gap: 0 !important; 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); backdrop-filter: saturate(160%) blur(20px);
-webkit-backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
} }
.library__thumb { .library__thumb {
border-radius: 0 !important; border-radius: 0 !important;
background: var(--color-surface-2);
} }
.library__manage { .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-top: 1px solid var(--color-border);
border-radius: 0 !important; border-radius: 0 !important;
padding: var(--space-3) var(--space-4) !important; padding: var(--space-3) var(--space-4) !important;
transition: background var(--duration-fast) var(--ease-out); 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 { .library__manage-summary {
color: var(--color-text-muted); color: var(--color-text-muted);
public/build/assets/HomeView-BHt2KFtP.js → public/build/assets/HomeView-B2M6dRne.js
+1 -1
View File
File diff suppressed because one or more lines are too long
public/build/assets/LibraryView-CamKEgJn.js → public/build/assets/LibraryView-D3s2mr4A.js
+1 -1
View File
File diff suppressed because one or more lines are too long
public/build/assets/SettingsView-CRFuTTmC.js → public/build/assets/SettingsView-DtJoa14q.js
+1 -1
View File
File diff suppressed because one or more lines are too long
public/build/assets/UploadView-MjuJWbs1.js → public/build/assets/UploadView-4VIUrWB_.js
+1 -1
View File
File diff suppressed because one or more lines are too long
public/build/assets/index-CdzA-i88.css
+1
View File
File diff suppressed because one or more lines are too long
public/build/assets/index-Ct33aET2.js → public/build/assets/index-Cj9w1SIV.js
+2 -2
View File
File diff suppressed because one or more lines are too long
public/build/assets/index-Shs-JUMi.css
-1
View File
File diff suppressed because one or more lines are too long
public/build/index.html
+2 -2
View File
@@ -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-Ct33aET2.js"></script> <script type="module" crossorigin src="/build/assets/index-Cj9w1SIV.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-Shs-JUMi.css"> <link rel="stylesheet" crossorigin href="/build/assets/index-CdzA-i88.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>