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

update style

Browse Source
This commit is contained in:
root
2026-05-24 01:53:27 -04:00
parent f5292f8b6c
commit 31e06a1d61
62 changed files with 431 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/app/globals.css
+23 -59
View File
@@ -13,8 +13,8 @@ html.dark {
:root {
--primary: #2563eb;
--primary-hover: #1d4ed8;
--accent: #f59e0b;
--sidebar-bg: #0f172a;
--accent: #f97316;
--sidebar-bg: #0a1128;
--sidebar-text: #94a3b8;
--sidebar-active: #ffffff;
}
@@ -25,9 +25,9 @@ html.dark {
}
body {
@apply text-stone-900 antialiased transition-colors dark:text-stone-100;
@apply text-blue-950 antialiased transition-colors dark:text-slate-100;
background-image:
linear-gradient(180deg, #f8f5ef 0%, #f4efe6 28%, #fffdf8 58%, #ffffff 100%);
linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
}
h1, h2, h3, h4, h5, h6 {
@@ -37,16 +37,16 @@ html.dark {
html.dark body {
background-image:
linear-gradient(180deg, #14110f 0%, #17120d 35%, #0c0a09 100%);
linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
}
@layer components {
.btn-primary {
@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;
@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-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;
@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 {
@@ -54,18 +54,18 @@ html.dark body {
}
.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-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100 dark:placeholder:text-stone-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-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.26)];
@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(41 37 36 / 0.96);
background-color: rgb(28 25 23 / 0.72);
border-color: rgb(30 60 140 / 0.40);
background-color: rgb(11 25 55 / 0.72);
}
.badge-green {
@@ -73,7 +73,7 @@ html.dark body {
}
.badge-blue {
@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;
@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 {
@@ -85,7 +85,7 @@ html.dark body {
}
.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-stone-800 dark:text-stone-300;
@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 {
@@ -106,82 +106,46 @@ html.dark body {
@layer utilities {
.dark .bg-slate-50 {
background-color: rgb(12 10 9);
background-color: rgb(7 16 46);
}
.dark .bg-white {
background-color: rgb(28 25 23);
background-color: rgb(11 25 55);
}
.dark .bg-white\/90 {
background-color: rgb(28 25 23 / 0.9);
background-color: rgb(11 25 55 / 0.9);
}
.dark .border-slate-200,
.dark .border-stone-200 {
border-color: rgb(41 37 36);
border-color: rgb(30 60 140 / 0.50);
}
.dark .text-slate-900 {
color: rgb(250 250 249);
color: rgb(241 245 249);
}
.dark .text-slate-700 {
color: rgb(231 229 228);
color: rgb(203 213 225);
}
.dark .text-slate-600,
.dark .text-stone-500 {
color: rgb(168 162 158);
color: rgb(148 163 184);
}
.dark .text-slate-500,
.dark .text-slate-400,
.dark .text-stone-400 {
color: rgb(120 113 108);
color: rgb(100 116 139);
}
.dark .hover\:bg-slate-100:hover {
background-color: rgb(41 37 36);
background-color: rgb(20 42 90);
}
.dark .hover\:text-slate-900:hover {
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);
color: rgb(241 245 249);
}
}