root
127 lines
3.2 KiB
CSS
127 lines
3.2 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: #f59e0b;
|
|
--sidebar-bg: #0f172a;
|
|
--sidebar-text: #94a3b8;
|
|
--sidebar-active: #ffffff;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
@apply bg-slate-50 text-slate-900 antialiased transition-colors dark:bg-slate-950 dark:text-slate-100;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-semibold;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.card {
|
|
@apply rounded-xl border border-slate-200 bg-white shadow-sm transition-colors dark:border-slate-800 dark:bg-slate-900;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.dark .bg-slate-50 {
|
|
background-color: rgb(2 6 23);
|
|
}
|
|
|
|
.dark .bg-white {
|
|
background-color: rgb(15 23 42);
|
|
}
|
|
|
|
.dark .bg-white\/90 {
|
|
background-color: rgb(15 23 42 / 0.9);
|
|
}
|
|
|
|
.dark .border-slate-200,
|
|
.dark .border-stone-200 {
|
|
border-color: rgb(30 41 59);
|
|
}
|
|
|
|
.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(30 41 59);
|
|
}
|
|
|
|
.dark .hover\:text-slate-900:hover {
|
|
color: rgb(248 250 252);
|
|
}
|
|
}
|