From a31bd2b4a0b845ee5d6b32157dff717322d1c63a Mon Sep 17 00:00:00 2001 From: qcigano Date: Sun, 2 Aug 2026 20:24:02 +0200 Subject: [PATCH] =?UTF-8?q?Warenkorb:=20Trennlinie=20zwischen=20Artikeln?= =?UTF-8?q?=20als=20zweifarbige=20Naht=20statt=20n=C3=BCchterner=20grauer?= =?UTF-8?q?=20Linie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Passend zum "Bastelbedarf"-Charme: die Trennung zwischen Warenkorb- Positionen ist jetzt ein gestrichelter Verlaufs-Stich in Marken-Akzent und Lila statt einer kaum sichtbaren grauen 1px-Linie — fällt deutlich mehr auf, bleibt aber dezent genug für den professionellen Rest der Seite. Verifiziert per Puppeteer-Screenshot mit zwei Artikeln im Warenkorb. --- src/styles/global.css | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index 39b35e0..f93f914 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -862,16 +862,35 @@ a:focus-visible, button:focus-visible { /* Warenkorb */ .cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; } .cart-item { + position: relative; display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 0.4rem; - border-bottom: 1px solid rgba(244, 241, 247, 0.08); transition: background 0.2s var(--ease); border-radius: var(--radius-s); } .cart-item:hover { background: rgba(244, 241, 247, 0.02); } -.cart-item:last-child { border-bottom: none; } + +/* Trennung zwischen Warenkorb-Positionen als kleine "Naht" statt einer nüchternen grauen Linie + — zweifarbiger Verlaufs-Stich (Marken-Akzent + Lila), passt zum "Bastelbedarf"-Charme, bleibt + aber dezent und ruhig genug für den professionellen Rest der Seite. */ +.cart-item:not(:last-child)::after { + content: ""; + position: absolute; + left: 0.4rem; + right: 0.4rem; + bottom: 0; + height: 2px; + border-radius: 1px; + background: repeating-linear-gradient( + 90deg, + color-mix(in srgb, var(--c-accent) 75%, transparent) 0 9px, + color-mix(in srgb, var(--c-purple-glow) 75%, transparent) 9px 18px, + transparent 18px 26px + ); + opacity: 0.55; +} /* Checkbox "jetzt kaufen" — abgewählte Artikel bleiben sichtbar im Warenkorb liegen, zählen aber nicht mehr zur Summe/zum Checkout, bis sie wieder angehakt werden. */