81 lines
2.1 KiB
CSS
81 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Monochrome chrome: the shell carries no color of its own, so the
|
|
five algorithm-state colors below are the only color on the page. */
|
|
--background: 224 15% 6%;
|
|
--foreground: 210 20% 95%;
|
|
|
|
--primary: 210 25% 96%; /* near-white, inverted CTA fill */
|
|
--primary-foreground: 224 20% 9%;
|
|
--secondary: 224 12% 15%;
|
|
--secondary-foreground: 210 15% 90%;
|
|
--accent: 224 12% 17%; /* neutral hover surface, not a brand color */
|
|
--accent-foreground: 210 20% 95%;
|
|
--destructive: 358 65% 55%;
|
|
--destructive-foreground: 210 20% 96%;
|
|
--muted: 224 12% 13%;
|
|
--muted-foreground: 216 10% 62%;
|
|
--card: 224 14% 9%;
|
|
--card-foreground: 210 20% 95%;
|
|
--popover: 224 16% 8%;
|
|
--popover-foreground: 210 20% 95%;
|
|
--border: 224 12% 18%;
|
|
--input: 224 12% 18%;
|
|
--ring: 205 90% 62%; /* the one deliberate accent: focus only */
|
|
--radius: 0.75rem;
|
|
|
|
/* Algorithm state colors — one meaning each, used everywhere. */
|
|
--state-idle: 205 40% 50%;
|
|
--state-compare: 43 90% 60%;
|
|
--state-swap: 358 75% 59%;
|
|
--state-sorted: 152 55% 48%;
|
|
--state-pivot: 271 70% 66%;
|
|
--state-active-range: 205 60% 55%;
|
|
}
|
|
}
|
|
|
|
@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 {
|
|
.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%);
|
|
}
|
|
}
|