fkjf
This commit is contained in:
parent
de9af40412
commit
cf3ce30a6f
@ -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 */
|
||||
|
||||
@ -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");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user