Introduce an admin portal (React + Nginx), WebSocket routing, and API versioning middleware with `/api/v1/` prefix deprecation. Add master API key authentication, new Prometheus metrics for AI token consumption and active WebSockets, and extend S3 config with a public endpoint URL. Update test paths and fixtures to align with the new routing structure.
110 lines
3.0 KiB
CSS
110 lines
3.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface text-content-primary font-sans;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-surface;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-surface-overlay rounded-full border-2 border-surface;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-border;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.card {
|
|
@apply bg-surface-raised border border-border rounded-xl p-6;
|
|
}
|
|
|
|
.card-compact {
|
|
@apply bg-surface-raised border border-border rounded-lg p-4;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-brand-500 hover:bg-brand-600 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-surface-overlay hover:bg-border-light text-content-primary font-medium px-4 py-2 rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-status-error/10 hover:bg-status-error/20 text-status-error font-medium px-4 py-2 rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-status-error focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply hover:bg-surface-overlay text-content-secondary hover:text-content-primary font-medium px-4 py-2 rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface;
|
|
}
|
|
|
|
.input-field {
|
|
@apply bg-surface border border-border rounded-lg px-3 py-2 text-content-primary placeholder-content-muted focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors duration-150;
|
|
}
|
|
|
|
.skeleton {
|
|
@apply bg-surface-overlay rounded animate-pulse;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Prose customization for premium readability */
|
|
.prose pre {
|
|
@apply bg-surface-raised border border-border rounded-xl shadow-lg !important;
|
|
}
|
|
|
|
.prose code {
|
|
@apply font-mono !important;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.15s ease-out;
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slideIn 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
.skeleton-shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
theme('colors.surface.overlay') 25%,
|
|
theme('colors.border.DEFAULT') 50%,
|
|
theme('colors.surface.overlay') 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
}
|
|
|