Migliora badge stato aste: nuovi colori, icone, animazioni
Rivisti i metodi di calcolo e visualizzazione dello stato delle aste in Index.razor.cs, distinguendo tra stati di sistema e controllati dall’utente. Aggiunte nuove classi CSS e animazioni in modern-pages.css per badge più chiari, compatti e animati. Mantenuta compatibilità con classi Bootstrap legacy. Migliorata la leggibilità e l’usabilità della tabella aste.
This commit is contained in:
@@ -458,3 +458,174 @@
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* === AUCTION MONITOR STATUS BADGES === */
|
||||
|
||||
/* Base badge styling for auction status - COMPACT */
|
||||
.col-stato .badge {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.45rem;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
min-width: 65px;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Icon inside badge - smaller */
|
||||
.col-stato .badge i {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* === USER-CONTROLLED STATES === */
|
||||
|
||||
/* Active - Monitoring enabled, bright green */
|
||||
.col-stato .badge.status-active {
|
||||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
color: white;
|
||||
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Paused by user - Orange */
|
||||
.col-stato .badge.status-paused {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
color: #1a1a1a;
|
||||
box-shadow: 0 0 6px rgba(245, 158, 11, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Stopped by user - Gray */
|
||||
.col-stato .badge.status-stopped {
|
||||
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
|
||||
color: #e5e5e5;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Attacking/Bidding - Electric blue with glow */
|
||||
.col-stato .badge.status-attacking {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
box-shadow: 0 0 12px rgba(59, 130, 246, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* === AUCTION LIFECYCLE STATES === */
|
||||
|
||||
/* Won - Gold/Yellow celebration */
|
||||
.col-stato .badge.status-won {
|
||||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||||
color: #1a1a1a;
|
||||
box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Lost - Red muted */
|
||||
.col-stato .badge.status-lost {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
color: white;
|
||||
box-shadow: 0 0 6px rgba(239, 68, 68, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Closed - Dark gray */
|
||||
.col-stato .badge.status-closed {
|
||||
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
|
||||
color: #9ca3af;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* System Paused (night pause) - Purple/Indigo */
|
||||
.col-stato .badge.status-system-paused {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
|
||||
color: white;
|
||||
box-shadow: 0 0 6px rgba(139, 92, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Pending/Waiting - Cyan */
|
||||
.col-stato .badge.status-pending {
|
||||
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
|
||||
color: white;
|
||||
box-shadow: 0 0 6px rgba(6, 182, 212, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Scheduled - Teal */
|
||||
.col-stato .badge.status-scheduled {
|
||||
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
|
||||
color: white;
|
||||
box-shadow: 0 0 6px rgba(20, 184, 166, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* === ANIMATIONS === */
|
||||
|
||||
/* Active pulse - subtle */
|
||||
.col-stato .badge.status-anim-active {
|
||||
animation: statusPulseActive 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes statusPulseActive {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 14px rgba(34, 197, 94, 0.7), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Paused blink */
|
||||
.col-stato .badge.status-anim-paused {
|
||||
animation: statusBlink 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes statusBlink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.65; }
|
||||
}
|
||||
|
||||
/* Attacking - fast pulse */
|
||||
.col-stato .badge.status-anim-attacking {
|
||||
animation: statusAttacking 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes statusAttacking {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 12px rgba(59, 130, 246, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.9), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
/* Won celebration */
|
||||
.col-stato .badge.status-anim-won {
|
||||
animation: statusWon 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes statusWon {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(251, 191, 36, 0.9), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Legacy Bootstrap classes override for backward compatibility */
|
||||
.col-stato .badge.bg-success {
|
||||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.col-stato .badge.bg-warning {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
|
||||
color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.col-stato .badge.bg-secondary {
|
||||
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
|
||||
color: #e5e5e5 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user