:root { --bg: #121C22; --bg-2nd: #637CF9; --bg-card: #1e2832; --fg: #FFFFFF; --fg-muted: #a0aec0; --border-color: #2d3748; --hover-bg: #1a242f; } body { background-color: var(--bg); color: var(--fg); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Navbar styling */ .navbar-dark { background-color: var(--bg-2nd) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .navbar-brand { font-weight: 600; } .nav-link { margin: 0 5px; } /* Card styling */ .card { background-color: var(--bg-card); border-color: var(--border-color); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .card-header { background-color: var(--bg-2nd); border-bottom-color: var(--bg-2nd); color: var(--fg); font-weight: 600; } /* Form controls */ .form-control, .form-select { background-color: #2d3748; border-color: var(--border-color); color: var(--fg); } .form-control:focus, .form-select:focus { background-color: #2d3748; border-color: var(--bg-2nd); color: var(--fg); box-shadow: 0 0 0 0.2rem rgba(99, 124, 249, 0.25); } .form-control::placeholder { color: var(--fg-muted); } .form-check-input { background-color: #2d3748; border-color: var(--bg-2nd); } .form-check-input:checked { background-color: var(--bg-2nd); border-color: var(--bg-2nd); } /* Buttons */ .btn-primary { background-color: var(--bg-2nd); border-color: var(--bg-2nd); } .btn-primary:hover, .btn-primary:focus { background-color: #5a6fd8; border-color: #5a6fd8; } .btn-outline-secondary { color: var(--fg); border-color: var(--fg-muted); } .btn-outline-secondary:hover { background-color: #2d3748; color: var(--fg); } /* Tables */ .table { color: var(--fg); } .table thead th { border-bottom-color: var(--border-color); color: var(--fg-muted); } .table tbody tr:hover { background-color: var(--hover-bg); } .table td, .table th { border-color: var(--border-color); } /* Alerts */ .alert-warning, .alert-info, .alert-danger, .alert-success { background-color: #2d3748; border-color: var(--bg-2nd); color: var(--fg); } .alert-info { border-left: 4px solid var(--bg-2nd); } .alert-danger { border-left: 4px solid #e53e3e; } .alert-success { border-left: 4px solid #38a169; } .alert-warning { border-left: 4px solid #d69e2e; } /* Text colors */ .text-muted { color: var(--fg-muted) !important; } /* Progress bars */ .progress { background-color: #2d3748; } .progress-bar { background-color: var(--bg-2nd); } /* List groups */ .list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--fg); } .list-group-item:hover { background-color: var(--hover-bg); } .list-group-item-action:focus, .list-group-item-action:hover { background-color: var(--hover-bg); color: var(--fg); } /* Badges */ .badge { font-weight: 500; } /* Download items */ .download-item { background-color: var(--hover-bg); border-radius: 4px; } .download-item:hover { background-color: #243447; } /* Provider list */ .provider-list { max-height: 300px; overflow-y: auto; } .provider-item { cursor: move; background-color: var(--hover-bg); } .provider-item:hover { background-color: #243447; } /* Modals */ .modal-content { background-color: var(--bg-card); color: var(--fg); } .modal-header, .modal-footer { border-color: var(--border-color); } /* Spinner */ .spinner-border { color: var(--bg-2nd); } /* Footer */ footer { color: var(--fg-muted); } /* Media queries */ @media (max-width: 768px) { .card-body { padding: 1rem; } .container { padding-left: 12px; padding-right: 12px; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.3s ease-in; } /* Dark mode toggle */ .dark-mode-toggle { cursor: pointer; }