melabidi/carmanagement
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

unfied style

Browse Source
This commit is contained in:
root
2026-05-23 04:35:47 -04:00
parent fd10d0db6a
commit 07fba16ff2
57 changed files with 565 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/app/globals.css
+72 -22
View File
@@ -25,7 +25,9 @@ html.dark {
}
body {
@apply bg-slate-50 text-slate-900 antialiased transition-colors dark:bg-slate-950 dark:text-slate-100;
@apply text-stone-900 antialiased transition-colors dark:text-stone-100;
background-image:
linear-gradient(180deg, #f8f5ef 0%, #f4efe6 28%, #fffdf8 58%, #ffffff 100%);
}
h1, h2, h3, h4, h5, h6 {
@@ -33,49 +35,61 @@ html.dark {
}
}
html.dark body {
background-image:
linear-gradient(180deg, #14110f 0%, #17120d 35%, #0c0a09 100%);
}
@layer components {
.btn-primary {
@apply inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
@apply inline-flex items-center gap-2 rounded-full bg-stone-950 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300;
}
.btn-secondary {
@apply inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800;
@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-stone-950 hover:text-stone-950 dark:border-stone-700 dark:bg-stone-950/30 dark:text-stone-200 dark:hover:border-stone-200 dark:hover:text-white;
}
.btn-danger {
@apply inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50;
@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-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 transition-colors placeholder:text-slate-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500;
@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-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100 dark:placeholder:text-stone-500;
}
.card {
@apply rounded-xl border border-slate-200 bg-white shadow-sm transition-colors dark:border-slate-800 dark:bg-slate-900;
@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.26)];
border-color: rgb(231 229 228 / 0.8);
background-color: rgb(255 255 255 / 0.82);
}
html.dark .card {
border-color: rgb(41 37 36 / 0.96);
background-color: rgb(28 25 23 / 0.72);
}
.badge-green {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700;
@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 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700;
@apply inline-flex items-center rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-950/40 dark:text-amber-300;
}
.badge-amber {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700;
@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 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700;
@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 px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600;
@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-stone-800 dark:text-stone-300;
}
.badge-purple {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700;
@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;
}
}
@@ -92,46 +106,82 @@ html.dark {
@layer utilities {
.dark .bg-slate-50 {
background-color: rgb(2 6 23);
background-color: rgb(12 10 9);
}
.dark .bg-white {
background-color: rgb(15 23 42);
background-color: rgb(28 25 23);
}
.dark .bg-white\/90 {
background-color: rgb(15 23 42 / 0.9);
background-color: rgb(28 25 23 / 0.9);
}
.dark .border-slate-200,
.dark .border-stone-200 {
border-color: rgb(30 41 59);
border-color: rgb(41 37 36);
}
.dark .text-slate-900 {
color: rgb(241 245 249);
color: rgb(250 250 249);
}
.dark .text-slate-700 {
color: rgb(203 213 225);
color: rgb(231 229 228);
}
.dark .text-slate-600,
.dark .text-stone-500 {
color: rgb(148 163 184);
color: rgb(168 162 158);
}
.dark .text-slate-500,
.dark .text-slate-400,
.dark .text-stone-400 {
color: rgb(100 116 139);
color: rgb(120 113 108);
}
.dark .hover\:bg-slate-100:hover {
background-color: rgb(30 41 59);
background-color: rgb(41 37 36);
}
.dark .hover\:text-slate-900:hover {
color: rgb(248 250 252);
color: rgb(250 250 249);
}
.bg-blue-600 {
background-color: rgb(217 119 6);
}
.hover\:bg-blue-700:hover {
background-color: rgb(180 83 9);
}
.bg-blue-500 {
background-color: rgb(245 158 11);
}
.bg-blue-50 {
background-color: rgb(255 251 235);
}
.text-blue-600 {
color: rgb(180 83 9);
}
.text-blue-800 {
color: rgb(154 52 18);
}
.border-blue-200 {
border-color: rgb(253 230 138);
}
.ring-blue-400 {
--tw-ring-color: rgb(251 191 36 / 0.6);
}
.focus\:ring-blue-500:focus {
--tw-ring-color: rgb(217 119 6 / 0.45);
}
}