107 lines
3.3 KiB
CSS
107 lines
3.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
@apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-1;
|
|
}
|
|
.btn-primary {
|
|
@apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm;
|
|
}
|
|
.btn-secondary {
|
|
@apply btn bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 focus:ring-slate-300 shadow-sm;
|
|
}
|
|
.btn-danger {
|
|
@apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-sm;
|
|
}
|
|
.btn-success {
|
|
@apply btn bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500 shadow-sm;
|
|
}
|
|
.btn-warning {
|
|
@apply btn bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-400 shadow-sm;
|
|
}
|
|
.btn-sm {
|
|
@apply px-3 py-1.5 text-xs;
|
|
}
|
|
|
|
/* ── Cards ── */
|
|
.card {
|
|
@apply bg-white rounded-2xl shadow-sm border border-slate-200;
|
|
}
|
|
.card-header {
|
|
@apply px-6 py-4 border-b border-slate-100 flex items-center justify-between;
|
|
}
|
|
.card-body {
|
|
@apply p-6;
|
|
}
|
|
|
|
/* ── Form controls ── */
|
|
.form-label {
|
|
@apply block text-sm font-medium text-slate-700 mb-1.5;
|
|
}
|
|
.form-input {
|
|
@apply w-full border border-slate-300 rounded-lg px-3 py-2 text-sm text-slate-800
|
|
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
|
placeholder-slate-400 bg-white transition;
|
|
}
|
|
.form-select {
|
|
@apply form-input cursor-pointer;
|
|
}
|
|
.form-textarea {
|
|
@apply form-input resize-none;
|
|
}
|
|
.form-input-error {
|
|
@apply border-red-400 focus:ring-red-400 focus:border-red-400;
|
|
}
|
|
|
|
/* ── Tables ── */
|
|
.table-wrapper {
|
|
@apply bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden;
|
|
}
|
|
.table-base {
|
|
@apply min-w-full divide-y divide-slate-100 text-sm;
|
|
}
|
|
.table-base thead {
|
|
@apply bg-slate-50;
|
|
}
|
|
.table-base th {
|
|
@apply px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider;
|
|
}
|
|
.table-base td {
|
|
@apply px-5 py-3.5 text-slate-700;
|
|
}
|
|
.table-base tbody tr {
|
|
@apply hover:bg-slate-50 transition-colors;
|
|
}
|
|
|
|
/* ── Badges ── */
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
|
|
}
|
|
.badge-green { @apply badge bg-emerald-100 text-emerald-700; }
|
|
.badge-red { @apply badge bg-red-100 text-red-700; }
|
|
.badge-yellow { @apply badge bg-amber-100 text-amber-700; }
|
|
.badge-blue { @apply badge bg-blue-100 text-blue-700; }
|
|
.badge-gray { @apply badge bg-slate-100 text-slate-600; }
|
|
.badge-violet { @apply badge bg-violet-100 text-violet-700; }
|
|
.badge-orange { @apply badge bg-orange-100 text-orange-700; }
|
|
|
|
/* ── Page header ── */
|
|
.page-header {
|
|
@apply flex items-center justify-between mb-6;
|
|
}
|
|
.page-title {
|
|
@apply text-xl font-bold text-slate-800;
|
|
}
|
|
.page-subtitle {
|
|
@apply text-sm text-slate-500 mt-0.5;
|
|
}
|
|
|
|
/* ── Section heading ── */
|
|
.section-title {
|
|
@apply text-base font-semibold text-slate-700 mb-4;
|
|
}
|
|
}
|