140 lines
3.2 KiB
CSS
140 lines
3.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply px-4 py-2 rounded-lg font-medium transition-all duration-200
|
|
focus:outline-none focus:ring-2 focus:ring-offset-2
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply btn bg-primary-600 text-white hover:bg-primary-700
|
|
focus:ring-primary-500 shadow-md hover:shadow-lg;
|
|
}
|
|
|
|
.btn-success {
|
|
@apply btn bg-success-600 text-white hover:bg-success-700
|
|
focus:ring-success-500 shadow-md hover:shadow-lg;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply btn bg-danger-600 text-white hover:bg-danger-700
|
|
focus:ring-danger-500 shadow-md hover:shadow-lg;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply btn bg-slate-200 text-slate-700 hover:bg-slate-300
|
|
focus:ring-slate-400 shadow-sm;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply px-3 py-1.5 text-sm;
|
|
}
|
|
|
|
.btn-icon {
|
|
@apply p-2 rounded-lg transition-all duration-200
|
|
hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary-500;
|
|
}
|
|
|
|
.input {
|
|
@apply w-full px-3 py-2 border border-slate-300 rounded-lg
|
|
focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
|
|
transition-all duration-200
|
|
placeholder:text-slate-400;
|
|
}
|
|
|
|
.input-focused {
|
|
@apply ring-2 ring-primary-500 border-transparent bg-primary-50;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-white rounded-xl shadow-lg border border-slate-200
|
|
overflow-hidden transition-all duration-300;
|
|
}
|
|
|
|
.card-header {
|
|
@apply px-4 py-3 border-b border-slate-200 bg-slate-50;
|
|
}
|
|
|
|
.card-body {
|
|
@apply p-4;
|
|
}
|
|
|
|
.select {
|
|
@apply w-full px-3 py-2 border border-slate-300 rounded-lg
|
|
focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
|
|
bg-white cursor-pointer transition-all duration-200;
|
|
}
|
|
|
|
.tab {
|
|
@apply px-4 py-2 text-sm font-medium rounded-t-lg
|
|
transition-all duration-200 border-b-2 border-transparent
|
|
hover:bg-slate-100 cursor-pointer;
|
|
}
|
|
|
|
.tab-active {
|
|
@apply tab bg-white border-primary-500 text-primary-600;
|
|
}
|
|
|
|
.tab-inactive {
|
|
@apply tab text-slate-600;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply badge bg-warning-100 text-warning-800;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply badge bg-success-100 text-success-800;
|
|
}
|
|
|
|
.badge-danger {
|
|
@apply badge bg-danger-100 text-danger-800;
|
|
}
|
|
|
|
.label {
|
|
@apply block text-sm font-medium text-slate-700 mb-1;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #cbd5e1 transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: #cbd5e1;
|
|
border-radius: 3px;
|
|
}
|
|
}
|