cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gdhkmjdtgh

Browse Source
This commit is contained in:
cay 2026-04-13 09:48:13 +01:00
parent 50f739e161
commit 6ec9c994c3
2 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/css/1v1.css
View File

@ -425,7 +425,7 @@ body {
box-shadow 0.2s ease, box-shadow 0.2s ease,
opacity 0.2s ease; opacity 0.2s ease;
position: relative; position: relative;
z-index: 0; /* eigener Stacking-Context: img z-index:2 schlaegt ::before sicher – kein isolation:isolate (GPU-Compositing-Bug mit overflow:hidden) */ z-index: 0; /* eigener Stacking-Context ohne GPU-Compositing-Bug */
overflow: visible; overflow: visible;
box-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4); box-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4);
} }
@ -433,7 +433,6 @@ body {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 0; /* explizit unter dem Karten-Image (z-index:2) */
background: linear-gradient( background: linear-gradient(
160deg, 160deg,
rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 0%,
@ -726,12 +725,9 @@ body {
border-color: rgba(255, 215, 80, 0.6); border-color: rgba(255, 215, 80, 0.6);
} }
/* Hand-Slot: Karte ist drin /* Hand-Slot: Karte ist drin – background-image wird via JS gesetzt,
- background transparent damit der dunkle Slot-Hintergrund nicht durchscheint overflow:hidden clippt an border-radius */
- overflow:hidden clippt das absolute img auf den border-radius
- ::before Gradient-Overlay ausblenden */
.hand-slot.hand-slot--filled { .hand-slot.hand-slot--filled {
background: transparent !important;
overflow: hidden !important; overflow: hidden !important;
} }
.hand-slot.hand-slot--filled::before { .hand-slot.hand-slot--filled::before {

32
views/1v1-battlefield.ejs
View File

@ -428,9 +428,12 @@
if (!slot) return; if (!slot) return;
if (!state) { if (!state) {
// Inline-Styles aus dem Karten-Render wieder entfernen // Alle Inline-Styles aus dem Karten-Render zurücksetzen
slot.style.background = ""; slot.style.backgroundImage = "";
slot.style.overflow = ""; slot.style.backgroundSize = "";
slot.style.backgroundPosition = "";
slot.style.backgroundColor = "";
slot.style.overflow = "";
slot.innerHTML = '<span class="hs-icon">🃏</span>'; slot.innerHTML = '<span class="hs-icon">🃏</span>';
slot.classList.remove("hand-slot-ready", "hand-slot--filled"); slot.classList.remove("hand-slot-ready", "hand-slot--filled");
slot.draggable = false; slot.draggable = false;
@ -464,17 +467,22 @@
? `<div class="hand-slot-ready-badge">SPIELEN</div>` ? `<div class="hand-slot-ready-badge">SPIELEN</div>`
: ""; : "";
// Slot direkt stylen – umgeht Compositing-Probleme von backdrop-filter // ── Karte als CSS background-image rendern ────────────────────────────
slot.style.background = "transparent"; // Kein <img> mit position:absolute mehr → kein z-index/Compositing-Konflikt.
slot.style.overflow = "hidden"; // CSS background-image liegt IMMER hinter Kindelementen, unabhängig vom Browser.
if (card.image) {
slot.style.backgroundImage = `url('/images/cards/${card.image}')`;
slot.style.backgroundSize = 'cover';
slot.style.backgroundPosition = 'center';
} else {
slot.style.backgroundImage = 'none';
}
// Solides Backing damit kein Hintergrund durchscheint
slot.style.backgroundColor = 'rgba(18,13,6,0.97)';
slot.style.overflow = 'hidden';
slot.innerHTML = card.image slot.innerHTML = card.image
? `<img src="/images/cards/${card.image}" ? `${statsHtml}${readyBadge}`
onerror="this.src='/images/items/rueckseite.png'"
title="${card.name}"
draggable="false"
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;z-index:2;">
${statsHtml}${readyBadge}`
: `<div style="display:flex;flex-direction:column;align-items:center; : `<div style="display:flex;flex-direction:column;align-items:center;
justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;"> justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;">
<span style="font-size:18px;">⚔️</span> <span style="font-size:18px;">⚔️</span>