improvements
This commit is contained in:
Michal Vrba
@@ -156,6 +156,26 @@ body, html {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.btn-speed-control {
|
||||
width: auto !important;
|
||||
min-width: 60px;
|
||||
padding: 0 10px;
|
||||
border-radius: 20px !important;
|
||||
font-size: 0.8rem !important;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.3px;
|
||||
background: rgba(245, 176, 65, 0.15) !important;
|
||||
border-color: rgba(245, 176, 65, 0.45) !important;
|
||||
color: var(--gold) !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-speed-control:hover {
|
||||
background: rgba(245, 176, 65, 0.35) !important;
|
||||
border-color: var(--gold) !important;
|
||||
box-shadow: 0 0 10px rgba(245, 176, 65, 0.4);
|
||||
}
|
||||
|
||||
/* TABLE FELT & SLOTS */
|
||||
.poker-table-surface {
|
||||
flex: 1;
|
||||
@@ -405,14 +425,229 @@ body, html {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* FROZEN / ICE STATUS STYLES */
|
||||
.avatar-badge.is-frozen,
|
||||
.avatar-badge.is-skipped {
|
||||
border-color: var(--ice-blue);
|
||||
box-shadow: 0 0 15px var(--ice-blue);
|
||||
background: linear-gradient(135deg, rgba(0, 229, 255, 0.45) 0%, rgba(255, 255, 255, 0.25) 45%, rgba(0, 150, 255, 0.4) 100%) !important;
|
||||
border-color: #00e5ff !important;
|
||||
box-shadow: 0 0 26px rgba(0, 229, 255, 0.95), inset 0 0 16px rgba(255, 255, 255, 0.7) !important;
|
||||
backdrop-filter: blur(8px) brightness(1.25) !important;
|
||||
transform: scale(1.08);
|
||||
overflow: visible;
|
||||
animation: freeze-pulse 2s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
@keyframes freeze-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 18px rgba(0, 229, 255, 0.75), inset 0 0 12px rgba(255, 255, 255, 0.45);
|
||||
border-color: #00e5ff;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 35px rgba(0, 229, 255, 1), 0 0 55px rgba(0, 229, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.85);
|
||||
border-color: #e0ffff;
|
||||
}
|
||||
}
|
||||
|
||||
/* FROZEN ICE AURA (SLOT) */
|
||||
.player-slot.frozen-slot::before,
|
||||
.slot-bottom.frozen-slot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.38) 0%, rgba(0, 229, 255, 0.12) 50%, transparent 75%) !important;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
animation: ice-mist 2.4s infinite ease-in-out alternate !important;
|
||||
}
|
||||
|
||||
@keyframes ice-mist {
|
||||
0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.7; }
|
||||
100% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.6)); }
|
||||
}
|
||||
|
||||
/* FROZEN BADGE (ZMRAZENÝ) */
|
||||
.frozen-indicator-badge {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: linear-gradient(135deg, #00e5ff, #80d8ff, #ffffff);
|
||||
color: #003040;
|
||||
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 18px rgba(0, 229, 255, 0.9);
|
||||
border: 1.5px solid #ffffff;
|
||||
white-space: nowrap;
|
||||
z-index: 25;
|
||||
animation: frozen-badge-float 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes frozen-badge-float {
|
||||
0% { transform: translateX(-50%) translateY(0); }
|
||||
100% { transform: translateX(-50%) translateY(-3px); }
|
||||
}
|
||||
|
||||
.frozen-indicator-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #00b0ff;
|
||||
box-shadow: 0 0 6px #00e5ff;
|
||||
animation: dot-blink 0.8s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* ICICLES HANGING UNDER FROZEN BADGE */
|
||||
.icicles-row {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
height: 12px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
pointer-events: none;
|
||||
z-index: 22;
|
||||
}
|
||||
|
||||
.icicle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 3.5px solid transparent;
|
||||
border-right: 3.5px solid transparent;
|
||||
border-top: 9px solid rgba(224, 247, 250, 0.92);
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 229, 255, 0.85));
|
||||
}
|
||||
|
||||
.icicle:nth-child(even) {
|
||||
border-top-width: 13px;
|
||||
border-left-width: 4.5px;
|
||||
border-right-width: 4.5px;
|
||||
}
|
||||
|
||||
.icicle:nth-child(3n) {
|
||||
border-top-width: 7px;
|
||||
border-left-width: 2.5px;
|
||||
border-right-width: 2.5px;
|
||||
}
|
||||
|
||||
/* DISCARD PILE ACE FREEZE BADGE */
|
||||
.ace-freeze-badge {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, #00e5ff, #0091ea, #00b0ff);
|
||||
color: #ffffff;
|
||||
font-weight: 900;
|
||||
font-size: 0.82rem;
|
||||
padding: 3px 12px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 22px rgba(0, 229, 255, 0.95), 0 4px 12px rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid #ffffff;
|
||||
white-space: nowrap;
|
||||
z-index: 25;
|
||||
animation: ace-freeze-pulse 1.6s infinite alternate;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
@keyframes ace-freeze-pulse {
|
||||
0% { transform: translateX(-50%) scale(0.95); box-shadow: 0 0 16px rgba(0, 229, 255, 0.75); }
|
||||
100% { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 32px rgba(0, 229, 255, 1); }
|
||||
}
|
||||
|
||||
/* DISCARD PILE GREEN WILDCARD BADGE */
|
||||
.green-wildcard-badge {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, #1b4332, #2d6a4f, #52b788);
|
||||
color: #ffffff;
|
||||
font-weight: 900;
|
||||
font-size: 0.82rem;
|
||||
padding: 3px 12px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 20px rgba(82, 183, 136, 0.9), 0 4px 12px rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid #b7e4c7;
|
||||
white-space: nowrap;
|
||||
z-index: 25;
|
||||
animation: green-wildcard-pulse 1.6s infinite alternate;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
@keyframes green-wildcard-pulse {
|
||||
0% { transform: translateX(-50%) scale(0.95); box-shadow: 0 0 14px rgba(82, 183, 136, 0.7); }
|
||||
100% { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 28px rgba(82, 183, 136, 1); }
|
||||
}
|
||||
|
||||
.avatar-badge.is-finished {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(0.5);
|
||||
opacity: 0.65;
|
||||
filter: grayscale(0.4);
|
||||
}
|
||||
|
||||
.avatar-badge.can-be-revived {
|
||||
opacity: 0.95 !important;
|
||||
filter: none !important;
|
||||
border-color: #ff1744 !important;
|
||||
box-shadow: 0 0 20px rgba(255, 23, 68, 0.7), inset 0 0 10px rgba(255, 23, 68, 0.3) !important;
|
||||
animation: revive-target-pulse 1.4s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes revive-target-pulse {
|
||||
0% { box-shadow: 0 0 12px rgba(255, 23, 68, 0.5); }
|
||||
100% { box-shadow: 0 0 24px rgba(255, 23, 68, 0.95), 0 0 35px rgba(255, 82, 82, 0.4); }
|
||||
}
|
||||
|
||||
/* REVIVE COUNTDOWN BADGE */
|
||||
.revive-countdown-badge {
|
||||
position: absolute;
|
||||
bottom: -13px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, #b71c1c, #d50000, #ff1744);
|
||||
color: #ffffff;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 14px rgba(255, 23, 68, 0.85), 0 2px 6px rgba(0, 0, 0, 0.6);
|
||||
border: 1.5px solid #ff8a80;
|
||||
white-space: nowrap;
|
||||
z-index: 25;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
animation: heartbeat-glow 1.2s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
@keyframes heartbeat-glow {
|
||||
0% { transform: translateX(-50%) scale(0.96); box-shadow: 0 0 8px rgba(255, 23, 68, 0.6); }
|
||||
100% { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 18px rgba(255, 23, 68, 1); }
|
||||
}
|
||||
|
||||
.heartbeat-icon {
|
||||
display: inline-block;
|
||||
animation: heart-beat 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes heart-beat {
|
||||
0% { transform: scale(1); }
|
||||
15% { transform: scale(1.35); }
|
||||
30% { transform: scale(1); }
|
||||
45% { transform: scale(1.25); }
|
||||
60% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.badge-finished-pos {
|
||||
|
||||
Reference in New Issue
Block a user