index.css•5.87 kB
@tailwind base;
@tailwind components;
@tailwind utilities;
/* CodeGraphContext Design System - Dark theme with graph-inspired colors */
@layer base {
:root {
/* Dark background with subtle warmth */
--background: 222 47% 5%;
--foreground: 210 40% 98%;
/* Cards with subtle transparency */
--card: 222 47% 8%;
--card-foreground: 210 40% 98%;
--popover: 222 47% 8%;
--popover-foreground: 210 40% 98%;
/* Graph-inspired primary colors - deep purple-blue */
--primary: 263 70% 65%;
--primary-foreground: 222 47% 5%;
/* Secondary with graph node accent */
--secondary: 222 47% 12%;
--secondary-foreground: 210 40% 98%;
/* Muted tones for subtlety */
--muted: 222 47% 10%;
--muted-foreground: 215 20% 65%;
/* Bright cyan accent for highlights */
--accent: 180 100% 70%;
--accent-foreground: 222 47% 5%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 222 47% 15%;
--input: 222 47% 12%;
--ring: 263 70% 65%;
--radius: 0.75rem;
/* Custom graph colors */
--graph-node-1: 263 70% 65%;
--graph-node-2: 180 100% 70%;
--graph-node-3: 142 76% 65%;
--graph-edge: 222 47% 25%;
/* Gradients */
--gradient-primary: linear-gradient(135deg, hsl(263 70% 65%), hsl(180 100% 70%));
--gradient-hero: linear-gradient(135deg, hsl(222 47% 5%) 0%, hsl(222 47% 8%) 100%);
--gradient-card: linear-gradient(135deg, hsl(222 47% 8%) 0%, hsl(222 47% 10%) 100%);
/* Shadows with graph glow */
--shadow-glow: 0 0 40px hsl(263 70% 65% / 0.15);
--shadow-card: 0 10px 30px -10px hsl(222 47% 2% / 0.3);
/* Animations */
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.light {
/* Light mode fallback - CodeGraphContext works best in dark */
--background: 0 0% 95%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 263 70% 55%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 16.9%;
--accent: 180 100% 40%;
--accent-foreground: 210 40% 98%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 263 70% 55%;
--gradient-primary: linear-gradient(135deg, hsl(263, 49%, 40%), hsl(180, 45%, 47%));
}
.theme {
--animate-orbit: orbit calc(var(--duration)*1s) linear infinite;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground overflow-x-hidden;
background: hsl(var(--background));
background-image:
radial-gradient(circle at 20% 20%, hsl(263 70% 65% / 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, hsl(180 100% 70% / 0.05) 0%, transparent 50%);
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Custom animations */
@keyframes graph-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
@keyframes float-up {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes code-highlight {
0% { background-color: transparent; }
50% { background-color: hsl(263 70% 65% / 0.1); }
100% { background-color: transparent; }
}
.animate-graph-pulse {
animation: graph-pulse 2s ease-in-out infinite;
}
.animate-float-up {
animation: float-up 0.6s ease-out forwards;
}
.animate-code-highlight {
animation: code-highlight 2s ease-in-out infinite;
}
/* Orbiting circles animation (Tailwind v3 friendly) */
.animate-orbit {
animation: orbit calc(var(--duration) * 1s) linear infinite;
}
@keyframes orbit {
0% {
transform: rotate(calc(var(--angle) * 1deg))
translateY(calc(var(--radius) * 1px))
rotate(calc(var(--angle) * -1deg));
}
100% {
transform: rotate(calc(var(--angle) * 1deg + 360deg))
translateY(calc(var(--radius) * 1px))
rotate(calc((var(--angle) * -1deg) - 360deg));
}
}
/* Graph visualization styles */
.graph-node {
@apply rounded-full border-2 border-primary/20 transition-all duration-300;
background: hsl(var(--gradient-primary));
box-shadow: var(--shadow-glow);
}
.graph-edge {
@apply stroke-graph-edge transition-all duration-300;
stroke-width: 2;
stroke-dasharray: 5,5;
animation: dash 20s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: -100;
}
}
/* Code block styling */
.code-block {
@apply bg-card border border-border rounded-lg p-4 font-mono text-sm;
background: var(--gradient-card);
box-shadow: var(--shadow-card);
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
@theme inline {
@keyframes orbit {
0% {
transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg));
}
100% {
transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg));
}
}
}