mirror of
https://github.com/StuffAnThings/qbit_manage.git
synced 2025-10-11 06:16:35 +08:00
28f1a3b027
# Requirements Updated - "argon2-cffi==25.1.0" - "slowapi==0.1.9" - "ruff==0.12.12" # New Features - Adds authentication support for the webUI and webAPI (Fixes #867) # Improvements - Enhanced `--web-server` option to support disabling with `--web-server=False` while maintaining backward compatibility - The `schedule.yml` is now renamed to `qbm_settings.yml` in order to support security features (Automatic migration) - Makes hyperlinks clickable in the webUI (Fixes #938) # Bug Fixes - Better support for windows paths when using remote_dir - Fix `QBT_CONFIG_DIR` not supporting folders with subdirectories (Fixes #934) - Fixes webUI not being packaged with PyPi builds - Fix bug in remove_orphaned where it's not able to start a new thread in concurrent runs **Full Changelog**: https://github.com/StuffAnThings/qbit_manage/compare/v4.6.0...v4.6.1 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
399 lines
8.8 KiB
CSS
399 lines
8.8 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;
|
|
}
|
|
|
|
/* API Key Input Group Styling */
|
|
.api-key-input-group {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.api-key-input-group .form-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.api-key-input-group .btn {
|
|
flex-shrink: 0;
|
|
padding: 0.5rem;
|
|
min-width: auto;
|
|
}
|
|
|
|
.api-key-input-group .btn-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
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;
|
|
}
|
|
|
|
/* Checkbox styling */
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
.form-checkbox {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 3px;
|
|
background-color: var(--input-bg);
|
|
position: relative;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.form-checkbox:checked {
|
|
background-color: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.form-checkbox:checked::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-checkbox:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 2px var(--input-focus-ring);
|
|
}
|
|
|
|
.checkbox-label {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Form actions */
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-xl);
|
|
padding-top: var(--spacing-lg);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Outline button style */
|
|
.btn-outline {
|
|
background-color: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
text-decoration: none;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background-color: var(--bg-secondary);
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.btn-outline:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.btn-outline:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-outline:disabled:hover {
|
|
background-color: transparent;
|
|
border-color: var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|