/* Dark Theme Styles for Manual Trade Annotation UI */ :root { --bg-primary: #111827; --bg-secondary: #1f2937; --bg-tertiary: #374151; --text-primary: #f8f9fa; --text-secondary: #9ca3af; --text-muted: #6b7280; --border-color: #4b5563; --accent-primary: #3b82f6; --accent-success: #10b981; --accent-danger: #ef4444; --accent-warning: #f59e0b; } body { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Cards */ .card { background-color: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } .card-header { background-color: var(--bg-tertiary) !important; border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } .card-body { background-color: var(--bg-secondary) !important; } /* Tables */ .table { color: var(--text-primary) !important; } .table-dark { background-color: var(--bg-secondary) !important; --bs-table-bg: var(--bg-secondary); --bs-table-striped-bg: var(--bg-tertiary); --bs-table-hover-bg: var(--bg-tertiary); } .table-dark thead th { border-bottom-color: var(--border-color); } .table-dark tbody td { border-color: var(--border-color); } /* Forms */ .form-control, .form-select { background-color: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .form-control:focus, .form-select:focus { background-color: var(--bg-tertiary) !important; border-color: var(--accent-primary) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25); } .form-check-input { background-color: var(--bg-tertiary); border-color: var(--border-color); } .form-check-input:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); } .form-label { color: var(--text-primary); } /* Buttons */ .btn-outline-light { color: var(--text-primary); border-color: var(--border-color); } .btn-outline-light:hover { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-color); } .btn-outline-secondary:hover { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } .btn-outline-primary:hover { background-color: var(--accent-primary); border-color: var(--accent-primary); } /* List Groups */ .list-group-item { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .list-group-item-action:hover { background-color: var(--bg-tertiary) !important; } /* Alerts */ .alert-info { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: #93c5fd; } .alert-success { background-color: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; } .alert-danger { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; } .alert-warning { background-color: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; } /* Badges */ .badge { font-weight: 500; } /* Modals */ .modal-content { background-color: var(--bg-secondary); border-color: var(--border-color); } .modal-header { background-color: var(--bg-tertiary); border-bottom-color: var(--border-color); } .modal-footer { border-top-color: var(--border-color); } .btn-close { filter: invert(1); } /* Progress Bars */ .progress { background-color: var(--bg-tertiary); } /* Navbar */ .navbar-dark { background-color: var(--bg-secondary) !important; border-bottom: 1px solid var(--border-color); } /* Footer */ .footer { background-color: var(--bg-secondary) !important; border-top: 1px solid var(--border-color); } /* Text Colors */ .text-muted { color: var(--text-muted) !important; } .text-success { color: var(--accent-success) !important; } .text-danger { color: var(--accent-danger) !important; } .text-warning { color: var(--accent-warning) !important; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-color); } /* Tooltips */ .tooltip-inner { background-color: var(--bg-tertiary); color: var(--text-primary); } .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--bg-tertiary); } .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--bg-tertiary); } /* Spinners */ .spinner-border { border-color: var(--accent-primary); border-right-color: transparent; } /* Toast Notifications */ .toast { background-color: var(--bg-secondary); border-color: var(--border-color); } .toast-header { background-color: var(--bg-tertiary); border-bottom-color: var(--border-color); color: var(--text-primary); } .toast-body { color: var(--text-primary); }