DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 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> <h3>{t.checkout.step2}</h3>
<div class="payment-options"> <div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;"> <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> <span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked /> <input type="radio" name="pay" value="paypal" checked />
</label> </label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;"> <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> <span>Klarna</span>
<input type="radio" name="pay" value="klarna" /> <input type="radio" name="pay" value="klarna" />
</label> </label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;"> <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> <span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" /> <input type="radio" name="pay" value="ueberweisung" />
</label> </label>
src/pages/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3> <h3>{t.checkout.step2}</h3>
<div class="payment-options"> <div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;"> <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> <span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked /> <input type="radio" name="pay" value="paypal" checked />
</label> </label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;"> <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> <span>Klarna</span>
<input type="radio" name="pay" value="klarna" /> <input type="radio" name="pay" value="klarna" />
</label> </label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;"> <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> <span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" /> <input type="radio" name="pay" value="ueberweisung" />
</label> </label>
src/pages/en/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3> <h3>{t.checkout.step2}</h3>
<div class="payment-options"> <div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;"> <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> <span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked /> <input type="radio" name="pay" value="paypal" checked />
</label> </label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;"> <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> <span>Klarna</span>
<input type="radio" name="pay" value="klarna" /> <input type="radio" name="pay" value="klarna" />
</label> </label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;"> <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> <span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" /> <input type="radio" name="pay" value="ueberweisung" />
</label> </label>
src/pages/fr/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3> <h3>{t.checkout.step2}</h3>
<div class="payment-options"> <div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;"> <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> <span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked /> <input type="radio" name="pay" value="paypal" checked />
</label> </label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;"> <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> <span>Klarna</span>
<input type="radio" name="pay" value="klarna" /> <input type="radio" name="pay" value="klarna" />
</label> </label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;"> <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> <span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" /> <input type="radio" name="pay" value="ueberweisung" />
</label> </label>
src/styles/global.css
+31 -23
View File
@@ -945,43 +945,51 @@ a:focus-visible, button:focus-visible {
/* Zahlungsart als richtige, klickbare Auswahlkarten statt Standard-Radiobuttons — passend zum /* Zahlungsart als richtige, klickbare Auswahlkarten statt Standard-Radiobuttons — passend zum
restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). */ restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). */
.payment-options { display: grid; gap: 0.7rem; } .payment-options { display: grid; gap: 0.85rem; }
.pay-option { .pay-option {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.9em; gap: 1.1em;
padding: 0.95em 1.1em; padding: 1.15em 1.3em;
border: 1px solid rgba(244, 241, 247, 0.12); border: 1.5px solid rgba(244, 241, 247, 0.12);
border-radius: var(--radius-m); border-radius: var(--radius-l);
font-size: 0.95rem; font-size: 1.02rem;
font-weight: 600; font-weight: 700;
cursor: pointer; cursor: pointer;
background: var(--c-anthracite); background: linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
} }
.pay-option:hover { border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 45%, transparent); transform: translateY(-1px); } .pay-option:hover {
border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
transform: translateY(-2px);
box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
}
/* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Buchstabe/Symbol) statt schlichtem /* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Wortmarke) statt schlichtem Emoji —
Emoji — wirkt "fertig", nicht wie ein Platzhalter. */ groß und mit sanftem Verlauf/Glanz, wirkt "fertig", nicht wie ein Platzhalter. */
.pay-option .pay-icon { .pay-option .pay-icon {
width: 34px; width: 52px;
height: 34px; height: 52px;
border-radius: 9px; border-radius: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.05rem; font-size: 1.6rem;
font-weight: 800; font-weight: 800;
color: #fff; font-style: italic;
letter-spacing: -0.03em;
line-height: 1; line-height: 1;
flex-shrink: 0; flex-shrink: 0;
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.6); box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
background-blend-mode: overlay;
} }
.pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
.pay-option input[type="radio"] { .pay-option input[type="radio"] {
appearance: none; appearance: none;
width: 19px; width: 22px;
height: 19px; height: 22px;
border-radius: 50%; border-radius: 50%;
border: 2px solid rgba(244, 241, 247, 0.3); border: 2px solid rgba(244, 241, 247, 0.3);
margin-left: auto; margin-left: auto;
@@ -993,8 +1001,8 @@ a:focus-visible, button:focus-visible {
} }
.pay-option input[type="radio"]::before { .pay-option input[type="radio"]::before {
content: ""; content: "";
width: 10px; width: 12px;
height: 10px; height: 12px;
border-radius: 50%; border-radius: 50%;
transform: scale(0); transform: scale(0);
transition: transform 0.15s var(--ease); transition: transform 0.15s var(--ease);
@@ -1004,8 +1012,8 @@ a:focus-visible, button:focus-visible {
.pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); } .pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); }
.pay-option:has(input:checked) { .pay-option:has(input:checked) {
border-color: var(--brand-color, var(--c-accent)); border-color: var(--brand-color, var(--c-accent));
background: color-mix(in srgb, var(--brand-color, var(--c-accent)) 12%, var(--c-anthracite)); background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 16%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
} }
.pay-option:has(input:checked) span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); } .pay-option:has(input:checked) span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }