mirror of
https://github.com/StuffAnThings/qbit_manage.git
synced 2025-10-12 06:47:18 +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>
275 lines
6.3 KiB
CSS
275 lines
6.3 KiB
CSS
/* Modern Form Components */
|
|
.form-group {
|
|
margin-bottom: var(--spacing-lg);
|
|
position: relative;
|
|
}
|
|
|
|
.form-group-inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: var(--spacing-xs);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-group-inline .form-label {
|
|
margin-bottom: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.form-label.required::after {
|
|
content: ' *';
|
|
color: var(--error-color);
|
|
}
|
|
|
|
/* Floating labels */
|
|
.floating-label-group {
|
|
position: relative;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.floating-label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
transform: translate(0.75rem, 0.75rem) scale(1);
|
|
transform-origin: left top;
|
|
transition: all 0.2s ease;
|
|
color: var(--text-muted);
|
|
background-color: var(--input-bg);
|
|
padding: 0 0.25rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.form-input:focus ~ .floating-label,
|
|
.form-input:not(:placeholder-shown) ~ .floating-label,
|
|
.form-select:focus ~ .floating-label,
|
|
.form-select:not([value=""]) ~ .floating-label,
|
|
.form-textarea:focus ~ .floating-label,
|
|
.form-textarea:not(:placeholder-shown) ~ .floating-label {
|
|
transform: translate(0.5rem, -0.5rem) scale(0.85);
|
|
color: var(--primary);
|
|
background-color: var(--card-bg);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 100px;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border: 1px solid var(--input-border);
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--input-bg);
|
|
font-family: inherit;
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.5;
|
|
color: var(--text-primary);
|
|
transition: all var(--transition-fast);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--input-focus-border);
|
|
box-shadow: 0 0 0 3px var(--input-focus-ring);
|
|
background-color: var(--input-bg); /* Keep same bg on focus */
|
|
}
|
|
|
|
.form-input:disabled,
|
|
.form-select:disabled,
|
|
.form-textarea:disabled {
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-muted);
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.form-input.error,
|
|
.form-select.error,
|
|
.form-textarea.error {
|
|
border-color: var(--error-color);
|
|
padding-right: 2.5rem;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 1.25rem;
|
|
}
|
|
|
|
.form-input.error:focus,
|
|
.form-select.error:focus,
|
|
.form-textarea.error:focus {
|
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 8rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-help {
|
|
margin-top: var(--spacing-xs);
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.form-error {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: var(--spacing-xs);
|
|
font-size: var(--font-size-xs);
|
|
color: var(--error-color);
|
|
}
|
|
|
|
/* Input Groups */
|
|
.input-group {
|
|
display: flex;
|
|
align-items: stretch;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.input-group .form-input {
|
|
border-radius: 0;
|
|
border-right: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.input-group .form-input:first-child {
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
}
|
|
|
|
.input-group .form-input:last-child {
|
|
border-top-right-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.input-group .btn {
|
|
border-radius: 0;
|
|
border-left: 0;
|
|
padding: 0 var(--spacing-lg);
|
|
}
|
|
|
|
.input-group .btn:first-child {
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
|
|
.input-group .btn:last-child {
|
|
border-top-right-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
}
|
|
|
|
/* Password Input Group Styling */
|
|
.password-input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
width: 100%;
|
|
}
|
|
|
|
.password-input-group .form-input {
|
|
flex: 1;
|
|
z-index: 1;
|
|
}
|
|
|
|
.password-input-group .password-toggle {
|
|
flex-shrink: 0;
|
|
min-width: 42px;
|
|
min-height: 42px;
|
|
padding: var(--spacing-sm);
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.password-input-group .password-toggle:hover {
|
|
background-color: var(--bg-tertiary);
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.password-input-group .password-toggle .icon,
|
|
.password-input-group .password-toggle svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
pointer-events: none;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Hide browser's built-in password visibility toggle */
|
|
.hide-password-toggle::-webkit-textfield-decoration-container,
|
|
.hide-password-toggle::-webkit-credentials-auto-fill-button,
|
|
.hide-password-toggle::-webkit-strong-password-auto-fill-button {
|
|
display: none !important;
|
|
}
|
|
|
|
.hide-password-toggle::-ms-reveal,
|
|
.hide-password-toggle::-ms-clear {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Notifications section optimizations */
|
|
.field-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.webhook-sections-container {
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.function-webhooks-lazy {
|
|
margin-top: 1rem;
|
|
border: 1px dashed var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.lazy-load-placeholder {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
transition: all var(--transition-fast);
|
|
user-select: none;
|
|
}
|
|
|
|
.lazy-load-placeholder:hover {
|
|
background: var(--background-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.lazy-content.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Reduce DOM complexity for dynamic select fields */
|
|
.dynamic-select-text-group {
|
|
contain: layout style;
|
|
}
|
|
|
|
.dynamic-text-input {
|
|
will-change: display;
|
|
}
|