/** * Mode Sombre Global - Toutes les pages * Appliqué automatiquement via data-theme="dark" sur */ :root { /* Light mode (default) */ --bg-primary: #ffffff; --bg-secondary: #f3f4f6; --bg-tertiary: #e5e7eb; --text-primary: #111827; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --border-color: #d1d5db; --shadow: rgba(0, 0, 0, 0.1); --accent: #6366f1; --accent-hover: #4f46e5; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; } [data-theme="dark"] { /* Dark mode colors - Plus claires */ --bg-primary: #1e1e2e; --bg-secondary: #2a2a3e; --bg-tertiary: #363650; --text-primary: #e0e0e0; --text-secondary: #b0b0c0; --text-tertiary: #8a8a9a; --border-color: #4a4a5e; --shadow: rgba(0, 0, 0, 0.4); --accent: #a5b4fc; --accent-hover: #818cf8; --success: #4ade80; --warning: #fbbf24; --error: #fb7185; --info: #60a5fa; } /* Global styles */ body { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; transition: background-color 0.3s ease, color 0.3s ease; } html { background-color: var(--bg-primary); } /* Cards & Panels */ .card, .panel, .box, .module, .dashboard-module { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); box-shadow: 0 1px 3px var(--shadow); } /* Forms */ input, textarea, select, .form-control, .vTextField, .vLargeTextField, .vDateField, .vTimeField { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } input:focus, textarea:focus, select:focus { background-color: var(--bg-tertiary); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } input::placeholder, textarea::placeholder { color: var(--text-tertiary); } /* Buttons */ button, .button, .btn, input[type="submit"], input[type="button"], .submit-row input { background-color: var(--accent); color: white; border-color: var(--accent); } button:hover, .button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover { background-color: var(--accent-hover); } .button.secondary, .btn-secondary { background-color: var(--bg-tertiary); color: var(--text-primary); } /* Tables */ table, .results, .table { background-color: var(--bg-secondary); color: var(--text-primary); } thead, th { background-color: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); } tbody tr { border-color: var(--border-color); } tbody tr:hover { background-color: var(--bg-tertiary); } td { border-color: var(--border-color); } /* Links */ a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* Headers */ h1, h2, h3, h4, h5, h6 { color: var(--text-primary); } /* Navigation */ nav, .navbar, .sidebar, #header { background-color: var(--bg-secondary); border-color: var(--border-color); } /* Modals */ .modal, .modal-content, .dialog { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } .modal-header, .modal-footer { border-color: var(--border-color); } /* Alerts & Messages */ .alert, .message, .messagelist li { border-color: var(--border-color); } .alert-success, .success { background-color: rgba(16, 185, 129, 0.1); color: var(--success); border-color: var(--success); } .alert-warning, .warning { background-color: rgba(245, 158, 11, 0.1); color: var(--warning); border-color: var(--warning); } .alert-error, .error, .errornote { background-color: rgba(239, 68, 68, 0.1); color: var(--error); border-color: var(--error); } .alert-info, .info { background-color: rgba(59, 130, 246, 0.1); color: var(--info); border-color: var(--info); } /* Django Admin Specific */ #container { background-color: var(--bg-primary); } #content { background-color: var(--bg-primary); } .breadcrumbs { background-color: var(--bg-tertiary); color: var(--text-secondary); } .breadcrumbs a { color: var(--accent); } .module h2, .module caption { background-color: var(--bg-tertiary); color: var(--text-primary); } .row1 { background-color: var(--bg-secondary); } .row2 { background-color: var(--bg-primary); } /* Workflow specific */ .workflow-step { background-color: var(--bg-secondary); border-color: var(--border-color); } .workflow-step.active { background-color: var(--accent); color: white; } .workflow-step.completed { background-color: var(--success); color: white; } /* Status badges */ .badge, .status-badge { background-color: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); } .badge-success { background-color: var(--success); color: white; } .badge-warning { background-color: var(--warning); color: white; } .badge-error { background-color: var(--error); color: white; } .badge-info { background-color: var(--info); color: white; } /* Code blocks */ pre, code { background-color: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); } /* Scrollbars (Webkit) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background-color: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--text-tertiary); } /* Toggle button for dark mode */ .dark-mode-toggle { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--accent); color: white; border: none; cursor: pointer; box-shadow: 0 4px 6px var(--shadow); display: flex; align-items: center; justify-content: center; font-size: 24px; z-index: 9999; transition: all 0.3s ease; } .dark-mode-toggle:hover { background-color: var(--accent-hover); transform: scale(1.1); } /* Responsive: bouton plus petit sur mobile */ @media (max-width: 768px) { .dark-mode-toggle { width: 45px; height: 45px; bottom: 15px; right: 15px; font-size: 20px; } } /* Specific fixes for billing admin */ .billing-admin .card { background-color: var(--bg-secondary); } .billing-admin .stat-card { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); } /* Workflow modern design compatibility */ .workflow-modern { background-color: var(--bg-primary); } .workflow-modern .step-card { background-color: var(--bg-secondary); border-color: var(--border-color); } .workflow-modern .project-card { background-color: var(--bg-secondary); border-color: var(--border-color); } .workflow-modern .project-card:hover { background-color: var(--bg-tertiary); box-shadow: 0 4px 12px var(--shadow); } /* Quote public page */ .quote-public { background-color: var(--bg-primary); } .quote-public .quote-header { background-color: var(--bg-secondary); border-color: var(--border-color); } .quote-public .quote-table { background-color: var(--bg-secondary); } .quote-public .quote-table th { background-color: var(--bg-tertiary); } /* Signature canvas */ canvas { background-color: white !important; border: 2px solid var(--border-color); } [data-theme="dark"] canvas { background-color: #f9fafb !important; } /* Print styles - always light mode */ @media print { body, .card, .panel, table, input, textarea, select { background-color: white !important; color: black !important; border-color: #d1d5db !important; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } [data-theme="dark"] * { animation: fadeIn 0.3s ease; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { [data-theme="dark"] { --bg-primary: #000000; --bg-secondary: #1a1a1a; --text-primary: #ffffff; --border-color: #ffffff; } }