88 lines
2.3 KiB
CSS
88 lines
2.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* 3blue1brown-inspired dark palette: deep space blue background,
|
|
a warm gold accent for emphasis, and a small, deliberate set of
|
|
"state" colors used consistently across every visualization. */
|
|
--background: 222 47% 7%;
|
|
--foreground: 210 40% 96%;
|
|
|
|
--primary: 199 89% 64%; /* 3b1b sky blue */
|
|
--primary-foreground: 222 47% 7%;
|
|
--secondary: 222 30% 16%;
|
|
--secondary-foreground: 210 40% 90%;
|
|
--accent: 43 96% 62%; /* warm gold, used sparingly */
|
|
--accent-foreground: 222 47% 7%;
|
|
--destructive: 358 75% 59%;
|
|
--destructive-foreground: 210 40% 96%;
|
|
--muted: 222 25% 14%;
|
|
--muted-foreground: 215 20% 65%;
|
|
--card: 222 40% 10%;
|
|
--card-foreground: 210 40% 96%;
|
|
--popover: 222 44% 9%;
|
|
--popover-foreground: 210 40% 96%;
|
|
--border: 222 25% 20%;
|
|
--input: 222 25% 20%;
|
|
--ring: 199 89% 64%;
|
|
--radius: 0.75rem;
|
|
|
|
/* Algorithm state colors — one meaning each, used everywhere. */
|
|
--state-idle: 199 60% 55%;
|
|
--state-compare: 43 96% 62%;
|
|
--state-swap: 358 75% 59%;
|
|
--state-sorted: 152 60% 50%;
|
|
--state-pivot: 271 76% 68%;
|
|
--state-active-range: 199 89% 64%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
background-image:
|
|
linear-gradient(hsl(var(--border) / 0.35) 1px, transparent 1px),
|
|
linear-gradient(90deg, hsl(var(--border) / 0.35) 1px, transparent 1px);
|
|
background-size: 44px 44px;
|
|
background-position: center -1px;
|
|
}
|
|
|
|
::selection {
|
|
background: hsl(var(--accent) / 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--border));
|
|
border-radius: 999px;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.glow-primary {
|
|
box-shadow: 0 0 24px hsl(var(--primary) / 0.35);
|
|
}
|
|
.glow-accent {
|
|
box-shadow: 0 0 24px hsl(var(--accent) / 0.35);
|
|
}
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
.bg-grid-fade {
|
|
-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
|
|
mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
|
|
}
|
|
}
|