mirror of
https://github.com/StuffAnThings/qbit_manage.git
synced 2025-10-31 08:26:29 +08:00
ca4819bc0b
# Requirements Updated - qbittorrent-api==2025.7.0 - fastapi==0.116.1 # New Features - **Uncategorized Category**: Allow multiple paths for Uncategorized category and add error handling (Thanks to @cat-of-wisdom #849) - **Config Auto Backup and Cleanup**: implement automatic backup rotation (30 most recent backups per config) and cleanup - **Web UI**: add base URL support for reverse proxy deployments (Fixes #871) - **Share Limits**: add option to preserve upload speed limits when minimums unmet (New config option `reset_upload_speed_on_unmet_minimums`) (Fixes #835, #791) # Improvements - Optimize webUI form rendering - Better centralized error handling for qbitorrent API operations - **Web UI**: add editable group names to share limit modal # Bug Fixes - Fix bug in remove orphaned to notify when there are 0 orphaned files - Fixes [Bug]: Cannot run on Python 3.9.18 #864 - fix(qbit): add error handling for qBittorrent API operations **Full Changelog**: https://github.com/StuffAnThings/qbit_manage/compare/v4.5.0...v4.5.1 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: cat-of-wisdom <217637421+cat-of-wisdom@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
330 lines
8.2 KiB
CSS
Executable file
330 lines
8.2 KiB
CSS
Executable file
/* Theme System - Dark and Light Mode Support */
|
|
|
|
/* Light Theme (Default) */
|
|
:root {
|
|
/* Primary Colors */
|
|
--primary-color: #3b82f6;
|
|
--primary-hover: #2563eb;
|
|
--primary-light: #dbeafe;
|
|
--primary-dark: #1d4ed8;
|
|
|
|
/* Secondary Colors */
|
|
--secondary-color: #64748b;
|
|
--secondary-hover: #475569;
|
|
--secondary-light: #f1f5f9;
|
|
--secondary-dark: #334155;
|
|
|
|
/* Status Colors */
|
|
--success-color: #10b981;
|
|
--success-hover: #059669;
|
|
--success-light: #d1fae5;
|
|
--warning-color: #f59e0b;
|
|
--warning-hover: #d97706;
|
|
--warning-light: #fef3c7;
|
|
--error-color: #ef4444;
|
|
--error-hover: #dc2626;
|
|
--error-light: #fee2e2;
|
|
--info-color: #06b6d4;
|
|
--info-hover: #0891b2;
|
|
--info-light: #cffafe;
|
|
|
|
/* Background Colors */
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f8fafc;
|
|
--bg-tertiary: #f1f5f9;
|
|
--bg-accent: #e2e8f0;
|
|
--bg-hover: #f1f5f9;
|
|
--bg-active: #e2e8f0;
|
|
--bg-overlay: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Text Colors */
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #64748b;
|
|
--text-muted: #94a3b8;
|
|
--text-inverse: #ffffff;
|
|
--text-accent: #3b82f6;
|
|
|
|
/* Border Colors */
|
|
--border-color: #e2e8f0;
|
|
--border-hover: #cbd5e1;
|
|
--border-focus: #3b82f6;
|
|
--border-error: #ef4444;
|
|
--border-success: #10b981;
|
|
|
|
/* Card Colors */
|
|
--card-bg: #ffffff;
|
|
--card-border: #e2e8f0;
|
|
--card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--card-hover-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
|
|
/* Input Colors */
|
|
--input-bg: #ffffff;
|
|
--input-border: #d1d5db;
|
|
--input-focus-border: #3b82f6;
|
|
--input-focus-ring: rgba(59, 130, 246, 0.1);
|
|
--input-placeholder: #9ca3af;
|
|
|
|
/* Button Colors */
|
|
--btn-primary-bg: #3b82f6;
|
|
--btn-primary-hover: #2563eb;
|
|
--btn-primary-text: #ffffff;
|
|
--btn-secondary-bg: #f8fafc;
|
|
--btn-secondary-hover: #f1f5f9;
|
|
--btn-secondary-text: #374151;
|
|
--btn-secondary-border: #d1d5db;
|
|
|
|
/* Sidebar Colors */
|
|
--sidebar-bg: #f8fafc;
|
|
--sidebar-border: #e5e7eb;
|
|
--sidebar-item-hover: #f3f4f6;
|
|
--sidebar-item-active: #3b82f6;
|
|
--sidebar-item-active-text: #ffffff;
|
|
|
|
/* Header Colors */
|
|
--header-bg: #ffffff;
|
|
--header-border: #e5e7eb;
|
|
--header-text: #1f2937;
|
|
|
|
/* Toast Colors */
|
|
--toast-bg: #ffffff;
|
|
--toast-border: #e5e7eb;
|
|
--toast-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
/* Dark Theme */
|
|
[data-theme="dark"] {
|
|
/* Primary Colors - Blue accent theme */
|
|
--primary-color: #3b82f6;
|
|
--primary-hover: #2563eb;
|
|
--primary-light: #1e3a8a;
|
|
--primary-dark: #1d4ed8;
|
|
|
|
/* Secondary Colors */
|
|
--secondary-color: #6b7280;
|
|
--secondary-hover: #9ca3af;
|
|
--secondary-light: #374151;
|
|
--secondary-dark: #4b5563;
|
|
|
|
/* Status Colors */
|
|
--success-color: #10b981;
|
|
--success-hover: #34d399;
|
|
--success-light: #064e3b;
|
|
--warning-color: #f59e0b;
|
|
--warning-hover: #fbbf24;
|
|
--warning-light: #451a03;
|
|
--error-color: #ef4444;
|
|
--error-hover: #f87171;
|
|
--error-light: #7f1d1d;
|
|
--info-color: #06b6d4;
|
|
--info-hover: #22d3ee;
|
|
--info-light: #164e63;
|
|
|
|
/* Background Colors - Dark theme */
|
|
--bg-primary: #0f172a;
|
|
--bg-secondary: #1e293b;
|
|
--bg-tertiary: #334155;
|
|
--bg-accent: #475569;
|
|
--bg-hover: #2d3748;
|
|
--bg-active: #4a5568;
|
|
--bg-overlay: rgba(0, 0, 0, 0.8);
|
|
|
|
/* Text Colors */
|
|
--text-primary: #f9fafb;
|
|
--text-secondary: #d1d5db;
|
|
--text-muted: #9ca3af;
|
|
--text-inverse: #1f2937;
|
|
--text-accent: #3b82f6;
|
|
|
|
/* Border Colors */
|
|
--border-color: #374151;
|
|
--border-hover: #4b5563;
|
|
--border-focus: #3b82f6;
|
|
--border-error: #ef4444;
|
|
--border-success: #10b981;
|
|
|
|
/* Card Colors */
|
|
--card-bg: #1f2937;
|
|
--card-border: #374151;
|
|
--card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
|
|
--card-hover-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
|
|
|
/* Input Colors */
|
|
--input-bg: #374151;
|
|
--input-border: #4b5563;
|
|
--input-focus-border: #3b82f6;
|
|
--input-focus-ring: rgba(59, 130, 246, 0.2);
|
|
--input-placeholder: #6b7280;
|
|
|
|
/* Button Colors */
|
|
--btn-primary-bg: #3b82f6;
|
|
--btn-primary-hover: #2563eb;
|
|
--btn-primary-text: #1f2937;
|
|
--btn-secondary-bg: #374151;
|
|
--btn-secondary-hover: #4b5563;
|
|
--btn-secondary-text: #d1d5db;
|
|
--btn-secondary-border: #4b5563;
|
|
|
|
/* Sidebar Colors */
|
|
--sidebar-bg: #1e293b;
|
|
--sidebar-border: #374151;
|
|
--sidebar-item-hover: #1f2937;
|
|
--sidebar-item-active: #3b82f6;
|
|
--sidebar-item-active-text: #1f2937;
|
|
|
|
/* Header Colors */
|
|
--header-bg: #111827;
|
|
--header-border: #374151;
|
|
--header-text: #f9fafb;
|
|
|
|
/* Toast Colors */
|
|
--toast-bg: #1f2937;
|
|
--toast-border: #374151;
|
|
--toast-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
|
|
}
|
|
|
|
/* Auto theme based on system preference */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme]) {
|
|
/* Apply dark theme variables when system prefers dark and no explicit theme is set */
|
|
--primary-color: #3b82f6;
|
|
--primary-hover: #2563eb;
|
|
--primary-light: #1e3a8a;
|
|
--primary-dark: #1d4ed8;
|
|
|
|
--secondary-color: #6b7280;
|
|
--secondary-hover: #9ca3af;
|
|
--secondary-light: #374151;
|
|
--secondary-dark: #4b5563;
|
|
|
|
--success-color: #10b981;
|
|
--success-hover: #34d399;
|
|
--success-light: #064e3b;
|
|
--warning-color: #f59e0b;
|
|
--warning-hover: #fbbf24;
|
|
--warning-light: #451a03;
|
|
--error-color: #ef4444;
|
|
--error-hover: #f87171;
|
|
--error-light: #7f1d1d;
|
|
--info-color: #06b6d4;
|
|
--info-hover: #22d3ee;
|
|
--info-light: #164e63;
|
|
|
|
--bg-primary: #1f2937;
|
|
--bg-secondary: #111827;
|
|
--bg-tertiary: #0f172a;
|
|
--bg-accent: #374151;
|
|
--bg-hover: #2d3748;
|
|
--bg-active: #4a5568;
|
|
--bg-overlay: rgba(0, 0, 0, 0.8);
|
|
|
|
--text-primary: #f9fafb;
|
|
--text-secondary: #d1d5db;
|
|
--text-muted: #9ca3af;
|
|
--text-inverse: #1f2937;
|
|
--text-accent: #3b82f6;
|
|
|
|
--border-color: #374151;
|
|
--border-hover: #4b5563;
|
|
--border-focus: #3b82f6;
|
|
--border-error: #ef4444;
|
|
--border-success: #10b981;
|
|
|
|
--card-bg: #1f2937;
|
|
--card-border: #374151;
|
|
--card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
|
|
--card-hover-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
|
|
|
--input-bg: #374151;
|
|
--input-border: #4b5563;
|
|
--input-focus-border: #3b82f6;
|
|
--input-focus-ring: rgba(59, 130, 246, 0.2);
|
|
--input-placeholder: #6b7280;
|
|
|
|
--btn-primary-bg: #3b82f6;
|
|
--btn-primary-hover: #2563eb;
|
|
--btn-primary-text: #1f2937;
|
|
--btn-secondary-bg: #374151;
|
|
--btn-secondary-hover: #4b5563;
|
|
--btn-secondary-text: #d1d5db;
|
|
--btn-secondary-border: #4b5563;
|
|
|
|
--sidebar-bg: #111827;
|
|
--sidebar-border: #374151;
|
|
--sidebar-item-hover: #1f2937;
|
|
--sidebar-item-active: #3b82f6;
|
|
--sidebar-item-active-text: #1f2937;
|
|
|
|
--header-bg: #111827;
|
|
--header-border: #374151;
|
|
--header-text: #f9fafb;
|
|
|
|
--toast-bg: #1f2937;
|
|
--toast-border: #374151;
|
|
--toast-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
|
|
}
|
|
}
|
|
|
|
/* Theme transition for smooth switching */
|
|
* {
|
|
transition: background-color var(--transition-fast),
|
|
border-color var(--transition-fast),
|
|
color var(--transition-fast);
|
|
}
|
|
|
|
/* Theme toggle button styles */
|
|
.theme-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--btn-secondary-bg);
|
|
color: var(--btn-secondary-text);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background-color: var(--btn-secondary-hover);
|
|
border-color: var(--border-hover);
|
|
}
|
|
|
|
.theme-toggle:focus {
|
|
outline: none;
|
|
border-color: var(--border-focus);
|
|
box-shadow: 0 0 0 3px var(--input-focus-ring);
|
|
}
|
|
|
|
.theme-toggle .icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Hide/show theme icons based on current theme */
|
|
[data-theme="dark"] .theme-toggle .icon-sun {
|
|
display: block;
|
|
}
|
|
|
|
[data-theme="dark"] .theme-toggle .icon-moon {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="light"] .theme-toggle .icon-sun {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="light"] .theme-toggle .icon-moon {
|
|
display: block;
|
|
}
|
|
|
|
/* Default state (light theme) */
|
|
:root:not([data-theme]) .theme-toggle .icon-sun {
|
|
display: none;
|
|
}
|
|
|
|
:root:not([data-theme]) .theme-toggle .icon-moon {
|
|
display: block;
|
|
}
|