:root { /* Light Theme Variables */ --primary-color: #0d6efd; --secondary-color: #6c757d; --dark-color: #212529; --light-color: #f8f9fa; --success-color: #198754; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #0dcaf0; /* Common Variables */ --border-radius: 4px; --shadow: 0 2px 4px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; /* Light Theme Specific */ --bg-color: #ffffff; --text-color: #212529; --card-bg: #f8f9fa; --card-header-bg: #e9ecef; --card-border: 1px solid rgba(0, 0, 0, 0.125); --hover-bg: #e9ecef; --table-border: #dee2e6; --input-bg: #fff; --input-border: #ced4da; --dropdown-bg: #fff; --modal-bg: #fff; --feed-item-bg: #f8f9fa; --torrent-item-bg: #f8f9fa; } /* Dark Theme */ body.dark-mode { --bg-color: #121212; --text-color: #f5f5f5; --card-bg: #1e1e1e; --card-header-bg: #252525; --card-border: 1px solid rgba(255, 255, 255, 0.125); --hover-bg: #2c2c2c; --table-border: #333; --input-bg: #2c2c2c; --input-border: #444; --dropdown-bg: #2c2c2c; --modal-bg: #1e1e1e; --feed-item-bg: #1e1e1e; --torrent-item-bg: #1e1e1e; color-scheme: dark; } /* Global forced text color for dark mode */ body.dark-mode > * { color: #f5f5f5; } /* Fix for dark mode text colors */ body.dark-mode .text-dark, body.dark-mode .text-body, body.dark-mode .text-primary, body.dark-mode .modal-title, body.dark-mode .form-label, body.dark-mode .form-check-label, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode label, body.dark-mode .card-title, body.dark-mode .form-text, body.dark-mode .tab-content { color: #f5f5f5 !important; } body.dark-mode .text-secondary, body.dark-mode .text-muted { color: #adb5bd !important; } body.dark-mode .nav-link { color: #f5f5f5; } body.dark-mode .nav-link:hover, body.dark-mode .nav-link:focus { color: #0d6efd; } body.dark-mode .dropdown-menu { background-color: #1e1e1e; border-color: rgba(255, 255, 255, 0.125); } body.dark-mode .dropdown-item { color: #f5f5f5; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #2c2c2c; color: #f5f5f5; } body.dark-mode .list-group-item { background-color: #1e1e1e; color: #f5f5f5; border-color: rgba(255, 255, 255, 0.125); } body.dark-mode .feed-item-date, body.dark-mode .torrent-item-details { color: #adb5bd; } /* Links in dark mode */ body.dark-mode a:not(.btn):not(.nav-link):not(.badge) { color: #6ea8fe; } body.dark-mode a:not(.btn):not(.nav-link):not(.badge):hover { color: #8bb9fe; } /* Table in dark mode */ body.dark-mode .table { color: #f5f5f5; } /* Alerts in dark mode */ body.dark-mode .alert-info { background-color: #0d3251; color: #6edff6; border-color: #0a3a5a; } body.dark-mode .alert-success { background-color: #051b11; color: #75b798; border-color: #0c2a1c; } body.dark-mode .alert-warning { background-color: #332701; color: #ffda6a; border-color: #473b08; } body.dark-mode .alert-danger { background-color: #2c0b0e; color: #ea868f; border-color: #401418; } /* Advanced tab fix */ body.dark-mode #tab-advanced, body.dark-mode #tab-advanced * { color: #f5f5f5 !important; } body.dark-mode #tab-advanced .form-check-label, body.dark-mode .form-switch .form-check-label, body.dark-mode label[for="show-completed-torrents"] { color: #f5f5f5 !important; } /* Base Elements */ body { padding-bottom: 2rem; background-color: var(--bg-color); color: var(--text-color); transition: var(--transition); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* Navigation */ .navbar { margin-bottom: 1rem; background-color: var(--card-bg); border-bottom: var(--card-border); transition: var(--transition); } .navbar-brand, .nav-link { color: var(--text-color); transition: var(--transition); } .navbar-toggler { border-color: var(--input-border); } .page-content { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Cards */ .card { margin-bottom: 1rem; box-shadow: var(--shadow); background-color: var(--card-bg); border: var(--card-border); border-radius: var(--border-radius); transition: var(--transition); } .card-header { background-color: var(--card-header-bg); font-weight: 500; border-bottom: var(--card-border); transition: var(--transition); } /* Tables */ .table { margin-bottom: 0; color: var(--text-color); transition: var(--transition); } .table thead th { border-bottom-color: var(--table-border); } .table td, .table th { border-top-color: var(--table-border); } /* Progress Bars */ .progress { height: 10px; background-color: var(--card-header-bg); border-radius: var(--border-radius); } /* Badges */ .badge { padding: 0.35em 0.65em; border-radius: 50rem; } .badge-downloading { background-color: var(--info-color); color: var(--dark-color); } .badge-seeding { background-color: var(--success-color); color: white; } .badge-stopped { background-color: var(--secondary-color); color: white; } .badge-checking { background-color: var(--warning-color); color: var(--dark-color); } .badge-queued { background-color: var(--secondary-color); color: white; } .badge-error { background-color: var(--danger-color); color: white; } /* Buttons */ .btn { border-radius: var(--border-radius); transition: var(--transition); } .btn-icon { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); } .btn-success { background-color: var(--success-color); border-color: var(--success-color); } .btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); } .btn-warning { background-color: var(--warning-color); border-color: var(--warning-color); color: var(--dark-color); } .btn-info { background-color: var(--info-color); border-color: var(--info-color); color: var(--dark-color); } /* Inputs & Forms */ .form-control, .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-color); border-radius: var(--border-radius); transition: var(--transition); } .form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--text-color); border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } body.dark-mode .form-control, body.dark-mode .form-select { color: #f5f5f5; background-color: #2c2c2c; border-color: #444; } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background-color: #2c2c2c; color: #f5f5f5; } body.dark-mode .form-control::placeholder { color: #adb5bd; opacity: 0.7; } /* Form switches in dark mode */ body.dark-mode .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; } body.dark-mode .form-check-input:not(:checked) { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.25); } body.dark-mode .form-check { color: #f5f5f5 !important; } body.dark-mode .form-check-label, body.dark-mode label.form-check-label, body.dark-mode .form-switch label, body.dark-mode label[for], body.dark-mode .card-body label, body.dark-mode #show-completed-torrents + label, body.dark-mode label[for="show-completed-torrents"] { color: #f5f5f5 !important; } /* Direct fix for the show completed torrents label */ html body.dark-mode div#tab-advanced div.card-body div.form-check label.form-check-label[for="show-completed-torrents"], html body.dark-mode div#tab-advanced div.mb-3 div.form-check-label, html body.dark-mode div#tab-advanced label.form-check-label { color: #ffffff !important; font-weight: 500 !important; text-shadow: 0 0 1px #000 !important; } /* Fix all form check labels in dark mode */ html body.dark-mode .form-check-label { color: #ffffff !important; } /* Fix for all tabs in dark mode */ body.dark-mode #tab-advanced, body.dark-mode #tab-advanced *, body.dark-mode #tab-appearance, body.dark-mode #tab-appearance *, body.dark-mode #tab-processing, body.dark-mode #tab-processing *, body.dark-mode #tab-rss, body.dark-mode #tab-rss *, body.dark-mode #tab-transmission, body.dark-mode #tab-transmission * { color: #f5f5f5 !important; } body.dark-mode .tab-content, body.dark-mode .tab-content * { color: #f5f5f5 !important; } /* Emergency fix for advanced tab */ body.dark-mode .form-check-label { color: white !important; } /* Super specific advanced tab fix */ body.dark-mode #detailed-logging + label, body.dark-mode #show-completed-torrents + label, body.dark-mode #confirm-delete + label, body.dark-mode div.form-check-label, body.dark-mode label.form-check-label { color: white !important; } /* Feed Items */ .feed-item { border-left: 3px solid transparent; padding: 15px; margin-bottom: 15px; background-color: var(--feed-item-bg); border-radius: var(--border-radius); transition: var(--transition); } .feed-item:hover { background-color: var(--hover-bg); } .feed-item.matched { border-left-color: var(--success-color); } .feed-item.downloaded { opacity: 0.7; } .feed-item-title { font-weight: 500; margin-bottom: 8px; } .feed-item-date { font-size: 0.85rem; color: var(--secondary-color); } .feed-item-buttons { margin-top: 12px; display: flex; gap: 8px; } /* Torrent Items */ .torrent-item { margin-bottom: 20px; padding: 15px; border-radius: var(--border-radius); background-color: var(--torrent-item-bg); transition: var(--transition); border: var(--card-border); } .torrent-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .torrent-item-title { font-weight: 500; margin-right: 10px; word-break: break-word; } .torrent-item-progress { margin: 12px 0; } .torrent-item-details { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 0.9rem; color: var(--secondary-color); } .torrent-item-buttons { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } /* Dashboard panels */ .dashboard-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; margin-bottom: 20px; } .stat-card { background-color: var(--card-bg); border-radius: var(--border-radius); padding: 20px; border: var(--card-border); transition: var(--transition); display: flex; flex-direction: column; align-items: center; text-align: center; } .stat-card .stat-value { font-size: 2rem; font-weight: bold; margin: 10px 0; } .stat-card .stat-label { font-size: 0.9rem; color: var(--secondary-color); } /* Dark Mode Toggle */ .dark-mode-toggle { cursor: pointer; padding: 5px 10px; border-radius: var(--border-radius); transition: var(--transition); color: var(--text-color); background-color: transparent; border: 1px solid var(--input-border); } .dark-mode-toggle:hover { background-color: var(--hover-bg); } .dark-mode-toggle i { font-size: 1.2rem; } body.dark-mode .dark-mode-toggle { color: #f5f5f5; border-color: #444; } /* Notifications */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; } .toast { background-color: var(--card-bg); color: var(--text-color); border: var(--card-border); margin-bottom: 10px; max-width: 350px; } .toast-header { background-color: var(--card-header-bg); color: var(--text-color); border-bottom: var(--card-border); } /* Modals */ .modal-content { background-color: var(--modal-bg); color: var(--text-color); border: var(--card-border); } .modal-header { border-bottom: var(--card-border); } .modal-footer { border-top: var(--card-border); } /* Charts and Graphs */ .chart-container { position: relative; height: 300px; margin-bottom: 20px; } /* Mobile Responsive Design */ @media (max-width: 768px) { .container { padding-left: 15px; padding-right: 15px; max-width: 100%; } .card-body { padding: 15px; } .torrent-item-header { flex-direction: column; align-items: flex-start; } .torrent-item-buttons { width: 100%; } .torrent-item-buttons .btn { flex: 1; text-align: center; padding: 8px; } .dashboard-stats { grid-template-columns: 1fr; } .stat-card { margin-bottom: 10px; } .feed-item-buttons { flex-direction: column; } .feed-item-buttons .btn { width: 100%; margin-bottom: 5px; } .table-responsive { margin-bottom: 15px; } } /* Tablet Responsive Design */ @media (min-width: 769px) and (max-width: 992px) { .dashboard-stats { grid-template-columns: repeat(2, 1fr); } } /* Print Styles */ @media print { .no-print { display: none !important; } body { background-color: white !important; color: black !important; } .card, .torrent-item, .feed-item { break-inside: avoid; border: 1px solid #ddd !important; } } /* Accessibility */ @media (prefers-reduced-motion) { * { transition: none !important; animation: none !important; } } /* Utilities */ .text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cursor-pointer { cursor: pointer; } .flex-grow-1 { flex-grow: 1; } .word-break-all { word-break: break-all; }