Remove gallery rotating border frame
This commit is contained in:
FengLee
@@ -77,7 +77,7 @@ Use this guide when the user reports behavior. Start from the symptom row, inspe
|
||||
| Gallery delete does not remove public item | `src/app/api/gallery/route.ts`, admin UI route using it | DELETE unpublishes by setting `is_public = false`, not hard delete. |
|
||||
| Search/filter/sort wrong | `src/app/api/gallery/route.ts`, `src/app/gallery/page.tsx` | Query params `type`, `limit`, `offset`, `sort`, `q/search`; SQL where/order. |
|
||||
| Gallery search box looks inconsistent with the rest of the UI | `src/app/gallery/page.tsx` | The search field is a custom glass panel with an inner focused input surface; avoid reverting it to a plain transparent input row. |
|
||||
| Gallery hover makes images muddy, covers the image with prompt text, shows a rotating glow block, or action buttons disappear on dark/light images | `src/app/gallery/page.tsx`, `src/app/globals.css` | Gallery cards should not use a full-image dark hover overlay, center prompt text, or broad square glow under the card. Keep hover feedback on the card container with scale plus a thin image-color perimeter flow, and keep like/download buttons legible through sampled image brightness inversion. |
|
||||
| Gallery hover makes images muddy, covers the image with prompt text, shows a rotating glow block/perimeter frame, or action buttons disappear on dark/light images | `src/app/gallery/page.tsx`, `src/app/globals.css` | Gallery cards should not use a full-image dark hover overlay, center prompt text, broad square glow under the card, or rotating border frame. Keep hover feedback on the card container with scale plus a sampled-color static highlight, and keep like/download buttons legible through sampled image brightness inversion. |
|
||||
|
||||
## Canvas
|
||||
|
||||
|
||||
@@ -102,7 +102,7 @@ Use this document to jump directly to code before broad searching.
|
||||
|
||||
| Feature | Files | Notes |
|
||||
| --- | --- | --- |
|
||||
| Public gallery page | `src/app/gallery/page.tsx`, `src/app/globals.css` | Lists public works, search/sort/filter, preview/download. The search box is custom styled in-page to match the glass UI; gallery cards use hover scale plus a thin image-color perimeter flow instead of an image-covering dark overlay or broad glow block, and hover like/download buttons invert against sampled image brightness. Gallery detail image previews use `ImageMetadataBadge` for actual ratio/resolution. |
|
||||
| Public gallery page | `src/app/gallery/page.tsx`, `src/app/globals.css` | Lists public works, search/sort/filter, preview/download. The search box is custom styled in-page to match the glass UI; gallery cards use hover scale plus a sampled-color static highlight instead of an image-covering dark overlay, broad glow block, or rotating perimeter frame, and hover like/download buttons invert against sampled image brightness. Gallery detail image previews use `ImageMetadataBadge` for actual ratio/resolution. |
|
||||
| Public gallery API | `src/app/api/gallery/route.ts` | GET public works, admin DELETE unpublishes. |
|
||||
| Publish API | `src/app/api/gallery/publish/route.ts` | Copies media into gallery folders and inserts public work. |
|
||||
| History persistence | `src/app/api/creation-history/route.ts`, `src/lib/creation-history-store.ts` | User-private completed works and published state. Single-record deletion is server-first when logged in; detail dialogs call the same store path and then refresh local history. |
|
||||
|
||||
@@ -224,89 +224,12 @@
|
||||
z-index 320ms ease;
|
||||
}
|
||||
|
||||
.gallery-work-shell::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
z-index: -1;
|
||||
padding: 3px;
|
||||
border-radius: 1.18rem;
|
||||
background:
|
||||
conic-gradient(
|
||||
from 0deg,
|
||||
transparent 0deg,
|
||||
transparent 58deg,
|
||||
var(--gallery-accent-1) 62deg,
|
||||
var(--gallery-accent-2) 84deg,
|
||||
var(--gallery-accent-3) 112deg,
|
||||
var(--gallery-accent-1) 140deg,
|
||||
transparent 146deg,
|
||||
transparent 360deg
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 260ms ease;
|
||||
animation: gallery-border-flow 3.6s linear infinite;
|
||||
animation-play-state: paused;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.gallery-work-shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -7px;
|
||||
z-index: -2;
|
||||
padding: 7px;
|
||||
border-radius: 1.38rem;
|
||||
background:
|
||||
conic-gradient(
|
||||
from 0deg,
|
||||
transparent 0deg,
|
||||
transparent 54deg,
|
||||
var(--gallery-accent-1) 64deg,
|
||||
var(--gallery-accent-2) 84deg,
|
||||
var(--gallery-accent-3) 114deg,
|
||||
var(--gallery-accent-1) 142deg,
|
||||
transparent 150deg,
|
||||
transparent 360deg
|
||||
);
|
||||
filter: blur(7px) saturate(1.45);
|
||||
opacity: 0;
|
||||
transition: opacity 320ms ease;
|
||||
animation: gallery-border-flow 3.6s linear infinite;
|
||||
animation-play-state: paused;
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.gallery-work-shell:hover {
|
||||
z-index: 10;
|
||||
transform: translateY(-6px) scale(1.02);
|
||||
filter: saturate(1.03);
|
||||
}
|
||||
|
||||
.gallery-work-shell:hover::before {
|
||||
opacity: 0.98;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.gallery-work-shell:hover::after {
|
||||
opacity: 0.64;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.gallery-work-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -319,7 +242,9 @@
|
||||
.gallery-work-shell:hover .gallery-work-card {
|
||||
border-color: color-mix(in srgb, var(--gallery-accent-1) 48%, white 24%);
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in srgb, var(--gallery-accent-1) 42%, transparent),
|
||||
0 16px 34px rgb(0 0 0 / 0.18),
|
||||
0 0 24px color-mix(in srgb, var(--gallery-accent-2) 22%, transparent),
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.12);
|
||||
}
|
||||
|
||||
@@ -348,19 +273,8 @@
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@keyframes gallery-border-flow {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.gallery-work-shell,
|
||||
.gallery-work-shell::before,
|
||||
.gallery-work-shell::after,
|
||||
.gallery-work-action-button {
|
||||
animation: none !important;
|
||||
transition-duration: 1ms !important;
|
||||
|
||||
Reference in New Issue
Block a user