|
|
| :root { |
| --color-bg: #0d0b1e; |
| --color-accent: #7f5af0; |
| --color-gold: #e5b400; |
| } |
|
|
| body { |
| background-color: var(--color-bg); |
| color: #fffffe; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .gradient-bg { |
| background: linear-gradient(135deg, #7f5af0, #6a4aa5); |
| } |
|
|
| .grid-card { |
| background: radial-gradient(circle, rgba(127,90,240,0.15) 0%, rgba(13,11,30,0.9) 100%); |
| border: 1px solid rgba(127, 90, 240, 0.3); |
| transition: all 0.3s ease; |
| } |
|
|
| .grid-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); |
| border-color: rgba(127, 90, 240, 0.6); |
| } |
|
|
| .file-upload { |
| border: 2px dashed #7f5af0; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
|
|
| .file-upload:hover { |
| background-color: rgba(127, 90, 240, 0.1); |
| } |
|
|
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
|
|
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(127, 90, 240, 0.7); } |
| 70% { box-shadow: 0 0 0 10px rgba(127, 90, 240, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(127, 90, 240, 0); } |
| } |
|
|
| .ticker-feed { |
| background: rgba(10, 8, 24, 0.9); |
| border-top: 1px solid rgba(127, 90, 240, 0.3); |
| color: #e5b400; |
| font-size: 0.875rem; |
| padding: 0.5rem 1rem; |
| white-space: nowrap; |
| overflow: hidden; |
| } |
|
|
| .ticker-content { |
| display: inline-block; |
| padding-left: 100%; |
| animation: ticker 30s linear infinite; |
| } |
|
|
| @keyframes ticker { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-100%); } |
| } |
|
|
| |
| #upload-modal, |
| #training-modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.5); |
| z-index: 1000; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| #upload-modal.hidden, |
| #training-modal.hidden { |
| display: none; |
| } |
|
|
| .modal-content { |
| background-color: #1a1a2e; |
| border-radius: 8px; |
| width: 90%; |
| max-width: 500px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| max-height: 90vh; |
| overflow-y: auto; |
| } |
|
|
| .modal-header { |
| padding: 1rem; |
| border-bottom: 1px solid #2d2d4d; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .modal-body { |
| padding: 1rem; |
| } |
|
|
| .modal-footer { |
| padding: 1rem; |
| border-top: 1px solid #2d2d4d; |
| display: flex; |
| justify-content: flex-end; |
| gap: 0.5rem; |
| } |
|
|
| |
| .form-group { |
| margin-bottom: 1rem; |
| } |
|
|
| .form-group label { |
| display: block; |
| margin-bottom: 0.5rem; |
| color: #a0a0c0; |
| } |
|
|
| .form-group input, |
| .form-group select, |
| .form-group textarea { |
| width: 100%; |
| padding: 0.5rem; |
| border-radius: 4px; |
| border: 1px solid #2d2d4d; |
| background-color: #0f0f1e; |
| color: #ffffff; |
| } |
|
|
| .form-group input:focus, |
| .form-group select:focus, |
| .form-group textarea:focus { |
| outline: none; |
| border-color: #7f5af0; |
| } |
|
|
| .btn { |
| padding: 0.5rem 1rem; |
| border-radius: 4px; |
| border: none; |
| cursor: pointer; |
| font-weight: 500; |
| } |
|
|
| .btn-primary { |
| background-color: #7f5af0; |
| color: white; |
| } |
|
|
| .btn-secondary { |
| background-color: #2d2d4d; |
| color: #a0a0c0; |
| } |
|
|
| .btn:hover { |
| opacity: 0.9; |
| } |
|
|
| |
| .training-status { |
| padding: 1rem; |
| border-radius: 4px; |
| margin: 1rem 0; |
| display: none; |
| } |
|
|
| .training-status.progress { |
| background-color: #1a1a2e; |
| border: 1px solid #7f5af0; |
| } |
|
|
| .training-status.success { |
| background-color: rgba(46, 204, 113, 0.1); |
| border: 1px solid #2ecc71; |
| } |
|
|
| .training-status.error { |
| background-color: rgba(231, 76, 60, 0.1); |
| border: 1px solid #e74c3c; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .main-content { |
| margin-left: 0; |
| } |
| } |
|
|
