110 行
3.2 KiB
CSS
110 行
3.2 KiB
CSS
/*
|
|
Style tokens source (single-direction sync):
|
|
- Extracted from Stitch MCP AI-generated Design Preview (B2B SaaS Theme)
|
|
*/
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
|
|
@import "./styles/mobile-touch.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-zinc-50 font-sans text-zinc-900 antialiased selection:bg-zinc-900 selection:text-white;
|
|
}
|
|
|
|
#root {
|
|
@apply min-h-screen flex flex-col;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
|
|
/* Layout */
|
|
.layout-container {
|
|
@apply mx-auto w-full px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
@apply flex items-center justify-center gap-2 px-4 py-2 bg-zinc-900 text-white rounded-lg text-sm font-bold hover:bg-zinc-800 transition-all shadow-sm;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply flex items-center justify-center gap-2 px-3 py-2 bg-white border border-zinc-200 rounded-lg text-sm font-medium text-zinc-700 hover:bg-zinc-50 transition-colors shadow-sm;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply text-zinc-400 hover:text-zinc-600 p-1 rounded-md transition-colors;
|
|
}
|
|
|
|
/* Cards */
|
|
.card-std {
|
|
@apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 transition-all;
|
|
}
|
|
|
|
.card-title {
|
|
@apply text-sm font-medium text-zinc-500 mb-1;
|
|
}
|
|
|
|
.card-value {
|
|
@apply text-3xl font-bold text-zinc-900 tracking-tight;
|
|
}
|
|
|
|
/* Forms */
|
|
.input-std {
|
|
@apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
|
|
}
|
|
|
|
.select-std {
|
|
@apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
|
|
}
|
|
|
|
.select-sm {
|
|
@apply h-8 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs font-medium text-zinc-600 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
|
|
}
|
|
|
|
/* Tables */
|
|
.table-container {
|
|
@apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 overflow-hidden;
|
|
}
|
|
|
|
.table-header {
|
|
@apply bg-zinc-50/50 border-b border-zinc-100;
|
|
}
|
|
|
|
.table-th {
|
|
@apply px-6 py-4 text-xs font-bold text-zinc-500 text-left;
|
|
}
|
|
|
|
.table-row {
|
|
@apply transition-colors hover:bg-zinc-50/80;
|
|
}
|
|
|
|
.table-td {
|
|
@apply px-6 py-4 text-sm text-zinc-600;
|
|
}
|
|
|
|
.table-td-strong {
|
|
@apply px-6 py-4 text-sm font-bold text-zinc-900;
|
|
}
|
|
|
|
/* Badges */
|
|
.badge-success {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/10;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/10;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10;
|
|
}
|
|
|
|
.badge-neutral {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-zinc-100 text-zinc-700 ring-1 ring-inset ring-zinc-600/10;
|
|
}
|
|
} |