julienfroidefond/stripstream-librarian
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Lazy loading images + dark mode job highlight

Browse Source 
- Ajout loading='lazy' sur les couvertures de livres (BookCard + detail)
- Correction couleur job-highlighted en dark mode (fond bleu foncé)
- Animation pulse adaptée pour le dark mode
This commit is contained in:
Julien Froidefond
2026-03-06 12:11:53 +01:00
parent c5b9883878
commit c2f1c7732e
3 changed files with 47 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/backoffice/app/globals.css
View File

@@ -234,10 +234,10 @@ button:hover {
border-color: hsl(280 60% 45% / 0.5);
}
.status-pending { color: hsl(45 93% 47%); }
.status-running { color: hsl(192 85% 55%); }
.status-completed { color: hsl(142 60% 45%); }
.status-failed { color: hsl(2 72% 48%); }
.status-pending { color: hsl(45 93% 35%); }
.status-running { color: hsl(198 78% 37%); font-weight: 700; }
.status-completed { color: hsl(142 60% 35%); }
.status-failed { color: hsl(2 72% 45%); }
.status-cancelled { color: hsl(220 13% 40%); }
.error-hint {
@@ -1111,6 +1111,32 @@ button:hover {
color: hsl(198 78% 75%);
}
/* Dark mode status colors for job list - couleurs plus soutenues */
.dark .status-running {
color: hsl(192 85% 55%);
font-weight: 700;
text-shadow: 0 0 10px hsl(192 85% 55% / 0.3);
}
.dark .status-pending {
color: hsl(45 100% 55%);
font-weight: 600;
}
.dark .status-completed {
color: hsl(142 70% 55%);
font-weight: 600;
}
.dark .status-failed {
color: hsl(2 80% 60%);
font-weight: 600;
}
.dark .status-cancelled {
color: hsl(220 20% 65%);
}
/* Progress bar visibility fix */
.job-progress {
background: var(--card);
@@ -1172,6 +1198,21 @@ tr.job-highlighted td {
50% { box-shadow: inset 0 0 0 2px hsl(198 78% 37% / 0.6); }
}
/* Dark mode for highlighted job row */
.dark tr.job-highlighted {
background: hsl(198 52% 20%);
box-shadow: inset 0 0 0 2px hsl(198 78% 50%);
}
.dark tr.job-highlighted td {
animation: pulse-border-dark 2s ease-in-out infinite;
}
@keyframes pulse-border-dark {
0%, 100% { box-shadow: inset 0 0 0 1px hsl(198 78% 50% / 0.3); }
50% { box-shadow: inset 0 0 0 2px hsl(198 78% 50% / 0.6); }
}
/* Monitoring styles */
.monitoring-cell {
display: flex;