talk2me/admin/static/css/admin.css
Adolfo Delorenzo fa951c3141 Add comprehensive database integration, authentication, and admin dashboard
This commit introduces major enhancements to Talk2Me:

## Database Integration
- PostgreSQL support with SQLAlchemy ORM
- Redis integration for caching and real-time analytics
- Automated database initialization scripts
- Migration support infrastructure

## User Authentication System
- JWT-based API authentication
- Session-based web authentication
- API key authentication for programmatic access
- User roles and permissions (admin/user)
- Login history and session tracking
- Rate limiting per user with customizable limits

## Admin Dashboard
- Real-time analytics and monitoring
- User management interface (create, edit, delete users)
- System health monitoring
- Request/error tracking
- Language pair usage statistics
- Performance metrics visualization

## Key Features
- Dual authentication support (token + user accounts)
- Graceful fallback for missing services
- Non-blocking analytics middleware
- Comprehensive error handling
- Session management with security features

## Bug Fixes
- Fixed rate limiting bypass for admin routes
- Added missing email validation method
- Improved error handling for missing database tables
- Fixed session-based authentication for API endpoints

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-06-03 18:21:56 -06:00

192 lines
3.0 KiB
CSS

/* Admin Dashboard Styles */
body {
background-color: #f8f9fa;
padding-top: 56px; /* For fixed navbar */
}
/* Cards */
.card {
border: none;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-header {
background-color: #fff;
border-bottom: 1px solid #e3e6f0;
font-weight: 600;
}
/* Status Badges */
.badge {
padding: 0.375rem 0.75rem;
font-weight: normal;
}
.badge.bg-success {
background-color: #1cc88a !important;
}
.badge.bg-warning {
background-color: #f6c23e !important;
color: #000;
}
.badge.bg-danger {
background-color: #e74a3b !important;
}
/* Charts */
canvas {
max-width: 100%;
}
/* Tables */
.table {
font-size: 0.875rem;
}
.table th {
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
color: #6c757d;
}
/* Login Page */
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.card-body h2 {
font-size: 1.5rem;
}
.btn-group {
display: flex;
flex-direction: column;
}
.btn-group .btn {
border-radius: 0.25rem !important;
margin: 2px 0;
}
}
/* Loading spinners */
.spinner-border-sm {
width: 1rem;
height: 1rem;
}
/* Error list */
.error-item {
padding: 0.5rem;
border-bottom: 1px solid #dee2e6;
}
.error-item:last-child {
border-bottom: none;
}
.error-type {
font-weight: 600;
color: #e74a3b;
}
.error-time {
font-size: 0.75rem;
color: #6c757d;
}
/* Toast notifications */
.toast {
background-color: white;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* Animations */
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.updating {
animation: pulse 1s infinite;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #e0e0e0;
}
.card {
background-color: #2a2a2a;
color: #e0e0e0;
}
.card-header {
background-color: #2a2a2a;
border-bottom-color: #3a3a3a;
}
.table {
color: #e0e0e0;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.05);
}
.form-control {
background-color: #3a3a3a;
border-color: #4a4a4a;
color: #e0e0e0;
}
}
/* Performance optimization */
.chart-container {
position: relative;
height: 40vh;
width: 100%;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}