| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| @layer base { |
| * { box-sizing: border-box; } |
| body { |
| @apply font-sans antialiased text-neutral-200 bg-[#09090b] selection:bg-neutral-800; |
| background-image: |
| radial-gradient(circle at 50% -20%, rgba(120, 119, 198, 0.05) 0%, transparent 50%), |
| radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.005) 0%, transparent 35%); |
| background-attachment: fixed; |
| } |
| ::-webkit-scrollbar { width: 5px; height: 5px; } |
| ::-webkit-scrollbar-track { @apply bg-[#09090b]; } |
| ::-webkit-scrollbar-thumb { @apply bg-neutral-800 hover:bg-neutral-700 rounded-full transition-colors; } |
| } |
|
|
| @layer components { |
| |
| .card { |
| @apply bg-[#0e0e11] border border-neutral-800/80 rounded-xl shadow-xl transition-all duration-300 relative overflow-hidden; |
| } |
| .card:hover { |
| @apply border-neutral-700/80 shadow-[0_8px_30px_rgb(0,0,0,0.6)] transform -translate-y-[1px]; |
| } |
| |
| |
| .btn-primary { |
| @apply inline-flex items-center justify-center gap-2 px-5 py-2 |
| bg-neutral-100 hover:bg-neutral-200 text-neutral-950 font-medium text-sm rounded-lg |
| transition-all duration-200 active:scale-[0.98] |
| disabled:opacity-50 disabled:cursor-not-allowed shadow-md; |
| } |
| |
| .btn-ghost { |
| @apply inline-flex items-center gap-2 px-4 py-2 text-neutral-400 hover:text-neutral-100 |
| hover:bg-neutral-900 border border-transparent hover:border-neutral-800 text-sm rounded-lg transition-all duration-200 active:scale-[0.98]; |
| } |
| |
| |
| .badge { |
| @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium border tracking-tight; |
| } |
| .badge-sql { @apply bg-neutral-900/80 text-neutral-300 border-neutral-800; } |
| .badge-pandas { @apply bg-neutral-900/80 text-neutral-300 border-neutral-800; } |
| .badge-cache { @apply bg-neutral-900/80 text-neutral-300 border-neutral-800; } |
| |
| |
| .input-premium { |
| @apply bg-neutral-950 border border-neutral-800 rounded-lg px-3.5 py-2 text-neutral-200 |
| focus:outline-none focus:ring-1 focus:ring-neutral-700 focus:border-neutral-700 |
| transition-all duration-200 placeholder:text-neutral-600 text-sm; |
| } |
| } |
|
|
| @layer utilities { |
| .text-gradient { |
| @apply bg-clip-text text-transparent bg-gradient-to-b from-white to-neutral-400; |
| } |
| |
| .animate-float { |
| animation: float 6s ease-in-out infinite; |
| } |
| } |
|
|
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-4px); } |
| } |
|
|
