julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: light mode : review some styles

Browse Source
This commit is contained in:
Julien Froidefond
2025-09-23 21:36:50 +02:00
parent fd3827214f
commit 34b9aff6e7
5 changed files with 160 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/app/globals.css
View File

@@ -69,6 +69,92 @@ body {
background: var(--primary);
}
/* Outline card styles pour meilleure lisibilité */
.outline-card-blue {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--primary);
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.outline-card-green {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--success);
background-color: color-mix(in srgb, var(--success) 8%, transparent);
border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}
.outline-card-orange {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 8%, transparent);
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.outline-card-red {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--destructive);
background-color: color-mix(in srgb, var(--destructive) 8%, transparent);
border-color: color-mix(in srgb, var(--destructive) 25%, var(--border));
}
.outline-card-purple {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #8b5cf6; /* purple-500 */
background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
}
.outline-card-yellow {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #eab308; /* yellow-500 */
background-color: color-mix(in srgb, #eab308 8%, transparent);
border-color: color-mix(in srgb, #eab308 25%, var(--border));
}
.outline-card-gray {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--muted-foreground);
background-color: color-mix(in srgb, var(--muted) 8%, transparent);
border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
}
/* Variantes pour les métriques (padding plus large) */
.outline-metric-blue {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--primary);
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.outline-metric-green {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--success);
background-color: color-mix(in srgb, var(--success) 8%, transparent);
border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}
.outline-metric-orange {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 8%, transparent);
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.outline-metric-purple {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #8b5cf6; /* purple-500 */
background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
}
.outline-metric-gray {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--muted-foreground);
background-color: color-mix(in srgb, var(--muted) 8%, transparent);
border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
}
/* Animations tech */
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.3); }