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

Zahlungsart-Icons deutlich größer, echte Markenfarben-Verläufe, edlere Karten

Browse Source 
Icon-Kacheln bei PayPal/Klarna/Banküberweisung von 34px auf 52px vergrößert
und mit echten Marken-Farbverläufen statt flacher Einzelfarbe versehen
(PayPal-Blau, Klarna-Rosa mit schwarzem Logo, dezentes Bank-Blaugrau).
Auswahlkarten insgesamt größer, mit Verlaufshintergrund, größerem
Radio-Button und weicherem Hover-/Auswahl-Glow für einen fertigeren,
"aus einem Guss"-Look.
This commit is contained in:
qcigano
2026-08-02 19:09:43 +02:00
parent 334df113ae
commit 83f381dcd2
5 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ch/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3>
<div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
<span class="pay-icon" style="background:#003087;">P</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
<span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked />
</label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
<span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
<span>Klarna</span>
<input type="radio" name="pay" value="klarna" />
</label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
<span class="pay-icon" style="background:#3b5a76;">🏦</span>
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
<span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" />
</label>
src/pages/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3>
<div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
<span class="pay-icon" style="background:#003087;">P</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
<span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked />
</label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
<span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
<span>Klarna</span>
<input type="radio" name="pay" value="klarna" />
</label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
<span class="pay-icon" style="background:#3b5a76;">🏦</span>
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
<span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" />
</label>
src/pages/en/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3>
<div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
<span class="pay-icon" style="background:#003087;">P</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
<span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked />
</label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
<span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
<span>Klarna</span>
<input type="radio" name="pay" value="klarna" />
</label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
<span class="pay-icon" style="background:#3b5a76;">🏦</span>
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
<span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" />
</label>
src/pages/fr/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3>
<div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
<span class="pay-icon" style="background:#003087;">P</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
<span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked />
</label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
<span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
<span>Klarna</span>
<input type="radio" name="pay" value="klarna" />
</label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
<span class="pay-icon" style="background:#3b5a76;">🏦</span>
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
<span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" />
</label>