Spaces:
Sleeping
Sleeping
| /* static/css/style.css - Global Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); | |
| min-height: 100vh; | |
| color: #e2e8f0; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: 0.75rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| text-decoration: none; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #3b82f6, #2563eb); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px #3b82f640; | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 1px solid #475569; | |
| color: #e2e8f0; | |
| } | |
| .btn-outline:hover { | |
| border-color: #3b82f6; | |
| color: #3b82f6; | |
| } | |
| /* Cards */ | |
| .card { | |
| background: #1e293b; | |
| border-radius: 1.5rem; | |
| overflow: hidden; | |
| border: 1px solid #334155; | |
| margin-bottom: 1.5rem; | |
| } | |
| .card-header { | |
| padding: 1.25rem 1.5rem; | |
| border-bottom: 1px solid #334155; | |
| background: linear-gradient(135deg, #1e293b, #0f172a); | |
| } | |
| .card-body { | |
| padding: 1.5rem; | |
| } | |
| /* Form */ | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| color: #94a3b8; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 0.875rem 1rem; | |
| background: #0f172a; | |
| border: 1px solid #334155; | |
| border-radius: 0.75rem; | |
| color: #e2e8f0; | |
| font-size: 1rem; | |
| } | |
| .form-group input:focus { | |
| outline: none; | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px #3b82f620; | |
| } | |
| /* Text Input */ | |
| .text-input { | |
| width: 100%; | |
| min-height: 200px; | |
| padding: 1rem; | |
| background: #0f172a; | |
| border: 1px solid #334155; | |
| border-radius: 0.75rem; | |
| color: #e2e8f0; | |
| font-family: inherit; | |
| resize: vertical; | |
| } | |
| .text-input:focus { | |
| outline: none; | |
| border-color: #3b82f6; | |
| } | |
| /* Progress Bar */ | |
| .progress-bar-container { | |
| background: #334155; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| height: 0.5rem; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| transition: width 0.3s ease; | |
| } | |
| .progress-ai { | |
| background: linear-gradient(90deg, #ef4444, #dc2626); | |
| } | |
| .progress-human { | |
| background: linear-gradient(90deg, #10b981, #059669); | |
| } | |
| /* Upload Area */ | |
| .upload-area { | |
| border: 2px dashed #334155; | |
| border-radius: 1rem; | |
| padding: 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .upload-area:hover { | |
| border-color: #3b82f6; | |
| background: #33415530; | |
| } | |
| /* Toast */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| } | |
| .toast { | |
| background: #1e293b; | |
| border-left: 4px solid; | |
| padding: 12px 20px; | |
| border-radius: 12px; | |
| margin-top: 8px; | |
| box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| transform: translateX(400px); | |
| transition: transform 0.3s ease; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast.success { border-left-color: #10b981; } | |
| .toast.error { border-left-color: #ef4444; } | |
| .toast.info { border-left-color: #3b82f6; } | |
| /* Loading Overlay */ | |
| .loading-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(15, 23, 42, 0.9); | |
| backdrop-filter: blur(8px); | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 1rem; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .loading-overlay.show { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid #334155; | |
| border-top-color: #3b82f6; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .container { padding: 1rem; } | |
| .btn-group { flex-direction: column; } | |
| .btn { width: 100%; justify-content: center; } | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fadeInUp { | |
| animation: fadeInUp 0.6s ease-out; | |
| } |