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

polish(design-v2): Manage button bar more obviously button-like
CI / test (push) Has been cancelled
Details

Browse Source 
Min-height 44px (touch target), 'Manage ▸' wrapped in a yellow-bordered
chip with subtle yellow background, whole bar hovers to a brighter
yellow tint. Reads as a tap target now, not just text.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Edholm
2026-05-15 17:07:54 -04:00
parent 99b3fb9e59
commit c794878e5e
9 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/design-v2.scss
+13 -3
View File
@@ -176,13 +176,17 @@
background: var(--color-surface-2);
}
.library__manage {
background: rgba(0,0,0,0.35) !important;
background: rgba(0,0,0,0.45) !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);
min-height: 44px;
&:hover { background: rgba(0,0,0,0.5) !important; }
&:hover {
background: color-mix(in srgb, var(--brand-yellow) 18%, rgba(0,0,0,0.6)) !important;
}
&:hover .library__manage-action { color: var(--brand-yellow) !important; }
}
.library__manage-summary {
color: var(--color-text-muted);
@@ -192,8 +196,14 @@
}
.library__manage-action {
color: var(--brand-yellow) !important;
font-weight: 700;
font-weight: 800;
font-size: var(--text-sm);
letter-spacing: 0.04em;
padding: 4px 10px;
border: 1px solid color-mix(in srgb, var(--brand-yellow) 50%, transparent);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--brand-yellow) 10%, transparent);
transition: background var(--duration-fast);
}
.library__manage-lock { color: var(--color-text-muted); }