Files
Verde-Web/resources/css/app.css
2026-06-29 12:09:23 +08:00

130 lines
3.8 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
@apply bg-neutral-50 text-neutral-900;
}
}
@layer components {
.btn-primary {
@apply inline-flex items-center justify-center rounded-md bg-verde-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-verde-700 focus:outline-none focus:ring-2 focus:ring-verde-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60;
}
.btn-ghost {
@apply inline-flex items-center justify-center rounded-md border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-verde-500 focus:ring-offset-2;
}
.btn-danger {
@apply inline-flex items-center justify-center rounded-md bg-red-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
}
.form-input,
.form-select,
.form-textarea {
@apply block w-full rounded-md border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 shadow-sm transition placeholder:text-neutral-400 focus:border-verde-500 focus:outline-none focus:ring-1 focus:ring-verde-500;
}
.form-label {
@apply mb-1.5 block text-sm font-medium text-neutral-700;
}
.card {
@apply rounded-lg border border-neutral-200 bg-white;
}
.card-padded {
@apply card p-6;
}
.table-wrap {
@apply overflow-hidden rounded-lg border border-neutral-200 bg-white;
}
.table {
@apply min-w-full divide-y divide-neutral-200 text-sm;
}
.table thead th {
@apply bg-neutral-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-neutral-500;
}
.table tbody td {
@apply px-4 py-3 text-neutral-800;
}
.table tbody tr {
@apply border-t border-neutral-100;
}
.table tbody tr:hover {
@apply bg-neutral-50;
}
.badge {
@apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium;
}
.badge-active { @apply bg-verde-100 text-verde-800; }
.badge-pending { @apply bg-amber-100 text-amber-800; }
.badge-rejected { @apply bg-red-100 text-red-800; }
.badge-inactive { @apply bg-neutral-100 text-neutral-600; }
.badge-info { @apply bg-sky-100 text-sky-800; }
.nav-group-label {
@apply px-3 pt-5 pb-1.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-neutral-400;
}
.nav-link {
@apply flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900;
}
.nav-link.is-active {
@apply bg-verde-50 text-verde-800;
}
.nav-link svg {
@apply h-4 w-4 text-neutral-400 transition;
}
.nav-link:hover svg {
@apply text-neutral-700;
}
.nav-link.is-active svg {
@apply text-verde-700;
}
.nav-link.is-disabled {
@apply cursor-not-allowed text-neutral-400 hover:bg-transparent hover:text-neutral-400;
}
.nav-link.is-disabled svg {
@apply text-neutral-300;
}
.slide-over-mask {
@apply fixed inset-0 z-40 bg-neutral-900/30 transition-opacity;
}
.slide-over-panel {
@apply fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col bg-white shadow-xl transition-transform;
}
}
/* Disable input number spinners (up/down arrows) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}