Spaces:
Sleeping
Sleeping
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| @layer base { | |
| * { | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| :root { | |
| --bg-primary: #0f1117; | |
| --bg-secondary: #161b27; | |
| --bg-card: #1a2035; | |
| --bg-hover: #1e2640; | |
| --border: rgba(255, 255, 255, 0.08); | |
| --border-bright: rgba(255, 255, 255, 0.15); | |
| --text-primary: #e8eaf6; | |
| --text-secondary: #8892b0; | |
| --text-muted: #4a5568; | |
| --accent: #3b82f6; | |
| --accent-glow: rgba(59, 130, 246, 0.15); | |
| --found: #22c55e; | |
| --found-bg: rgba(34, 197, 94, 0.1); | |
| --not-found: #ef4444; | |
| --not-found-bg: rgba(239, 68, 68, 0.1); | |
| --warning: #f59e0b; | |
| --warning-bg: rgba(245, 158, 11, 0.1); | |
| } | |
| html { | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| body { | |
| min-height: 100vh; | |
| background: var(--bg-primary); | |
| } | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-primary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.15); | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| } | |
| @layer components { | |
| /* Cards */ | |
| .card { | |
| @apply rounded-xl border bg-[#1a2035] border-white/[0.08] shadow-lg; | |
| } | |
| .card-hover { | |
| @apply card transition-all duration-200 hover:border-white/20 hover:shadow-xl hover:-translate-y-0.5; | |
| } | |
| /* Buttons */ | |
| .btn-primary { | |
| @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg | |
| bg-blue-600 hover:bg-blue-500 active:bg-blue-700 | |
| text-white text-sm font-semibold | |
| transition-all duration-150 shadow-lg shadow-blue-900/30 | |
| focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-[#0f1117] | |
| disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600; | |
| } | |
| .btn-secondary { | |
| @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg | |
| bg-white/5 hover:bg-white/10 active:bg-white/15 | |
| border border-white/10 hover:border-white/20 | |
| text-gray-300 hover:text-white text-sm font-medium | |
| transition-all duration-150 | |
| focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-[#0f1117] | |
| disabled:opacity-50 disabled:cursor-not-allowed; | |
| } | |
| .btn-danger { | |
| @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg | |
| bg-red-500/10 hover:bg-red-500/20 | |
| border border-red-500/30 hover:border-red-500/50 | |
| text-red-400 hover:text-red-300 text-sm font-medium | |
| transition-all duration-150; | |
| } | |
| /* Badge */ | |
| .badge { | |
| @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold; | |
| } | |
| .badge-found { | |
| @apply badge bg-green-500/15 text-green-400 border border-green-500/30; | |
| } | |
| .badge-not-found { | |
| @apply badge bg-red-500/15 text-red-400 border border-red-500/30; | |
| } | |
| .badge-method { | |
| @apply badge text-xs font-bold px-2 py-0.5 rounded; | |
| } | |
| /* Method colors */ | |
| .method-GET { @apply bg-blue-500/20 text-blue-300 border border-blue-500/30; } | |
| .method-POST { @apply bg-green-500/20 text-green-300 border border-green-500/30; } | |
| .method-PUT { @apply bg-amber-500/20 text-amber-300 border border-amber-500/30; } | |
| .method-DELETE { @apply bg-red-500/20 text-red-300 border border-red-500/30; } | |
| .method-PATCH { @apply bg-purple-500/20 text-purple-300 border border-purple-500/30; } | |
| .method-default { @apply bg-gray-500/20 text-gray-300 border border-gray-500/30; } | |
| /* Code / monospace */ | |
| .code-block { | |
| @apply font-mono text-xs bg-black/40 border border-white/5 rounded-lg px-3 py-2 | |
| text-gray-300 overflow-x-auto; | |
| } | |
| /* Upload drop zone */ | |
| .drop-zone { | |
| @apply relative rounded-xl border-2 border-dashed border-white/15 | |
| bg-white/[0.02] hover:bg-white/[0.04] hover:border-blue-500/50 | |
| transition-all duration-200 cursor-pointer | |
| focus-within:border-blue-500/70 focus-within:bg-blue-500/[0.03]; | |
| } | |
| .drop-zone-active { | |
| @apply border-blue-500 bg-blue-500/10; | |
| } | |
| /* Input */ | |
| .input-field { | |
| @apply w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 | |
| text-sm text-gray-200 placeholder-gray-500 | |
| focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 | |
| transition-all duration-150; | |
| } | |
| /* Divider */ | |
| .divider { | |
| @apply border-t border-white/[0.06]; | |
| } | |
| /* Location tag */ | |
| .location-tag { | |
| @apply inline-flex items-center gap-1 text-xs font-medium | |
| text-purple-300 bg-purple-500/10 border border-purple-500/20 | |
| px-2 py-0.5 rounded-full; | |
| } | |
| /* Match type tag */ | |
| .match-type-tag { | |
| @apply inline-flex items-center text-xs | |
| text-blue-300 bg-blue-500/10 border border-blue-500/20 | |
| px-2 py-0.5 rounded-full font-mono; | |
| } | |
| /* Context highlight */ | |
| .context-highlight { | |
| @apply bg-yellow-400/20 text-yellow-300 rounded px-0.5 font-semibold; | |
| } | |
| } | |
| /* Custom animations */ | |
| @keyframes shimmer { | |
| 0% { background-position: -200% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| .shimmer { | |
| background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| /* Glow effects */ | |
| .glow-blue { | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(135deg, #60a5fa, #a78bfa); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |