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

Warenkorb: Trennlinie zwischen Artikeln als fließender Verlauf mit Knopf-Ornament statt Strichen

Browse Source 
Die vorherige gestrichelte Linie wirkte noch zu "einfach nur Striche".
Jetzt fließt ein sanfter, an den Rändern ausblendender Verlauf in den
drei Marken-Farben (wie der Karten-Rand der Seite) über die volle
Breite, mit einem kleinen glänzenden Knopf in der Mitte — eine dezente
Anspielung auf's Nähen/Basteln, passend zur Marke, ohne aufdringlich zu
wirken.

Verifiziert per Puppeteer-Screenshot mit zwei Artikeln im Warenkorb.
This commit is contained in:
qcigano
2026-08-02 20:27:27 +02:00
parent a31bd2b4a0
commit d0feaacd4c
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+25 -10
View File
@@ -872,24 +872,39 @@ a:focus-visible, button:focus-visible {
} }
.cart-item:hover { background: rgba(244, 241, 247, 0.02); } .cart-item:hover { background: rgba(244, 241, 247, 0.02); }
/* Trennung zwischen Warenkorb-Positionen als kleine "Naht" statt einer nüchternen grauen Linie /* Trennung zwischen Warenkorb-Positionen als kleines "Knopf an der Naht"-Detail statt einer
— zweifarbiger Verlaufs-Stich (Marken-Akzent + Lila), passt zum "Bastelbedarf"-Charme, bleibt nüchternen Linie — fließender Verlauf in den drei Marken-Farben (wie der Karten-Rand der
aber dezent und ruhig genug für den professionellen Rest der Seite. */ Seite), mit einem kleinen glänzenden Knopf in der Mitte als Anspielung auf's Nähen/Basteln.
Bleibt dezent (schmal, sanftes Leuchten) statt aufdringlich. */
.cart-item:not(:last-child)::after { .cart-item:not(:last-child)::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 0.4rem; left: 0.4rem;
right: 0.4rem; right: 0.4rem;
bottom: 0; bottom: 0;
height: 2px; height: 1.5px;
border-radius: 1px; background: linear-gradient(
background: repeating-linear-gradient(
90deg, 90deg,
color-mix(in srgb, var(--c-accent) 75%, transparent) 0 9px, transparent,
color-mix(in srgb, var(--c-purple-glow) 75%, transparent) 9px 18px, var(--c-accent) 15%,
transparent 18px 26px var(--c-purple-glow) 50%,
var(--c-sale) 85%,
transparent
); );
opacity: 0.55; opacity: 0.75;
}
.cart-item:not(:last-child)::before {
content: "";
position: absolute;
left: 50%;
bottom: -4px;
z-index: 1;
width: 9px;
height: 9px;
border-radius: 50%;
transform: translateX(-50%);
background: radial-gradient(circle at 35% 30%, #fff, var(--c-accent) 45%, var(--c-purple-glow) 100%);
box-shadow: 0 0 9px 2px color-mix(in srgb, var(--c-purple-glow) 55%, transparent);
} }
/* Checkbox "jetzt kaufen" — abgewählte Artikel bleiben sichtbar im Warenkorb liegen, zählen aber /* Checkbox "jetzt kaufen" — abgewählte Artikel bleiben sichtbar im Warenkorb liegen, zählen aber