88 lines
2.5 KiB
CSS
88 lines
2.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Source paths (relative to this CSS file's location) */
|
|
/* Only scan user-ui sources - admin-ui CSS is lazy-loaded from /admin.css */
|
|
@source "../src/**/*.rs";
|
|
@source "../public/**/*.html";
|
|
@source "../../../crates/chattyness-user-ui/src/**/*.rs";
|
|
@source not "../../../target";
|
|
|
|
/* Custom theme extensions */
|
|
@theme {
|
|
--color-realm-50: #f0f9ff;
|
|
--color-realm-100: #e0f2fe;
|
|
--color-realm-200: #bae6fd;
|
|
--color-realm-300: #7dd3fc;
|
|
--color-realm-400: #38bdf8;
|
|
--color-realm-500: #0ea5e9;
|
|
--color-realm-600: #0284c7;
|
|
--color-realm-700: #0369a1;
|
|
--color-realm-800: #075985;
|
|
--color-realm-900: #0c4a6e;
|
|
--color-realm-950: #082f49;
|
|
}
|
|
|
|
/* User-specific styles only */
|
|
@import "./user.css";
|
|
|
|
/* Base styles for accessibility */
|
|
@layer base {
|
|
/* Focus visible for keyboard navigation */
|
|
:focus-visible {
|
|
@apply outline-2 outline-offset-2 outline-blue-500;
|
|
}
|
|
|
|
/* Reduce motion for users who prefer it */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Component styles used by user-ui */
|
|
@layer components {
|
|
/* Form input base styles */
|
|
.input-base {
|
|
@apply w-full px-4 py-3 bg-gray-700 border border-gray-600
|
|
rounded-lg text-white placeholder-gray-400
|
|
focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
|
transition-colors duration-200;
|
|
}
|
|
|
|
/* Button base styles */
|
|
.btn-primary {
|
|
@apply px-6 py-3 bg-blue-600 hover:bg-blue-700
|
|
disabled:bg-gray-600 disabled:cursor-not-allowed
|
|
text-white font-semibold rounded-lg
|
|
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800
|
|
transition-colors duration-200;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply px-6 py-3 bg-gray-600 hover:bg-gray-500
|
|
disabled:bg-gray-700 disabled:cursor-not-allowed
|
|
text-white font-semibold rounded-lg
|
|
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-800
|
|
transition-colors duration-200;
|
|
}
|
|
|
|
/* Error message styles */
|
|
.error-message {
|
|
@apply p-4 bg-red-900/50 border border-red-500 rounded-lg text-red-200;
|
|
}
|
|
|
|
/* Reconnection overlay spinner animation */
|
|
.reconnect-spinner {
|
|
animation: reconnect-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes reconnect-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|