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

dtlkzuk

Browse Source
This commit is contained in:
cay 2026-04-12 12:05:29 +01:00
parent 74ad10c95e
commit 0e5164de23
1 changed files with 78 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
public/css/1v1.css
View File

@ -480,29 +480,31 @@ body {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 200; z-index: 200;
background: rgba(0,0,0,0.85); background: rgba(0, 0, 0, 0.85);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
color: rgba(255,215,80,0.85); color: rgba(255, 215, 80, 0.85);
font-size: 18px; font-size: 18px;
letter-spacing: 3px; letter-spacing: 3px;
} }
#connecting-overlay p { #connecting-overlay p {
margin-top: 12px; margin-top: 12px;
font-size: 12px; font-size: 12px;
color: rgba(255,255,255,0.4); color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px; letter-spacing: 2px;
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to {
transform: rotate(360deg);
}
} }
#connecting-overlay .spinner { #connecting-overlay .spinner {
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid rgba(255,215,80,0.2); border: 3px solid rgba(255, 215, 80, 0.2);
border-top-color: #ffd750; border-top-color: #ffd750;
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
@ -520,7 +522,9 @@ body {
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #ffd750; color: #ffd750;
text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.7); text-shadow:
0 1px 6px rgba(0, 0, 0, 0.9),
0 0 12px rgba(0, 0, 0, 0.7);
letter-spacing: 1px; letter-spacing: 1px;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
@ -606,7 +610,7 @@ body {
.tt-track { .tt-track {
fill: none; fill: none;
stroke: rgba(255,255,255,0.1); stroke: rgba(255, 255, 255, 0.1);
stroke-width: 4; stroke-width: 4;
} }
@ -619,7 +623,9 @@ body {
transform-origin: center; transform-origin: center;
stroke-dasharray: 113.1; /* 2π×18 */ stroke-dasharray: 113.1; /* 2π×18 */
stroke-dashoffset: 0; stroke-dashoffset: 0;
transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease; transition:
stroke-dashoffset 0.9s linear,
stroke 0.3s ease;
} }
#turn-timer-num { #turn-timer-num {
@ -628,13 +634,20 @@ body {
font-size: calc(var(--s) * 13); font-size: calc(var(--s) * 13);
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.9); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
line-height: 1; line-height: 1;
} }
@keyframes tt-pulse { @keyframes tt-pulse {
0%, 100% { opacity: 1; transform: scale(1); } 0%,
50% { opacity: 0.6; transform: scale(1.15); } 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.15);
}
} }
/* ── Karten-Stats Overlay – exakt wie Slotmaschine ── */ /* ── Karten-Stats Overlay – exakt wie Slotmaschine ── */
@ -684,8 +697,8 @@ body {
.cs-cd { .cs-cd {
position: absolute; position: absolute;
bottom: calc(var(--s) * 7); bottom: calc(var(--s) * 7);
right: calc(var(--s) * 2); right: calc(var(--s) * 2);
width: calc(var(--s) * 18); width: calc(var(--s) * 18);
height: calc(var(--s) * 18); height: calc(var(--s) * 18);
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, 0.75); background: rgba(0, 0, 0, 0.75);
@ -706,13 +719,32 @@ body {
border-color: rgba(255, 215, 80, 0.6); border-color: rgba(255, 215, 80, 0.6);
} }
/* Hand-Slot: Karte ist drin → Hintergrund + Overlay entfernen */
.hand-slot.hand-slot--filled {
background: transparent !important;
backdrop-filter: none !important;
}
.hand-slot.hand-slot--filled::before {
display: none !important;
}
/* Karten-Bild immer über dem ::before pseudo-element */
.hand-slot img {
position: relative;
z-index: 1;
border-radius: calc(var(--s) * 9);
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hand-Slot: Karte ist spielbereit (CD = 0) */ /* Hand-Slot: Karte ist spielbereit (CD = 0) */
.hand-slot.hand-slot-ready { .hand-slot.hand-slot-ready {
border-color: rgba(80, 220, 80, 0.9) !important; border-color: rgba(80, 220, 80, 0.9) !important;
border-style: solid !important; border-style: solid !important;
box-shadow: box-shadow:
0 0 calc(var(--s) * 18) rgba(60, 200, 60, 0.5), 0 0 calc(var(--s) * 18) rgba(60, 200, 60, 0.5),
0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0,0,0,0.4); 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4);
} }
/* CD-Badge wenn Karte spielbereit */ /* CD-Badge wenn Karte spielbereit */
@ -729,7 +761,11 @@ body {
top: calc(var(--s) * 4); top: calc(var(--s) * 4);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: linear-gradient(135deg, rgba(20,120,20,0.92), rgba(10,80,10,0.92)); background: linear-gradient(
135deg,
rgba(20, 120, 20, 0.92),
rgba(10, 80, 10, 0.92)
);
border: 1px solid #60d060; border: 1px solid #60d060;
border-radius: calc(var(--s) * 4); border-radius: calc(var(--s) * 4);
color: #a0ffa0; color: #a0ffa0;
@ -741,7 +777,7 @@ body {
pointer-events: none; pointer-events: none;
z-index: 6; z-index: 6;
white-space: nowrap; white-space: nowrap;
text-shadow: 0 1px 4px rgba(0,0,0,0.8); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
} }
/* Spielfeld-Sperre */ /* Spielfeld-Sperre */
@ -771,7 +807,7 @@ body {
border: 1px solid rgba(255, 215, 80, 0.35); border: 1px solid rgba(255, 215, 80, 0.35);
border-radius: 16px; border-radius: 16px;
padding: 32px 40px; padding: 32px 40px;
box-shadow: 0 8px 40px rgba(0,0,0,0.8); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
min-width: 260px; min-width: 260px;
} }
#ready-timer-label { #ready-timer-label {
@ -791,7 +827,7 @@ body {
} }
.timer-track { .timer-track {
fill: none; fill: none;
stroke: rgba(255,255,255,0.1); stroke: rgba(255, 255, 255, 0.1);
stroke-width: 6; stroke-width: 6;
} }
.timer-fill { .timer-fill {
@ -801,7 +837,9 @@ body {
stroke-linecap: round; stroke-linecap: round;
transform: rotate(-90deg); transform: rotate(-90deg);
transform-origin: center; transform-origin: center;
transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease; transition:
stroke-dashoffset 0.9s linear,
stroke 0.3s ease;
} }
#ready-timer-number { #ready-timer-number {
position: absolute; position: absolute;
@ -809,12 +847,12 @@ body {
font-size: 26px; font-size: 26px;
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.8); text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
} }
#ready-timer-sub { #ready-timer-sub {
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
font-size: 11px; font-size: 11px;
color: rgba(255,255,255,0.4); color: rgba(255, 255, 255, 0.4);
letter-spacing: 1px; letter-spacing: 1px;
text-align: center; text-align: center;
} }
@ -825,7 +863,7 @@ body {
.ready-pip { .ready-pip {
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
font-size: 12px; font-size: 12px;
color: rgba(255,255,255,0.5); color: rgba(255, 255, 255, 0.5);
letter-spacing: 1px; letter-spacing: 1px;
transition: color 0.3s; transition: color 0.3s;
} }
@ -835,8 +873,8 @@ body {
═══════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════ */
/* Linke Zone (Slots 1–3): Gold/Amber für Spieler 1 */ /* Linke Zone (Slots 1–3): Gold/Amber für Spieler 1 */
.board.my-side-left .card-row .card-slot:nth-child(-n+3), .board.my-side-left .card-row .card-slot:nth-child(-n + 3),
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3) { .board.my-side-right .card-row .card-slot:nth-last-child(-n + 3) {
border-color: rgba(200, 150, 42, 0.75); border-color: rgba(200, 150, 42, 0.75);
background: rgba(180, 120, 20, 0.18); background: rgba(180, 120, 20, 0.18);
box-shadow: box-shadow:
@ -846,8 +884,8 @@ body {
} }
/* Hover auf eigener Zone: stärker leuchten */ /* Hover auf eigener Zone: stärker leuchten */
.board.my-side-left .card-row .card-slot:nth-child(-n+3):hover, .board.my-side-left .card-row .card-slot:nth-child(-n + 3):hover,
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3):hover { .board.my-side-right .card-row .card-slot:nth-last-child(-n + 3):hover {
border-color: rgba(240, 190, 60, 1); border-color: rgba(240, 190, 60, 1);
background: rgba(200, 140, 30, 0.28); background: rgba(200, 140, 30, 0.28);
box-shadow: box-shadow:
@ -857,8 +895,8 @@ body {
} }
/* Zonen-Label oben im Slot (kleine Markierung) */ /* Zonen-Label oben im Slot (kleine Markierung) */
.board.my-side-left .card-row .card-slot:nth-child(-n+3)::after, .board.my-side-left .card-row .card-slot:nth-child(-n + 3)::after,
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3)::after { .board.my-side-right .card-row .card-slot:nth-last-child(-n + 3)::after {
content: "⚔"; content: "⚔";
position: absolute; position: absolute;
top: calc(var(--s) * 5); top: calc(var(--s) * 5);
@ -868,16 +906,16 @@ body {
} }
/* Gegner-Zone: dezentes Blau/Lila – nicht bespielbar */ /* Gegner-Zone: dezentes Blau/Lila – nicht bespielbar */
.board.my-side-left .card-row .card-slot:nth-last-child(-n+3), .board.my-side-left .card-row .card-slot:nth-last-child(-n + 3),
.board.my-side-right .card-row .card-slot:nth-child(-n+3) { .board.my-side-right .card-row .card-slot:nth-child(-n + 3) {
border-color: rgba(80, 130, 200, 0.45); border-color: rgba(80, 130, 200, 0.45);
background: rgba(40, 80, 160, 0.10); background: rgba(40, 80, 160, 0.1);
cursor: not-allowed; cursor: not-allowed;
opacity: 0.75; opacity: 0.75;
} }
.board.my-side-left .card-row .card-slot:nth-last-child(-n+3)::after, .board.my-side-left .card-row .card-slot:nth-last-child(-n + 3)::after,
.board.my-side-right .card-row .card-slot:nth-child(-n+3)::after { .board.my-side-right .card-row .card-slot:nth-child(-n + 3)::after {
content: "🛡"; content: "🛡";
position: absolute; position: absolute;
top: calc(var(--s) * 5); top: calc(var(--s) * 5);
@ -916,8 +954,13 @@ body {
} }
@keyframes pulse-zone { @keyframes pulse-zone {
0%, 100% { box-shadow: 0 0 8px rgba(240, 190, 60, 0.25); } 0%,
50% { box-shadow: 0 0 22px rgba(240, 190, 60, 0.55); } 100% {
box-shadow: 0 0 8px rgba(240, 190, 60, 0.25);
}
50% {
box-shadow: 0 0 22px rgba(240, 190, 60, 0.55);
}
} }
/* Hand-Slot nicht draggable (kein Cursor-Feedback) */ /* Hand-Slot nicht draggable (kein Cursor-Feedback) */