diff --git a/frontend/src/lib/styles/ported/resourceList.css b/frontend/src/lib/styles/ported/resourceList.css index e4d5b594..595ba4b8 100644 --- a/frontend/src/lib/styles/ported/resourceList.css +++ b/frontend/src/lib/styles/ported/resourceList.css @@ -708,13 +708,35 @@ outline-offset: 2px; } -/* More actions button (three dots) — top-right of the thumbnail on a scrim. */ -/* Grid cards surface actions through the corner kebab (.file-actions) + the - favorite star, both absolutely positioned below. The inline per-row action - buttons (share/move/rename/delete) belong to the list view only — hide them - here so they don't stack up along the bottom edge of the card. */ -.files-grid-view .file-item .action-cell .btn-action { - display: none; +/* ── Grid card action cluster ───────────────────────────────────── + Every action a row can surface — favorite star, `.file-actions` + kebab, per-section `.btn-action` icons (e.g. trash's Restore / + Delete permanently) — lives in a single `.action-cell` container + pinned to the top-right of the card. The container carries the + position + hover-reveal + gap; its children just supply their + own chip visuals (30x30 scrim pill, etc.), no more one-off + absolute positioning per child. + + Old rules put `.file-actions` and `.favorite-star` at hand-crafted + absolute coordinates and hid `.btn-action` entirely — that made + trash's per-item buttons invisible in grid view. The unified + container reads as one design pattern and takes whatever children + the row template hands it. */ +.files-grid-view .file-item .action-cell { + position: absolute; + top: calc(var(--space-3) + 8px); + right: calc(var(--space-3) + 8px); + z-index: 10; + display: flex; + gap: var(--space-1); + opacity: 0; + transition: opacity var(--motion-fast) var(--ease-standard); +} + +.files-grid-view .file-item:hover .action-cell, +.files-grid-view .file-item:focus-within .action-cell, +.files-grid-view .file-item .action-cell:has(.favorite-star.active) { + opacity: 1; } /* The favorite state is already shown by the corner star button, so the inline @@ -723,34 +745,32 @@ display: none; } -.files-grid-view .file-item .file-actions { - position: absolute; - top: calc(var(--space-3) + 8px); - right: calc(var(--space-3) + 8px); +/* Chip visuals for anything inside the corner cluster — the kebab, the star, + any `.btn-action`. Uniform 30x30 scrim pill so they line up in the flex row. */ +.files-grid-view .file-item .action-cell .file-actions, +.files-grid-view .file-item .action-cell .favorite-star, +.files-grid-view .file-item .action-cell .btn-action { + position: static; width: 30px; height: 30px; - border-radius: var(--radius-full); + padding: 0; border: none; + border-radius: var(--radius-full); background: var(--color-scrim-control); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 3px var(--color-shadow-sm); - display: flex; + display: inline-flex; align-items: center; justify-content: center; - opacity: 0; - z-index: 10; - cursor: pointer; color: var(--color-text); font-size: var(--text-md); - transition: opacity var(--motion-fast) var(--ease-standard); -} - -.files-grid-view .file-item:hover .file-actions { + cursor: pointer; + /* Opacity/hover-reveal moves up to `.action-cell` — children stay opaque. */ opacity: 1; } -.files-grid-view .file-item .file-actions:hover { +.files-grid-view .file-item .action-cell .file-actions:hover { color: var(--color-accent); } @@ -782,34 +802,16 @@ line-height: var(--leading-none); } -/* Favorite star — top-right of the thumbnail, left of the kebab, on a scrim. */ +/* Favorite star — visual overrides only. Position, hover-reveal, chip + geometry all come from the shared corner-cluster rule on + `.files-grid-view .file-item .action-cell`. What's left here is just + the star's per-state colour: subtle at rest, active-gold when the + item is a favorite. `.active` still bumps the parent cluster's + opacity so an unhovered card can still show its star. */ .files-grid-view .file-item button.favorite-star { - position: absolute; - top: calc(var(--space-3) + 8px); - right: calc(var(--space-3) + 8px + 34px); - width: 30px; - height: 30px; - border-radius: var(--radius-full); - border: none; - background: var(--color-scrim-control); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); - box-shadow: 0 1px 3px var(--color-shadow-sm); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - z-index: 12; - cursor: pointer; color: var(--color-text-subtle); font-size: 15px; - padding: 0; line-height: var(--leading-none); - transition: opacity var(--motion-fast) var(--ease-standard); -} - -.files-grid-view .file-item:hover button.favorite-star { - opacity: 1; } .files-grid-view .file-item button.favorite-star:hover { @@ -817,7 +819,6 @@ } .files-grid-view .file-item button.favorite-star.active { - opacity: 1; color: var(--color-star-text-hover); } diff --git a/frontend/src/routes/trash/+page.svelte b/frontend/src/routes/trash/+page.svelte index 6a1117da..83913fdb 100644 --- a/frontend/src/routes/trash/+page.svelte +++ b/frontend/src/routes/trash/+page.svelte @@ -400,4 +400,14 @@ color: var(--color-danger-text); font-weight: var(--weight-semibold); } + + /* Grid-corner action-cell layout + chip visuals now live in the + shared `ported/resourceList.css`; every section using ResourceList + picks them up. What stays here is only the trash-specific danger + red on the "Delete permanently" button — `--color-error-text` is + the right red-text token (the shared `.file-actions:hover` accent + colour still lands on the plain `.btn-action` restore button). */ + :global(.files-grid-view .file-item .action-cell .btn-action--delete:hover) { + color: var(--color-error-text); + }