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

Checkout: Kreis-Icon bei Kreditkarte durch schlichtes Kartensymbol ersetzt

Browse Source 
Die zwei ueberlappenden Kreise (Visa/Mastercard-Anmutung) beim
Kreditkarte-Zahlungsoption wirkten wie ein fremdes Marken-Logo statt einem
neutralen eigenen Icon. Ersetzt durch ein schlichtes SVG-Kartensymbol, im
gleichen Stil wie die anderen Zahlungsarten-Icons (PayPal/Klarna).

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 02:58:57 +02:00
co-authored by Claude Sonnet 5
parent 52429c5a16
commit 1add9a42a1
5 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ch/checkout/index.astro
+1 -1
View File
@@ -48,7 +48,7 @@ const t = useTranslations(lang);
<div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
<label class="pay-option">
<span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
<span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.2"></rect><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"></line><line x1="5.5" y1="14.5" x2="9.5" y2="14.5"></line></svg>
</span>
<span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
<input type="radio" name="pay" value="kreditkarte" />
src/pages/checkout/index.astro
+1 -1
View File
@@ -48,7 +48,7 @@ const t = useTranslations(lang);
<div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
<label class="pay-option">
<span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
<span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.2"></rect><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"></line><line x1="5.5" y1="14.5" x2="9.5" y2="14.5"></line></svg>
</span>
<span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
<input type="radio" name="pay" value="kreditkarte" />
src/pages/en/checkout/index.astro
+1 -1
View File
@@ -48,7 +48,7 @@ const t = useTranslations(lang);
<div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
<label class="pay-option">
<span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
<span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.2"></rect><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"></line><line x1="5.5" y1="14.5" x2="9.5" y2="14.5"></line></svg>
</span>
<span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
<input type="radio" name="pay" value="kreditkarte" />
src/pages/fr/checkout/index.astro
+1 -1
View File
@@ -48,7 +48,7 @@ const t = useTranslations(lang);
<div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
<label class="pay-option">
<span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
<span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.2"></rect><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"></line><line x1="5.5" y1="14.5" x2="9.5" y2="14.5"></line></svg>
</span>
<span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
<input type="radio" name="pay" value="kreditkarte" />
src/styles/global.css
+4 -5
View File
@@ -1506,11 +1506,10 @@ a:focus-visible, button:focus-visible {
}
.pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
/* Kreditkarte: zwei überlappende Kreise (Visa/Mastercard-Anmutung) statt einem Buchstaben. */
.pay-icon-cc { position: relative; }
.pay-icon-cc .cc-dot { position: absolute; width: 24px; height: 24px; border-radius: 50%; top: 50%; transform: translateY(-50%); }
.pay-icon-cc .cc-dot-a { left: 8px; background: #eb5b3c; }
.pay-icon-cc .cc-dot-b { left: 20px; background: #f7b73c; mix-blend-mode: screen; }
/* Kreditkarte: schlichtes Kartensymbol (SVG) statt einem Buchstaben wie bei PayPal/Klarna —
vorher zwei überlappende Kreise in Visa/Mastercard-Anmutung, die auf Wunsch entfernt wurden
(wirkten wie ein fremdes Marken-Logo statt einem neutralen eigenen Icon). */
.pay-icon-cc svg { display: block; }
.pay-option .pay-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.1em; }
/* Der "Verbinden"-Bereich sitzt DIREKT in der Karte selbst und klappt beim Anklicken sofort auf —