DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Fix: "Foto folgt"-Platzhalter bekommt jetzt den gleichen edlen Rahmen wie echte Fotos

Browse Source 
Innerhalb eines Portrait-Frames (z.B. Charakter-Box ohne zugeordnetes
Produkt wie HasiGott/Mama Hase) hatte der Platzhalter keinen Rahmen/Ring,
während echte Fotos schon den dunklen Ring + Akzent-Leuchtrand hatten
(.portrait-frame img). Jetzt bekommt .img-placeholder innerhalb eines
Portrait-Frames genau denselben Rahmen — behält dabei seine eigene
Flex-Zentrierung für den "Produktfoto folgt"-Text.

Verifiziert per Puppeteer: Platzhalter hat jetzt denselben box-shadow-
Ring wie echte Fotos, Textzentrierung (display:flex) bleibt erhalten.
This commit is contained in:
qcigano
2026-08-02 22:16:16 +02:00
parent 3cebb9c3cd
commit eddc70e698
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+13 -1
View File
@@ -262,8 +262,20 @@ a.card:hover {
box-shadow: var(--shadow-card), 0 0 0 6px rgba(10, 9, 16, 0.6), 0 0 0 7px rgba(95, 211, 236, 0.18); box-shadow: var(--shadow-card), 0 0 0 6px rgba(10, 9, 16, 0.6), 0 0 0 7px rgba(95, 211, 236, 0.18);
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
} }
/* Auch der "Foto folgt"-Platzhalter bekommt den gleichen edlen Rahmen/Ring wie ein echtes Foto —
vorher blieb er innerhalb eines Portrait-Frames (z.B. Charakter ohne Produkt) unauffällig
randlos, während echte Fotos schon den Ring hatten. Behält seine eigene Flex-Zentrierung für
den "Produktfoto folgt"-Text bei (nur display wird hier NICHT überschrieben). */
.portrait-frame .img-placeholder {
aspect-ratio: 1 / 1;
border-radius: var(--radius-l);
border: 1px solid rgba(244, 241, 247, 0.08);
box-shadow: var(--shadow-card), 0 0 0 6px rgba(10, 9, 16, 0.6), 0 0 0 7px rgba(95, 211, 236, 0.18);
transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.portrait-frame:hover .portrait-img, .portrait-frame:hover .portrait-img,
.portrait-frame:hover img { .portrait-frame:hover img,
.portrait-frame:hover .img-placeholder {
transform: translateY(-4px) scale(1.015); transform: translateY(-4px) scale(1.015);
box-shadow: var(--shadow-card-hover), 0 0 0 6px rgba(10, 9, 16, 0.6), 0 0 0 7px rgba(95, 211, 236, 0.32); box-shadow: var(--shadow-card-hover), 0 0 0 6px rgba(10, 9, 16, 0.6), 0 0 0 7px rgba(95, 211, 236, 0.32);
} }