/* core/torrent-handler/styles.css */ /* Dashboard layout */ .torrent-dashboard { padding: 20px; max-width: 1200px; margin: 0 auto; } .dashboard-actions { display: flex; justify-content: space-between; margin-bottom: 20px; } .empty-state { text-align: center; padding: 40px; background-color: #f9f9f9; border-radius: 8px; } .loading { text-align: center; padding: 20px; font-style: italic; } /* Torrent table styles */ .torrents-table { width: 100%; border-collapse: collapse; margin-top: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .torrents-table th, .torrents-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; } .torrents-table th { background-color: #f2f2f2; font-weight: bold; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.5px; } .torrents-table tr:hover { background-color: #f5f5f5; } .torrents-table .actions { display: flex; gap: 5px; } /* Progress bar */ .progress-bar { width: 100%; background-color: #f1f1f1; border-radius: 4px; position: relative; height: 20px; overflow: hidden; } .progress-fill { background-color: #4CAF50; height: 100%; border-radius: 4px; transition: width 0.3s ease; } .progress-bar span { position: absolute; text-align: center; line-height: 20px; width: 100%; color: #000; font-size: 12px; font-weight: bold; text-shadow: 0 0 2px rgba(255,255,255,0.7); } /* Status indicators */ .status-indicator { padding: 4px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold; display: inline-block; text-align: center; } .status-downloading { background-color: #e3f2fd; color: #0d47a1; } .status-seeding { background-color: #e8f5e9; color: #2e7d32; } .status-stopped { background-color: #f5f5f5; color: #616161; } .status-checking { background-color: #fff3e0; color: #e65100; } .status-queued { background-color: #f3e5f5; color: #6a1b9a; } /* Message boxes */ .error-message, .success-message { padding: 15px; margin: 20px 0; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .error-message { background-color: #fdecea; color: #c62828; border-left: 4px solid #c62828; } .success-message { background-color: #e8f5e9; color: #2e7d32; border-left: 4px solid #2e7d32; } .error-message button, .success-message button { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 1.5em; line-height: 1; opacity: 0.7; } .error-message button:hover, .success-message button:hover { opacity: 1; } /* Forms */ .add-torrent-form, .torrent-settings { max-width: 800px; margin: 0 auto; padding: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: bold; } .form-group label[for="auto-start"], .form-group label[for="auto_start_torrents"] { display: flex; align-items: center; font-weight: normal; } .form-group label[for="auto-start"] input, .form-group label[for="auto_start_torrents"] input { margin-right: 10px; } .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="number"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .form-group input[type="file"] { padding: 10px 0; } .form-group .help-text { font-size: 0.8em; color: #666; margin-top: 5px; } .form-actions { display: flex; gap: 10px; margin-top: 30px; justify-content: flex-end; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.2s; } button:hover { background-color: #45a049; } button:disabled { background-color: #cccccc; cursor: not-allowed; } button[type="button"] { background-color: #f1f1f1; color: #333; } button[type="button"]:hover { background-color: #e0e0e0; } fieldset { margin-bottom: 30px; border: 1px solid #ddd; padding: 20px; border-radius: 4px; } legend { font-weight: bold; padding: 0 10px; font-size: 1.1em; } /* Responsive design */ @media (max-width: 768px) { .torrents-table { display: block; overflow-x: auto; } .form-actions { flex-direction: column; } .form-actions button { width: 100%; } }