9e544456db
This repository contains Transmission RSS Manager with the following changes: - Fixed dark mode navigation tab visibility issue - Improved text contrast in dark mode throughout the app - Created dedicated dark-mode.css for better organization - Enhanced JavaScript for dynamic styling in dark mode - Added complete installation scripts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
724 lines
14 KiB
CSS
724 lines
14 KiB
CSS
: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 .nav-link.active {
|
|
color: #f5f5f5;
|
|
background-color: #375a7f !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
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(.badge) {
|
|
color: #6ea8fe;
|
|
}
|
|
|
|
body.dark-mode a:not(.btn):not(.badge):hover {
|
|
color: #8bb9fe;
|
|
}
|
|
|
|
/* Ensure tab navs in dark mode have proper styling */
|
|
body.dark-mode .nav-tabs .nav-link.active {
|
|
background-color: #375a7f;
|
|
border-color: #444 #444 #375a7f;
|
|
color: #fff !important;
|
|
}
|
|
|
|
body.dark-mode .nav-tabs .nav-link:not(.active):hover {
|
|
border-color: #444;
|
|
background-color: #2c2c2c;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* 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;
|
|
} |