| .upload-area { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .drop-zone { | |
| border: 3px dashed var(--border); | |
| border-radius: 16px; | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| background: var(--bg-main); | |
| display: block; | |
| } | |
| .drop-zone:hover { | |
| border-color: var(--primary); | |
| } | |
| .drop-zone.dragging { | |
| border-color: var(--primary); | |
| background: rgba(102, 126, 234, 0.08); | |
| } | |
| .drop-zone-icon { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| } | |
| .drop-zone-title { | |
| font-size: 1.35rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .drop-zone-desc { | |
| color: var(--text-secondary); | |
| font-size: 1rem; | |
| } | |
| .file-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .file-info { | |
| padding: 1.25rem; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .file-icon { | |
| font-size: 1.5rem; | |
| } | |
| .file-name-display { | |
| flex: 1; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .file-size { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| flex-shrink: 0; | |
| } | |
| .file-status { | |
| font-size: 0.85rem; | |
| flex-shrink: 0; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| } | |
| .file-status-success { | |
| color: var(--success); | |
| } | |
| .file-status-error { | |
| color: var(--danger); | |
| } | |
| .file-remove-btn { | |
| flex-shrink: 0; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 6px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| font-size: 1.1rem; | |
| line-height: 1; | |
| } | |
| .file-remove-btn:hover { | |
| background: rgba(245, 101, 101, 0.15); | |
| color: var(--danger); | |
| } | |
| .upload-actions { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .upload-actions .btn-primary { | |
| flex: 1; | |
| } | |
| .btn-secondary { | |
| padding: 1rem 1.5rem; | |
| background: transparent; | |
| border: 2px solid var(--border); | |
| border-radius: 12px; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| white-space: nowrap; | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |