90 lines
2.6 KiB
CSS
90 lines
2.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
}
|
|
|
|
html, body, #__next {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background:
|
|
radial-gradient(1200px 600px at 0% -10%, rgba(11, 140, 255, 0.08), transparent 60%),
|
|
radial-gradient(800px 500px at 100% 0%, rgba(124, 92, 255, 0.08), transparent 55%),
|
|
#f8fafc;
|
|
color: #0f172a;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
@layer components {
|
|
.asf-card {
|
|
@apply bg-white/90 backdrop-blur border border-slate-200/80 rounded-xl shadow-card;
|
|
}
|
|
.asf-card-header {
|
|
@apply flex items-center justify-between px-5 py-4 border-b border-slate-100;
|
|
}
|
|
.asf-card-title {
|
|
@apply font-semibold text-slate-800 text-sm tracking-tight;
|
|
}
|
|
.asf-card-body {
|
|
@apply p-5;
|
|
}
|
|
.asf-btn {
|
|
@apply inline-flex items-center justify-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium
|
|
transition-colors border border-transparent;
|
|
}
|
|
.asf-btn-primary {
|
|
@apply asf-btn bg-brand-600 text-white hover:bg-brand-700 focus:ring-2 focus:ring-brand-300;
|
|
}
|
|
.asf-btn-secondary {
|
|
@apply asf-btn bg-white text-slate-700 border-slate-200 hover:bg-slate-50;
|
|
}
|
|
.asf-btn-ghost {
|
|
@apply asf-btn text-slate-600 hover:bg-slate-100;
|
|
}
|
|
.asf-input {
|
|
@apply w-full px-3 py-2 rounded-lg text-sm bg-white border border-slate-200
|
|
focus:border-brand-400 focus:ring-2 focus:ring-brand-200 outline-none;
|
|
}
|
|
.asf-nav-item {
|
|
@apply flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium
|
|
text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-colors;
|
|
}
|
|
.asf-nav-item-active {
|
|
@apply bg-brand-50 text-brand-700 hover:bg-brand-50 hover:text-brand-800
|
|
ring-1 ring-inset ring-brand-100;
|
|
}
|
|
.asf-chip {
|
|
@apply inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5
|
|
rounded-full border border-slate-200 bg-slate-50 text-slate-600;
|
|
}
|
|
.asf-monospace {
|
|
font-family: "JetBrains Mono", Menlo, ui-monospace, monospace;
|
|
}
|
|
}
|
|
|
|
/* React Flow theme tweaks */
|
|
.react-flow__attribution {
|
|
display: none;
|
|
}
|
|
.react-flow__node {
|
|
font-size: 12px;
|
|
padding: 0;
|
|
}
|
|
.react-flow__node-default,
|
|
.react-flow__node-input,
|
|
.react-flow__node-output {
|
|
border: 1px solid #e2e8f0 !important;
|
|
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 20px -8px rgba(15,23,42,0.10);
|
|
}
|
|
|
|
/* Scrollbar */
|
|
*::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
|
|
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|