This commit is contained in:
cay 2026-04-10 07:15:29 +01:00
parent de9af40412
commit cf3ce30a6f
2 changed files with 52 additions and 43 deletions

View File

@ -599,49 +599,58 @@ body {
border-radius: calc(var(--s) * 7);
}
/* Gemeinsamer Badge-Stil: runder Kreis */
.cs-badge {
/* ⚔ Angriff roter Pill, rechts mittig (wie kd-stat-atk) */
.cs-atk {
position: absolute;
width: calc(var(--s) * 24);
height: calc(var(--s) * 24);
right: calc(var(--s) * 12);
top: 40%;
transform: translateY(-50%);
background: rgba(180, 40, 20, 0.88);
border: 1px solid #ff6040;
border-radius: calc(var(--s) * 45);
color: #fff;
font-family: "Cinzel", serif;
font-size: calc(var(--s) * 10);
font-weight: bold;
padding: calc(var(--s) * 2) calc(var(--s) * 5);
z-index: 5;
}
/* 🛡 Verteidigung blauer Pill, links mittig (wie kd-stat-def) */
.cs-def {
position: absolute;
left: calc(var(--s) * 12);
top: 40%;
transform: translateY(-50%);
background: rgba(20, 80, 180, 0.88);
border: 1px solid #4090ff;
border-radius: calc(var(--s) * 45);
color: #fff;
font-family: "Cinzel", serif;
font-size: calc(var(--s) * 10);
font-weight: bold;
padding: calc(var(--s) * 2) calc(var(--s) * 5);
z-index: 5;
}
/* ⏱ Cooldown goldener Kreis, unten-rechts (wie kd-stat-cd) */
.cs-cd {
position: absolute;
bottom: calc(var(--s) * 7);
right: calc(var(--s) * 11);
width: calc(var(--s) * 22);
height: calc(var(--s) * 22);
border-radius: 50%;
background: rgba(0, 0, 0, 0.75);
border: 1px solid #f0d060;
display: flex;
align-items: center;
justify-content: center;
font-family: "Cinzel", serif;
font-size: calc(var(--s) * 12);
font-weight: 700;
line-height: 1;
box-shadow:
0 calc(var(--s) * 2) calc(var(--s) * 6) rgba(0,0,0,0.85),
inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
color: #fff;
}
/* ⚔ Angriff blau, oben-links (wie Slotmaschine) */
.cs-atk {
top: calc(var(--s) * 7);
left: calc(var(--s) * 7);
background: radial-gradient(circle at 38% 32%, #5ba8e8, #1a4f9a);
border: calc(var(--s) * 2) solid rgba(140, 200, 255, 0.85);
}
/* 🛡 Verteidigung rot, oben-rechts (wie Slotmaschine) */
.cs-def {
top: calc(var(--s) * 7);
right: calc(var(--s) * 7);
background: radial-gradient(circle at 38% 32%, #e85b5b, #9a1a1a);
border: calc(var(--s) * 2) solid rgba(255, 140, 140, 0.85);
}
/* ⏱ Cooldown gold, unten-rechts (wie Slotmaschine) */
.cs-cd {
bottom: calc(var(--s) * 7);
right: calc(var(--s) * 7);
background: radial-gradient(circle at 38% 32%, #d4a020, #7a5200);
border: calc(var(--s) * 2) solid rgba(255, 210, 80, 0.85);
font-size: calc(var(--s) * 11);
font-size: calc(var(--s) * 9);
font-weight: bold;
color: #f0d9a6;
z-index: 5;
}
/* Belegte Feldslots */

View File

@ -283,9 +283,9 @@
const statsHtml = showStats ? `
<div class="card-stat-overlay">
${hasAtk ? `<span class="cs-badge cs-atk">${atkVal}</span>` : ""}
${hasDef ? `<span class="cs-badge cs-def">${defVal}</span>` : ""}
${hasCd ? `<span class="cs-badge cs-cd">${cdVal}</span>` : ""}
${hasAtk ? `<span class="cs-atk">${atkVal}</span>` : ""}
${hasDef ? `<span class="cs-def">${defVal}</span>` : ""}
${hasCd ? `<span class="cs-cd">${cdVal}</span>` : ""}
</div>` : "";
slot.innerHTML = card.image
@ -318,9 +318,9 @@
const hasCd = cdVal != null;
const statsHtml = (hasAtk || hasDef || hasCd) ? `
<div class="card-stat-overlay">
${hasAtk ? `<span class="cs-badge cs-atk">${atkVal}</span>` : ""}
${hasDef ? `<span class="cs-badge cs-def">${defVal}</span>` : ""}
${hasCd ? `<span class="cs-badge cs-cd">${cdVal}</span>` : ""}
${hasAtk ? `<span class="cs-atk">${atkVal}</span>` : ""}
${hasDef ? `<span class="cs-def">${defVal}</span>` : ""}
${hasCd ? `<span class="cs-cd">${cdVal}</span>` : ""}
</div>` : "";
slot.classList.add("slot-occupied");