Spaces:
Running
Running
| /* 配置管理页面样式 */ | |
| .upload-config-panel { | |
| background: var(--bg-primary); | |
| padding: 2rem; | |
| border-radius: 0.5rem; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .config-search-panel { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .search-controls { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr auto; | |
| gap: 1rem; | |
| align-items: end; | |
| } | |
| .search-input-group { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .search-input-group .form-control { | |
| flex: 1; | |
| padding-right: 3rem; | |
| } | |
| .search-input-group .btn { | |
| position: absolute; | |
| right: 0.5rem; | |
| padding: 0.5rem 0.75rem; | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 0.375rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .search-input-group .btn:hover { | |
| background: var(--btn-primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .config-list-container { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .config-list-header { | |
| background: var(--bg-tertiary); | |
| padding: 1rem 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .config-list-header h3 { | |
| margin: 0; | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .config-stats { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .config-stats span { | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| } | |
| .status-used { background: var(--success-bg); color: var(--success-text); } | |
| .status-unused { background: var(--warning-bg); color: var(--warning-text); } | |
| .status-invalid { background: var(--danger-bg); color: var(--danger-text); } | |
| .config-list { | |
| overflow-y: auto; | |
| } | |
| /* 无配置文件提示样式 */ | |
| .no-configs { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); | |
| border-radius: 0.5rem; | |
| margin: 1rem; | |
| } | |
| .no-configs p { | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| padding: 1rem 2rem; | |
| background: var(--bg-tertiary); | |
| border: 1px dashed var(--border-color); | |
| border-radius: 0.5rem; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .no-configs p::before { | |
| content: '\f07c'; | |
| font-family: 'Font Awesome 6 Free'; | |
| font-weight: 400; | |
| font-size: 1.25rem; | |
| color: var(--text-tertiary); | |
| } | |
| .config-item-manager { | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .config-item-manager:hover { | |
| background: var(--bg-secondary); | |
| } | |
| .config-item-manager:last-child { | |
| border-bottom: none; | |
| } | |
| .config-item-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.75rem; | |
| } | |
| .config-item-name { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| flex: 1; | |
| } | |
| .config-item-path { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| font-family: 'Courier New', monospace; | |
| background: var(--bg-tertiary); | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| margin: 0 0.5rem; | |
| max-width: 300px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .config-item-meta { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .config-item-type { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| padding: 0.25rem 0.5rem; | |
| background: var(--bg-tertiary); | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .config-item-status { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .config-item-manager.used .config-item-status { background: var(--success-bg); color: var(--success-text); } | |
| .config-item-manager.unused .config-item-status { background: var(--warning-bg); color: var(--warning-text); } | |
| .config-item-manager.invalid .config-item-status { background: var(--danger-bg); color: var(--danger-text); } | |
| .config-item-details { | |
| margin-top: 0.75rem; | |
| padding-top: 0.75rem; | |
| border-top: 1px solid var(--border-color); | |
| display: none; | |
| } | |
| .config-item-manager.expanded .config-item-details { | |
| display: block; | |
| } | |
| .config-details-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .config-detail-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| } | |
| .config-detail-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .config-detail-value { | |
| font-size: 0.875rem; | |
| color: var(--text-primary); | |
| font-family: 'Courier New', monospace; | |
| word-break: break-all; | |
| } | |
| .config-item-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 0.75rem; | |
| padding-top: 0.75rem; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .btn-view { background: var(--primary-color); color: white; } | |
| .btn-view:hover { background: var(--btn-primary-hover); } | |
| .btn-delete-small { background: var(--danger-color); color: white; } | |
| .config-item-manager.expanded { | |
| background: var(--bg-secondary); | |
| } | |
| /* 配置查看模态框样式 */ | |
| .config-view-modal { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: var(--overlay-bg); | |
| backdrop-filter: blur(4px); | |
| display: flex; justify-content: center; align-items: center; | |
| z-index: 1000; opacity: 0; visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .config-view-modal.show { opacity: 1; visibility: visible; } | |
| .config-modal-content { | |
| background: var(--bg-primary); | |
| border-radius: 0.5rem; | |
| width: 90%; max-width: 800px; max-height: 80vh; | |
| overflow: hidden; | |
| box-shadow: 0 20px 60px var(--neutral-shadow-30); | |
| display: flex; flex-direction: column; | |
| animation: modalSlideIn 0.3s ease; | |
| } | |
| .config-modal-header { | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; justify-content: space-between; align-items: center; | |
| background: var(--bg-secondary); | |
| } | |
| .config-modal-body { | |
| padding: 1.5rem; flex: 1; overflow-y: auto; | |
| } | |
| .config-file-info { | |
| display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; | |
| background: var(--bg-secondary); border-radius: 0.5rem; | |
| } | |
| .config-content-display { | |
| background: var(--code-bg); color: var(--code-text); | |
| padding: 1rem; border-radius: 0.5rem; | |
| font-family: 'Courier New', monospace; font-size: 0.875rem; | |
| line-height: 1.5; max-height: 400px; overflow-y: auto; | |
| white-space: pre-wrap; word-wrap: break-word; | |
| } | |
| .config-modal-footer { | |
| padding: 1.5rem; border-top: 1px solid var(--border-color); | |
| display: flex; justify-content: flex-end; gap: 1rem; | |
| background: var(--bg-secondary); | |
| } | |
| /* 关联信息显示样式 */ | |
| .config-usage-info { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| margin: 1rem 0; | |
| padding: 1rem; | |
| border-left: 4px solid var(--primary-color); | |
| } | |
| .usage-info-header { | |
| display: flex; align-items: center; gap: 0.5rem; | |
| margin-bottom: 1rem; padding-bottom: 0.75rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .usage-details-list { | |
| display: flex; flex-direction: column; gap: 0.75rem; | |
| } | |
| .usage-detail-item { | |
| display: flex; align-items: center; gap: 0.75rem; | |
| padding: 0.75rem; background: var(--bg-primary); | |
| border: 1px solid var(--border-color); border-radius: 0.375rem; | |
| } | |
| .usage-detail-type { | |
| font-size: 0.75rem; font-weight: 600; background: var(--primary-color); | |
| color: var(--white); padding: 0.125rem 0.5rem; border-radius: 0.25rem; | |
| } | |
| .usage-detail-location { | |
| font-size: 0.875rem; color: var(--text-secondary); | |
| font-family: 'Courier New', monospace; word-break: break-all; flex: 1; | |
| } | |
| /* 删除确认模态框样式 */ | |
| .delete-confirm-modal { | |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; | |
| background: var(--overlay-bg); backdrop-filter: blur(4px); | |
| display: flex; justify-content: center; align-items: center; | |
| z-index: 1000; opacity: 0; visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .delete-confirm-modal.show { opacity: 1; visibility: visible; } | |
| .delete-modal-content { | |
| background: var(--bg-primary); border-radius: 0.75rem; | |
| width: 90%; max-width: 600px; max-height: 85vh; | |
| overflow: hidden; box-shadow: 0 25px 80px var(--neutral-shadow-40); | |
| display: flex; flex-direction: column; | |
| animation: modalSlideIn 0.3s ease; border: 2px solid transparent; | |
| } | |
| .delete-confirm-modal.used .delete-modal-content { border-color: var(--danger-color); box-shadow: 0 25px 80px var(--danger-30); } | |
| .delete-confirm-modal.unused .delete-modal-content { border-color: var(--warning-color); box-shadow: 0 25px 80px var(--warning-20); } | |
| .delete-modal-header { | |
| padding: 1.5rem 2rem; border-bottom: 1px solid var(--border-color); | |
| display: flex; justify-content: space-between; align-items: center; | |
| background: var(--bg-secondary); | |
| } | |
| .delete-modal-body { | |
| padding: 2rem; flex: 1; overflow-y: auto; max-height: calc(85vh - 160px); | |
| } | |
| .delete-warning { | |
| display: flex; align-items: flex-start; gap: 1rem; | |
| padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1.5rem; border: 2px solid; | |
| } | |
| .delete-warning.warning-used { background: linear-gradient(135deg, var(--danger-bg-alt) 0%, var(--bg-primary) 100%); border-color: var(--danger-border-light); color: var(--danger-color); } | |
| .delete-warning.warning-unused { background: linear-gradient(135deg, var(--warning-bg-alt) 0%, var(--bg-primary) 100%); border-color: var(--warning-border-light); color: var(--warning-text-dark); } | |
| .config-info { | |
| background: var(--bg-secondary); border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1.5rem; | |
| } | |
| .config-info-item { | |
| display: flex; justify-content: space-between; align-items: center; | |
| padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); | |
| } | |
| .usage-alert { | |
| display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; | |
| background: linear-gradient(135deg, var(--danger-bg) 0%, var(--danger-bg-alt) 100%); | |
| border: 1px solid var(--danger-border-light); border-radius: 0.5rem; margin-top: 1rem; | |
| } | |
| .delete-modal-footer { | |
| padding: 1.5rem 2rem; border-top: 1px solid var(--border-color); | |
| display: flex; justify-content: flex-end; gap: 1rem; background: var(--bg-secondary); | |
| } | |
| .btn-confirm-delete { position: relative; overflow: hidden; } | |
| .delete-confirm-modal.used .btn-confirm-delete { background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-text-dark) 100%); color: var(--white); box-shadow: 0 4px 15px var(--warning-40); animation: pulseDanger 2s infinite; } | |
| @keyframes pulseDanger { | |
| 0%, 100% { box-shadow: 0 4px 15px var(--danger-40); } | |
| 50% { box-shadow: 0 4px 15px var(--danger-70); } | |
| } | |
| /* 响应式设计 */ | |
| @media (max-width: 768px) { | |
| .search-controls { grid-template-columns: 1fr; gap: 1rem; } | |
| .config-list-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } | |
| .config-item-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } | |
| .config-item-path { max-width: 100%; margin: 0; } | |
| .config-modal-content { width: 95%; max-height: 90vh; } | |
| .config-file-info { grid-template-columns: 1fr; } | |
| .delete-modal-content { width: 95%; max-height: 90vh; } | |
| .config-info-item { flex-direction: column; align-items: flex-start; gap: 0.25rem; } | |
| .delete-modal-footer { flex-direction: column; } | |
| } | |
| /* 删除未绑定按钮样式 */ | |
| .btn-delete-unbound { | |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| margin-left: 8px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 2px 8px var(--danger-30); | |
| font-weight: 500; | |
| } | |
| .btn-delete-unbound:hover { | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-md); | |
| background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); | |
| } | |
| .btn-delete-unbound:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* 配置列表头部的刷新按钮样式 */ | |
| .btn-refresh { | |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| margin-left: 8px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); | |
| font-weight: 500; | |
| } | |
| .btn-refresh:hover { | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-md); | |
| background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); | |
| } | |
| .btn-refresh:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* 配置列表头部的打包下载按钮样式 */ | |
| .btn-download { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| margin-left: 8px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); | |
| font-weight: 500; | |
| } | |
| .btn-download:hover { | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-md); | |
| background: linear-gradient(135deg, #059669 0%, #10b981 100%); | |
| } | |
| .btn-download:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* 暗黑主题适配 */ | |
| [data-theme="dark"] .status-used { background: var(--success-bg); color: var(--success-text); } | |
| [data-theme="dark"] .status-unused { background: var(--warning-bg); color: var(--warning-text); } | |
| [data-theme="dark"] .status-invalid { background: var(--danger-bg); color: var(--danger-text); } | |
| [data-theme="dark"] .config-modal-content { background: var(--bg-primary); } | |
| [data-theme="dark"] .config-modal-header, [data-theme="dark"] .config-modal-footer { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); } | |
| [data-theme="dark"] .delete-modal-content { background: var(--bg-primary); } | |
| [data-theme="dark"] .delete-confirm-modal.used .delete-modal-header { background: linear-gradient(135deg, var(--danger-bg) 0%, var(--bg-primary) 100%); } | |
| [data-theme="dark"] .delete-confirm-modal.unused .delete-modal-header { background: linear-gradient(135deg, var(--warning-bg) 0%, var(--bg-primary) 100%); } | |
| [data-theme="dark"] .config-info { background: var(--bg-secondary); border-color: var(--border-color); } | |