- Route GET /api/downloads/video/{task_id} pour streamer les videos
- Route POST /api/downloads/{task_id}/retry pour relancer les failed
- Route POST /api/downloads/cancel-all pour annuler tous les actifs
- Barre de progression animee (shimmer + pulse)
- Indicateurs visuels par status (bordures colorees)
- Bouton Retry pour telechargements echoues/annules
- Actions groupees (Nettoyer termines, Tout annuler)
- Compteur de telechargements actifs
- hx-on::after-request pour refresh auto
Closes #17, Closes #8
This commit is contained in:
@@ -646,3 +646,65 @@ h1 {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ==================== Download Items ==================== */
|
||||
.download-item {
|
||||
padding: 15px 18px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--card-radius);
|
||||
border-left: 4px solid var(--text-dim);
|
||||
margin-bottom: 10px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.download-item:hover {
|
||||
border-color: var(--primary);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.download-item.status-downloading {
|
||||
border-left-color: var(--primary);
|
||||
animation: pulse-border 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.download-item.status-completed {
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
|
||||
.download-item.status-failed,
|
||||
.download-item.status-cancelled {
|
||||
border-left-color: var(--danger);
|
||||
}
|
||||
|
||||
.download-item.status-paused {
|
||||
border-left-color: #f0a500;
|
||||
}
|
||||
|
||||
.download-item.status-pending {
|
||||
border-left-color: var(--text-dim);
|
||||
}
|
||||
|
||||
@keyframes pulse-border {
|
||||
0%, 100% { border-left-color: var(--primary); }
|
||||
50% { border-left-color: rgba(0, 217, 255, 0.3); }
|
||||
}
|
||||
|
||||
/* Progress bar shimmer */
|
||||
.download-item.status-downloading .progress-bar {
|
||||
background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Download action buttons */
|
||||
.download-actions .btn-icon.warning {
|
||||
color: #f0a500;
|
||||
}
|
||||
.download-actions .btn-icon.warning:hover {
|
||||
background: rgba(240, 165, 0, 0.2);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user