/** * Free Brain Services - Style CSS avec Tailwind * Version 2.0 - Styles personnalisés complémentaires */ /* ============================================ IMPORT TAILWIND CDN (à mettre dans le ) ============================================ ============================================ */ /* ============================================ STYLES PERSONNALISÉS COMPLÉMENTAIRES ============================================ */ /* Scrollbar personnalisée */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Sidebar scrollbar sombre */ .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Animation pour les cartes */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.3s ease-out; } /* Transition smooth pour le menu */ .menu-link { transition: all 0.2s ease; } .menu-link:hover { transform: translateX(4px); } /* Badge de notification */ .notification-badge { position: absolute; top: -4px; right: -4px; background: #ef4444; color: white; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; } /* Table responsive */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive::-webkit-scrollbar { height: 6px; } /* États de chargement */ .skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Modal backdrop blur */ .modal-backdrop { backdrop-filter: blur(4px); } /* Impression */ @media print { .no-print { display: none !important; } .sidebar, .header, .card { box-shadow: none !important; } body { background: white !important; } } /* Mobile responsive */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.3s; } .sidebar.mobile-open { transform: translateX(0); } .main-content { margin-left: 0 !important; } } /* Focus visible pour l'accessibilité */ *:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } /* Sélection de texte */ ::selection { background: #3b82f6; color: white; } /* Animation de progression */ @keyframes progress { 0% { width: 0%; } } .progress-bar { animation: progress 1s ease-out; } /* Tooltip personnalisé */ [data-tooltip] { position: relative; } [data-tooltip]:hover::before { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 6px 12px; background: #1f2937; color: white; font-size: 12px; white-space: nowrap; border-radius: 6px; margin-bottom: 8px; z-index: 1000; } /* États des tâches avec couleurs */ .task-status-todo { border-left: 4px solid #6b7280; } .task-status-in_progress { border-left: 4px solid #3b82f6; } .task-status-review { border-left: 4px solid #f59e0b; } .task-status-completed { border-left: 4px solid #10b981; } .task-status-cancelled { border-left: 4px solid #ef4444; } /* Priority badges avec glow effect */ .priority-urgent { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .priority-high { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } /* Drag and drop zones */ .drop-zone { border: 2px dashed #cbd5e1; transition: all 0.2s; } .drop-zone.drag-over { border-color: #3b82f6; background: rgba(59, 130, 246, 0.05); } /* Chart container */ .chart-container { position: relative; height: 300px; } /* Empty state */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #9ca3af; } .empty-state-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.5; } /* Loading spinner */ .spinner { border: 3px solid #f3f4f6; border-top: 3px solid #3b82f6; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Success animation */ .success-checkmark { width: 80px; height: 80px; margin: 0 auto; } .success-checkmark circle { stroke: #10b981; stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .success-checkmark path { stroke: #10b981; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } /* Pulse animation pour les notifications */ .pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Slide in from right pour les notifications */ @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .slide-in-right { animation: slideInRight 0.3s ease-out; } /* Gradient backgrounds */ .gradient-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } .gradient-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .gradient-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .gradient-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } /* Card hover effect */ .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Input avec icône */ .input-with-icon { position: relative; } .input-with-icon input { padding-left: 40px; } .input-with-icon i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af; } /* Status indicator */ .status-indicator { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .status-indicator.active { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); } .status-indicator.inactive { background: #6b7280; } /* Timeline */ .timeline-item { position: relative; padding-left: 40px; } .timeline-item::before { content: ''; position: absolute; left: 8px; top: 0; bottom: -20px; width: 2px; background: #e5e7eb; } .timeline-item:last-child::before { display: none; } .timeline-dot { position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: white; border: 3px solid #3b82f6; z-index: 1; }