Sys-Arc-Visl/src/index.css

65 lines
No EOL
1.6 KiB
CSS

@import "tailwindcss";
@import "@xyflow/react/dist/style.css";
@import "./styles/theme.css";
@import "./styles/ui.css";
@theme {
--font-sans: "Inter", system-ui, sans-serif;
--font-display: "Space Grotesk", "Inter", sans-serif;
--font-mono: "JetBrains Mono", monospace;
}
/* Force class-based dark mode for Tailwind v4 */
@custom-variant dark (&:where(.dark, .dark *));
body {
margin: 0;
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-sans);
overflow: hidden;
}
#root {
height: 100vh;
width: 100vw;
}
/* ReactFlow Theming Overrides */
.react-flow__background {
background-color: var(--bg-primary) !important;
}
.react-flow__controls {
background: var(--bg-secondary) !important;
border: 1px solid var(--glass-border) !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
.react-flow__controls-button {
background: var(--bg-secondary) !important;
border: none !important;
fill: var(--text-secondary) !important;
}
.react-flow__controls-button:hover {
background: var(--interactive-hover) !important;
fill: var(--text-primary) !important;
}
/* Remove default group node container styling - keep inner nodes intact */
.react-flow__node-group {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Remove the default white background and black border from ALL node wrappers */
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}