fixes
This commit is contained in:
Michal Vrba
@@ -190,6 +190,26 @@ body, html {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.player-slot.active-turn-slot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 140%;
|
||||
height: 140%;
|
||||
background: radial-gradient(ellipse at center, rgba(245, 176, 65, 0.28) 0%, rgba(245, 176, 65, 0.08) 55%, transparent 75%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
animation: aura-breathe 2.2s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
@keyframes aura-breathe {
|
||||
0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.6; }
|
||||
100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
|
||||
}
|
||||
|
||||
.slot-top {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
@@ -208,6 +228,22 @@ body, html {
|
||||
.slot-bottom {
|
||||
grid-row: 3;
|
||||
grid-column: 1 / span 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slot-bottom.active-turn-slot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 320px;
|
||||
height: 120px;
|
||||
background: radial-gradient(ellipse at center, rgba(245, 176, 65, 0.22) 0%, rgba(245, 176, 65, 0.05) 50%, transparent 75%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
animation: aura-breathe 2.2s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
.slot-center {
|
||||
@@ -219,6 +255,35 @@ body, html {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* TURN HEADER INFO */
|
||||
.turn-header-info {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: #a3b899;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.active-turn-header-player {
|
||||
color: var(--gold);
|
||||
font-weight: 900;
|
||||
text-shadow: 0 0 10px rgba(245, 176, 65, 0.8);
|
||||
background: rgba(245, 176, 65, 0.15);
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(245, 176, 65, 0.45);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
animation: header-pulse 1.8s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes header-pulse {
|
||||
0% { box-shadow: 0 0 4px rgba(245, 176, 65, 0.3); }
|
||||
100% { box-shadow: 0 0 16px rgba(245, 176, 65, 0.8); }
|
||||
}
|
||||
|
||||
/* AVATAR BADGE */
|
||||
.avatar-badge {
|
||||
position: relative;
|
||||
@@ -230,19 +295,92 @@ body, html {
|
||||
border-radius: 16px;
|
||||
padding: 6px 12px;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.avatar-badge.active-turn {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 20px rgba(245, 176, 65, 0.8), inset 0 0 10px rgba(245, 176, 65, 0.3);
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 0 25px rgba(245, 176, 65, 0.9), inset 0 0 12px rgba(245, 176, 65, 0.35);
|
||||
transform: scale(1.09);
|
||||
animation: turn-pulse 1.8s infinite;
|
||||
}
|
||||
|
||||
@keyframes turn-pulse {
|
||||
0%, 100% { box-shadow: 0 0 15px rgba(245, 176, 65, 0.7); }
|
||||
50% { box-shadow: 0 0 25px rgba(245, 176, 65, 1), 0 0 40px rgba(245, 176, 65, 0.5); }
|
||||
0%, 100% { box-shadow: 0 0 16px rgba(245, 176, 65, 0.7); }
|
||||
50% { box-shadow: 0 0 30px rgba(245, 176, 65, 1), 0 0 45px rgba(245, 176, 65, 0.55); }
|
||||
}
|
||||
|
||||
/* TURN INDICATOR BADGE (NA ŤAHU) */
|
||||
.turn-indicator-badge {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: linear-gradient(135deg, #ffd700, #f5b041);
|
||||
color: #11281d;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.8px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 215, 0, 0.8);
|
||||
border: 1.5px solid #ffffff;
|
||||
white-space: nowrap;
|
||||
z-index: 20;
|
||||
animation: turn-badge-float 1.8s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes turn-badge-float {
|
||||
0% { transform: translateX(-50%) translateY(0); }
|
||||
100% { transform: translateX(-50%) translateY(-3px); }
|
||||
}
|
||||
|
||||
.turn-indicator-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #0d3824;
|
||||
box-shadow: 0 0 4px #0d3824;
|
||||
animation: dot-blink 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes dot-blink {
|
||||
0% { opacity: 0.4; transform: scale(0.75); }
|
||||
100% { opacity: 1; transform: scale(1.25); }
|
||||
}
|
||||
|
||||
/* TURN ARRIVAL EFFECT */
|
||||
.turn-arrived-pulse {
|
||||
animation: turn-arrival 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
|
||||
}
|
||||
|
||||
@keyframes turn-arrival {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(1.18); box-shadow: 0 0 35px rgba(245, 176, 65, 1), 0 0 55px rgba(255, 215, 0, 0.8); }
|
||||
100% { transform: scale(1.09); }
|
||||
}
|
||||
|
||||
/* TURN TRANSFER ORB */
|
||||
.turn-transfer-orb {
|
||||
position: fixed;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 35%, #ffffff, #ffd700 45%, #ff8c00 85%, transparent);
|
||||
box-shadow: 0 0 18px rgba(255, 215, 0, 0.95), 0 0 36px rgba(245, 176, 65, 0.7);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
z-index: 998;
|
||||
filter: drop-shadow(0 0 10px rgba(245, 176, 65, 0.85));
|
||||
animation: orb-glow 0.38s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes orb-glow {
|
||||
0% { transform: translate(-50%, -50%) scale(0.9); }
|
||||
100% { transform: translate(-50%, -50%) scale(1.25); }
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
|
||||
Reference in New Issue
Block a user