root
3b142ca4c7
Build & Deploy / Build & Push Docker Image (push) Successful in 48s
Test / API Unit Tests (push) Successful in 9m48s
Test / Marketplace Unit Tests (push) Successful in 9m38s
Test / Admin Unit Tests (push) Successful in 9m33s
Build & Deploy / Deploy to VPS (push) Has been cancelled
Test / Dashboard Unit Tests (push) Has been cancelled
Test / API Integration Tests (push) Has been cancelled
Includes: - Admin dashboard layout and page updates - API account auth module (routes, schemas, service) - Dashboard sign-up form extraction, middleware refactor - Marketplace proxy and middleware updates - CORS origins expansion for dev environment - Seed email domain correction (.com → .ma) - Docs: create-account guide, fleet page, signup plan - Various UI component and layout refinements
395 lines
11 KiB
CSS
395 lines
11 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html.light {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root {
|
|
--primary: #2563eb;
|
|
--primary-hover: #1d4ed8;
|
|
--accent: #f97316;
|
|
--sidebar-bg: #0a1128;
|
|
--sidebar-text: #94a3b8;
|
|
--sidebar-active: #ffffff;
|
|
|
|
--bg-elevated: rgb(255 255 255 / 0.82);
|
|
--border-accent: rgb(231 229 228 / 0.8);
|
|
--glass-bg: rgb(255 255 255 / 0.72);
|
|
--shadow-card: 0 30px 80px rgba(28, 25, 23, 0.08);
|
|
--shadow-glow: 0 0 20px rgba(249, 115, 22, 0.15);
|
|
}
|
|
|
|
html.dark {
|
|
--bg-elevated: rgb(11 25 55 / 0.78);
|
|
--border-accent: rgb(30 60 140 / 0.40);
|
|
--glass-bg: rgb(11 25 55 / 0.65);
|
|
--shadow-card: 0 30px 80px rgba(0, 0, 0, 0.36);
|
|
--shadow-glow: 0 0 20px rgba(249, 115, 22, 0.25);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
@apply text-blue-950 antialiased transition-colors dark:text-slate-100;
|
|
background-image:
|
|
linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-semibold;
|
|
}
|
|
}
|
|
|
|
html.dark body {
|
|
background-image:
|
|
linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
|
|
}
|
|
|
|
@layer components {
|
|
.fleet-dashboard-shell {
|
|
--fleet-bg-primary: #f5f8ff;
|
|
--fleet-bg-elevated: #ffffff;
|
|
--fleet-glass-bg: rgb(255 255 255 / 0.82);
|
|
--fleet-card-bg: rgb(255 255 255 / 0.72);
|
|
--fleet-border-subtle: rgb(37 99 235 / 0.14);
|
|
--fleet-border-accent: rgb(249 115 22 / 0.30);
|
|
--fleet-text-primary: #172554;
|
|
--fleet-text-secondary: #64748b;
|
|
--fleet-accent-blue: #2563eb;
|
|
--fleet-accent-blue-light: #2563eb;
|
|
--fleet-accent-orange: #f97316;
|
|
--fleet-accent-orange-light: #ea580c;
|
|
--fleet-success: #059669;
|
|
--fleet-danger: #dc2626;
|
|
background:
|
|
radial-gradient(ellipse at 20% 20%, rgb(37 99 235 / 0.10) 0%, transparent 56%),
|
|
radial-gradient(ellipse at 82% 72%, rgb(249 115 22 / 0.08) 0%, transparent 54%),
|
|
linear-gradient(180deg, #ffffff 0%, #f5f8ff 35%, #edf4ff 100%);
|
|
color: var(--fleet-text-primary);
|
|
}
|
|
|
|
html.dark .fleet-dashboard-shell {
|
|
--fleet-bg-primary: #0a0f1a;
|
|
--fleet-bg-elevated: #111827;
|
|
--fleet-glass-bg: rgb(15 25 45 / 0.66);
|
|
--fleet-card-bg: rgb(30 58 95 / 0.28);
|
|
--fleet-border-subtle: rgb(59 130 246 / 0.14);
|
|
--fleet-text-primary: #e8edf5;
|
|
--fleet-text-secondary: #8899b4;
|
|
--fleet-accent-blue: #3b82f6;
|
|
--fleet-accent-blue-light: #60a5fa;
|
|
--fleet-accent-orange-light: #fb923c;
|
|
--fleet-success: #10b981;
|
|
--fleet-danger: #ef4444;
|
|
background:
|
|
radial-gradient(ellipse at 20% 20%, rgb(59 130 246 / 0.09) 0%, transparent 58%),
|
|
radial-gradient(ellipse at 82% 72%, rgb(249 115 22 / 0.08) 0%, transparent 56%),
|
|
linear-gradient(180deg, #0a0f1a 0%, #0d1728 46%, #08111f 100%);
|
|
}
|
|
|
|
.fleet-dashboard-shell * {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgb(59 130 246 / 0.22) transparent;
|
|
}
|
|
|
|
.fleet-dashboard-shell *::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.fleet-dashboard-shell *::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.fleet-dashboard-shell *::-webkit-scrollbar-thumb {
|
|
border-radius: 999px;
|
|
background: rgb(59 130 246 / 0.22);
|
|
}
|
|
|
|
.fleet-dashboard-shell .card,
|
|
.fleet-dashboard-shell .glass-card {
|
|
border-color: var(--fleet-border-subtle);
|
|
background: var(--fleet-glass-bg);
|
|
box-shadow: 0 18px 60px rgb(15 23 42 / 0.08);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
@apply rounded-xl border transition-colors;
|
|
}
|
|
|
|
.fleet-dashboard-shell .card:hover,
|
|
.fleet-dashboard-shell .glass-card:hover {
|
|
border-color: rgb(59 130 246 / 0.24);
|
|
box-shadow: 0 18px 60px rgb(15 23 42 / 0.10), 0 0 20px rgb(59 130 246 / 0.10);
|
|
}
|
|
|
|
html.dark .fleet-dashboard-shell .card,
|
|
html.dark .fleet-dashboard-shell .glass-card {
|
|
box-shadow: 0 18px 60px rgb(0 0 0 / 0.26);
|
|
}
|
|
|
|
html.dark .fleet-dashboard-shell .card:hover,
|
|
html.dark .fleet-dashboard-shell .glass-card:hover {
|
|
box-shadow: 0 18px 60px rgb(0 0 0 / 0.26), 0 0 20px rgb(59 130 246 / 0.12);
|
|
}
|
|
|
|
.fleet-dashboard-shell .btn-primary {
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 10px rgb(59 130 246 / 0.30);
|
|
@apply rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white hover:from-blue-400 hover:to-blue-600;
|
|
}
|
|
|
|
.fleet-dashboard-shell .btn-secondary {
|
|
border-color: rgb(59 130 246 / 0.18);
|
|
background: rgb(59 130 246 / 0.08);
|
|
color: var(--fleet-text-primary);
|
|
@apply rounded-lg hover:border-blue-400/40 hover:bg-blue-500/15 hover:text-white;
|
|
}
|
|
|
|
.fleet-dashboard-shell .input-field {
|
|
border-color: rgb(59 130 246 / 0.14);
|
|
background: rgb(59 130 246 / 0.07);
|
|
color: var(--fleet-text-primary);
|
|
@apply rounded-lg placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/20;
|
|
}
|
|
|
|
.fleet-dashboard-shell .progress-bar {
|
|
height: 6px;
|
|
background: rgb(59 130 246 / 0.12);
|
|
@apply rounded-full;
|
|
}
|
|
|
|
.fleet-dashboard-shell .progress-fill.blue {
|
|
@apply bg-gradient-to-r from-blue-500 to-blue-400;
|
|
}
|
|
|
|
.fleet-dashboard-shell .progress-fill.orange {
|
|
@apply bg-gradient-to-r from-orange-500 to-orange-600;
|
|
}
|
|
|
|
.fleet-dashboard-shell .badge-blue {
|
|
border: 1px solid rgb(59 130 246 / 0.30);
|
|
background: rgb(59 130 246 / 0.15);
|
|
color: var(--fleet-accent-blue-light);
|
|
}
|
|
|
|
.fleet-dashboard-shell .badge-amber {
|
|
border: 1px solid rgb(249 115 22 / 0.30);
|
|
background: rgb(249 115 22 / 0.15);
|
|
color: var(--fleet-accent-orange-light);
|
|
}
|
|
|
|
.fleet-dashboard-shell .badge-green {
|
|
border: 1px solid rgb(16 185 129 / 0.28);
|
|
background: rgb(16 185 129 / 0.13);
|
|
color: #047857;
|
|
}
|
|
|
|
.fleet-dashboard-shell .badge-red {
|
|
border: 1px solid rgb(239 68 68 / 0.30);
|
|
background: rgb(239 68 68 / 0.13);
|
|
color: #dc2626;
|
|
}
|
|
|
|
.fleet-dashboard-shell .badge-gray {
|
|
border: 1px solid rgb(148 163 184 / 0.20);
|
|
background: rgb(148 163 184 / 0.10);
|
|
color: #475569;
|
|
}
|
|
|
|
html.dark .fleet-dashboard-shell .badge-green {
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
html.dark .fleet-dashboard-shell .badge-red {
|
|
color: #fca5a5;
|
|
}
|
|
|
|
html.dark .fleet-dashboard-shell .badge-gray {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.glass-card {
|
|
border-color: var(--border-accent);
|
|
background-color: var(--glass-bg);
|
|
box-shadow: var(--shadow-card);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
@apply rounded-[1.75rem] border transition-colors;
|
|
}
|
|
|
|
html.dark .glass-card {
|
|
border-color: rgb(30 60 140 / 0.40);
|
|
background-color: rgb(11 25 55 / 0.65);
|
|
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
|
|
}
|
|
|
|
.progress-bar {
|
|
@apply h-2 w-full overflow-hidden rounded-full;
|
|
background-color: rgb(231 229 228 / 0.5);
|
|
}
|
|
|
|
html.dark .progress-bar {
|
|
background-color: rgb(30 60 140 / 0.3);
|
|
}
|
|
|
|
.progress-fill {
|
|
@apply h-full rounded-full transition-all duration-500;
|
|
}
|
|
|
|
.progress-fill.blue {
|
|
@apply bg-gradient-to-r from-blue-500 to-blue-400;
|
|
}
|
|
|
|
.progress-fill.orange {
|
|
@apply bg-gradient-to-r from-orange-500 to-orange-400;
|
|
}
|
|
|
|
html.dark .progress-fill.blue {
|
|
@apply bg-gradient-to-r from-blue-400 to-blue-300;
|
|
}
|
|
|
|
html.dark .progress-fill.orange {
|
|
@apply bg-gradient-to-r from-orange-400 to-orange-300;
|
|
}
|
|
|
|
/* Pulse glow animation for live indicators */
|
|
@keyframes pulse-glow {
|
|
0%, 100% { box-shadow: 0 0 4px rgba(249, 115, 22, 0.3); }
|
|
50% { box-shadow: 0 0 12px rgba(249, 115, 22, 0.6); }
|
|
}
|
|
|
|
.pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pulse-glow,
|
|
.progress-fill {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply inline-flex items-center gap-2 rounded-full bg-orange-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-orange-500 dark:hover:bg-orange-400;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center gap-2 rounded-full border border-stone-300 bg-white/85 px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/20 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply inline-flex items-center gap-2 rounded-full bg-red-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-red-700 disabled:opacity-50;
|
|
}
|
|
|
|
.input-field {
|
|
@apply w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-900 dark:bg-blue-950/50 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:ring-orange-400;
|
|
}
|
|
|
|
.card {
|
|
@apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
|
|
border-color: rgb(231 229 228 / 0.8);
|
|
background-color: rgb(255 255 255 / 0.82);
|
|
}
|
|
|
|
html.dark .card {
|
|
border-color: rgb(30 60 140 / 0.40);
|
|
background-color: rgb(11 25 55 / 0.72);
|
|
}
|
|
|
|
.badge-green {
|
|
@apply inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300;
|
|
}
|
|
|
|
.badge-blue {
|
|
@apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-950/40 dark:text-blue-300;
|
|
}
|
|
|
|
.badge-amber {
|
|
@apply inline-flex items-center rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/40 dark:text-orange-300;
|
|
}
|
|
|
|
.badge-red {
|
|
@apply inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-950/40 dark:text-red-300;
|
|
}
|
|
|
|
.badge-gray {
|
|
@apply inline-flex items-center rounded-full bg-stone-100 px-2.5 py-0.5 text-xs font-medium text-stone-600 dark:bg-blue-950/40 dark:text-slate-300;
|
|
}
|
|
|
|
.badge-purple {
|
|
@apply inline-flex items-center rounded-full bg-teal-100 px-2.5 py-0.5 text-xs font-medium text-teal-700 dark:bg-teal-950/40 dark:text-teal-300;
|
|
}
|
|
|
|
.badge-indigo {
|
|
@apply inline-flex items-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 10mm 12mm;
|
|
}
|
|
* {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.dark .bg-slate-50 {
|
|
background-color: rgb(7 16 46);
|
|
}
|
|
|
|
.dark .bg-white {
|
|
background-color: rgb(11 25 55);
|
|
}
|
|
|
|
.dark .bg-white\/90 {
|
|
background-color: rgb(11 25 55 / 0.9);
|
|
}
|
|
|
|
.dark .border-slate-200,
|
|
.dark .border-stone-200 {
|
|
border-color: rgb(30 60 140 / 0.50);
|
|
}
|
|
|
|
.dark .text-slate-900 {
|
|
color: rgb(241 245 249);
|
|
}
|
|
|
|
.dark .text-slate-700 {
|
|
color: rgb(203 213 225);
|
|
}
|
|
|
|
.dark .text-slate-600,
|
|
.dark .text-stone-500 {
|
|
color: rgb(148 163 184);
|
|
}
|
|
|
|
.dark .text-slate-500,
|
|
.dark .text-slate-400,
|
|
.dark .text-stone-400 {
|
|
color: rgb(100 116 139);
|
|
}
|
|
|
|
.dark .hover\:bg-slate-100:hover {
|
|
background-color: rgb(20 42 90);
|
|
}
|
|
|
|
.dark .hover\:text-slate-900:hover {
|
|
color: rgb(241 245 249);
|
|
}
|
|
}
|