Spaces:
Paused
Paused
| /** | |
| * AI Models Page - Enhanced Styles | |
| * Modern, functional UI with glassmorphism and animations | |
| */ | |
| /* ========================================================================= | |
| BACKGROUND EFFECTS | |
| ========================================================================= */ | |
| .background-effects { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| overflow: hidden; | |
| } | |
| .gradient-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(100px); | |
| opacity: 0.25; | |
| animation: float 25s ease-in-out infinite; | |
| } | |
| .orb-1 { | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, transparent 70%); | |
| top: -300px; | |
| left: -200px; | |
| animation-delay: 0s; | |
| } | |
| .orb-2 { | |
| width: 500px; | |
| height: 500px; | |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%); | |
| bottom: -250px; | |
| right: -150px; | |
| animation-delay: 8s; | |
| } | |
| .orb-3 { | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(34, 211, 238, 0.35) 0%, transparent 70%); | |
| top: 40%; | |
| left: 60%; | |
| transform: translate(-50%, -50%); | |
| animation-delay: 16s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(40px, -40px) scale(1.05); } | |
| 66% { transform: translate(-30px, 30px) scale(0.95); } | |
| } | |
| /* ========================================================================= | |
| PAGE HEADER | |
| ========================================================================= */ | |
| .page-header.glass-panel { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-6); | |
| background: rgba(17, 24, 39, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-xl); | |
| margin-bottom: var(--space-6); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .page-header.glass-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #8b5cf6, #3b82f6, #22d3ee); | |
| } | |
| .page-title { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| } | |
| .title-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); | |
| border-radius: var(--radius-lg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); | |
| animation: pulse-glow 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); } | |
| 50% { box-shadow: 0 4px 30px rgba(139, 92, 246, 0.6); } | |
| } | |
| .title-content h1 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--font-size-2xl); | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin: 0; | |
| } | |
| .page-subtitle { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| margin-top: var(--space-1); | |
| } | |
| .page-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| } | |
| .btn-gradient { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); | |
| } | |
| .btn-gradient:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5); | |
| } | |
| .btn-gradient.large { | |
| padding: var(--space-4) var(--space-6); | |
| font-size: var(--font-size-base); | |
| } | |
| .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-secondary); | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| border-color: rgba(255, 255, 255, 0.25); | |
| } | |
| .last-update { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| padding: var(--space-2) var(--space-3); | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: var(--radius-sm); | |
| } | |
| /* ========================================================================= | |
| STATS GRID | |
| ========================================================================= */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-6); | |
| } | |
| .stat-card.glass-card { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-4); | |
| padding: var(--space-5); | |
| background: rgba(17, 24, 39, 0.6); | |
| backdrop-filter: blur(15px); | |
| -webkit-backdrop-filter: blur(15px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-xl); | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card.glass-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .stat-icon { | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-lg); | |
| flex-shrink: 0; | |
| } | |
| .stat-icon.models-icon { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); | |
| color: #a78bfa; | |
| } | |
| .stat-icon.success-icon { | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%); | |
| color: #4ade80; | |
| } | |
| .stat-icon.warning-icon { | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); | |
| color: #fbbf24; | |
| } | |
| .stat-icon.info-icon { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); | |
| color: #60a5fa; | |
| } | |
| .stat-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .stat-value { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--font-size-2xl); | |
| font-weight: 700; | |
| color: var(--text-strong); | |
| line-height: 1; | |
| margin-bottom: var(--space-1); | |
| } | |
| .stat-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-2); | |
| } | |
| .stat-trend { | |
| font-size: var(--font-size-xs); | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-xs); | |
| display: inline-block; | |
| } | |
| .stat-trend.success { | |
| background: rgba(34, 197, 94, 0.15); | |
| color: #4ade80; | |
| } | |
| .stat-trend.warning { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: #fbbf24; | |
| } | |
| .stat-trend.info { | |
| background: rgba(59, 130, 246, 0.15); | |
| color: #60a5fa; | |
| } | |
| .stat-trend.neutral { | |
| background: rgba(148, 163, 184, 0.15); | |
| color: #94a3b8; | |
| } | |
| /* ========================================================================= | |
| TABS | |
| ========================================================================= */ | |
| .tabs-container.glass-panel { | |
| background: rgba(17, 24, 39, 0.6); | |
| backdrop-filter: blur(15px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-2); | |
| margin-bottom: var(--space-6); | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .tab-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| background: transparent; | |
| color: var(--text-muted); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .tab-btn:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-secondary); | |
| } | |
| .tab-btn.active { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ========================================================================= | |
| SECTION HEADER | |
| ========================================================================= */ | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-5); | |
| } | |
| .section-header h2 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--font-size-xl); | |
| font-weight: 700; | |
| color: var(--text-strong); | |
| margin: 0; | |
| } | |
| .filter-controls { | |
| display: flex; | |
| gap: var(--space-3); | |
| } | |
| .select-modern { | |
| padding: var(--space-2) var(--space-4); | |
| padding-right: var(--space-8); | |
| background: rgba(17, 24, 39, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 12px center; | |
| transition: all 0.3s ease; | |
| } | |
| .select-modern:hover { | |
| border-color: rgba(139, 92, 246, 0.5); | |
| } | |
| .select-modern:focus { | |
| outline: none; | |
| border-color: #8b5cf6; | |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); | |
| } | |
| .select-modern.large { | |
| padding: var(--space-3) var(--space-5); | |
| padding-right: var(--space-10); | |
| font-size: var(--font-size-base); | |
| } | |
| /* ========================================================================= | |
| MODELS GRID | |
| ========================================================================= */ | |
| .models-grid { | |
| display: grid; | |
| /* بهبود responsive برای صفحات مختلف */ | |
| grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); | |
| gap: var(--space-5); | |
| /* اطمینان از نمایش درست در تمام اندازهها */ | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| .model-card { | |
| background: rgba(17, 24, 39, 0.7); | |
| backdrop-filter: blur(15px); | |
| -webkit-backdrop-filter: blur(15px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-xl); | |
| overflow: hidden; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| display: flex; | |
| /* بهبود نمایش */ | |
| min-height: 320px; | |
| max-width: 100%; | |
| flex-direction: column; | |
| } | |
| .model-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #8b5cf6, #3b82f6); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.4s ease; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-6px); | |
| border-color: rgba(139, 92, 246, 0.3); | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); | |
| } | |
| .model-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .model-card.loaded::before { | |
| background: linear-gradient(90deg, #22c55e, #10b981); | |
| transform: scaleX(1); | |
| } | |
| .model-card.failed::before { | |
| background: linear-gradient(90deg, #ef4444, #f97316); | |
| transform: scaleX(1); | |
| } | |
| /* Model Card Components */ | |
| .model-details { | |
| padding: var(--space-4); | |
| flex: 1; | |
| } | |
| .detail-row { | |
| display: flex; | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-3); | |
| } | |
| .detail-item { | |
| flex: 1; | |
| } | |
| .detail-label { | |
| display: block; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: var(--space-1); | |
| } | |
| .detail-value { | |
| display: block; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-strong); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .detail-value.status-success { | |
| color: #4ade80; | |
| } | |
| .detail-value.status-warning { | |
| color: #fbbf24; | |
| } | |
| .detail-value.status-info { | |
| color: #60a5fa; | |
| } | |
| .model-description { | |
| padding: var(--space-4); | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| } | |
| .model-actions { | |
| padding: var(--space-4); | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| gap: var(--space-2); | |
| background: rgba(0, 0, 0, 0.15); | |
| } | |
| .model-actions .btn { | |
| flex: 1; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| padding: var(--space-2) var(--space-3); | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-xs); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .model-actions .btn:hover:not(:disabled) { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); | |
| border-color: rgba(139, 92, 246, 0.5); | |
| color: white; | |
| } | |
| .model-actions .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .model-actions .btn-primary { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); | |
| border-color: rgba(139, 92, 246, 0.5); | |
| color: white; | |
| } | |
| .model-actions .btn-secondary { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| color: var(--text-secondary); | |
| } | |
| .model-header { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| padding: var(--space-5); | |
| background: rgba(0, 0, 0, 0.2); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .model-icon { | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%); | |
| border-radius: var(--radius-lg); | |
| color: #a78bfa; | |
| transition: all 0.3s ease; | |
| } | |
| .model-card:hover .model-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| .model-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .model-name { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--font-size-base); | |
| font-weight: 700; | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-1) 0; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .model-type { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .model-status { | |
| padding: var(--space-1) var(--space-3); | |
| border-radius: var(--radius-full); | |
| font-size: var(--font-size-xs); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .model-status.loaded { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #4ade80; | |
| } | |
| .model-status.available { | |
| background: rgba(59, 130, 246, 0.2); | |
| color: #60a5fa; | |
| } | |
| .model-status.failed { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #f87171; | |
| } | |
| .model-status.cooldown { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: #fbbf24; | |
| } | |
| .model-body { | |
| padding: var(--space-5); | |
| } | |
| .model-id { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: var(--space-2) var(--space-3); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: var(--space-4); | |
| word-break: break-all; | |
| } | |
| .model-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-3); | |
| } | |
| .meta-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| padding: var(--space-1) var(--space-3); | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| .meta-badge svg { | |
| width: 12px; | |
| height: 12px; | |
| } | |
| .model-footer { | |
| padding: var(--space-4) var(--space-5); | |
| background: rgba(0, 0, 0, 0.15); | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .model-footer .btn { | |
| flex: 1; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| padding: var(--space-2) var(--space-3); | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-xs); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .model-footer .btn:hover { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); | |
| border-color: rgba(139, 92, 246, 0.5); | |
| color: white; | |
| } | |
| .model-footer .btn.reinit { | |
| background: rgba(245, 158, 11, 0.1); | |
| border-color: rgba(245, 158, 11, 0.3); | |
| color: #fbbf24; | |
| } | |
| .model-footer .btn.reinit:hover { | |
| background: rgba(245, 158, 11, 0.2); | |
| } | |
| /* ========================================================================= | |
| TEST PANEL | |
| ========================================================================= */ | |
| .test-panel.glass-panel, | |
| .health-panel.glass-panel, | |
| .catalog-panel.glass-panel { | |
| background: rgba(17, 24, 39, 0.7); | |
| backdrop-filter: blur(15px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-6); | |
| } | |
| .test-header, | |
| .health-header, | |
| .catalog-header { | |
| margin-bottom: var(--space-6); | |
| } | |
| .test-header h2, | |
| .health-header h2, | |
| .catalog-header h2 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--font-size-xl); | |
| font-weight: 700; | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-2) 0; | |
| } | |
| .test-header p, | |
| .health-header p, | |
| .catalog-header p { | |
| color: var(--text-muted); | |
| font-size: var(--font-size-sm); | |
| margin: 0; | |
| } | |
| .health-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| flex-wrap: wrap; | |
| gap: var(--space-4); | |
| } | |
| .test-form { | |
| max-width: 800px; | |
| } | |
| .form-group { | |
| margin-bottom: var(--space-5); | |
| } | |
| .form-label { | |
| display: block; | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-2); | |
| } | |
| .textarea-modern { | |
| width: 100%; | |
| padding: var(--space-4); | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-md); | |
| color: var(--text-strong); | |
| font-family: inherit; | |
| font-size: var(--font-size-base); | |
| resize: vertical; | |
| transition: all 0.3s ease; | |
| } | |
| .textarea-modern:focus { | |
| outline: none; | |
| border-color: #8b5cf6; | |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); | |
| } | |
| .test-actions { | |
| display: flex; | |
| gap: var(--space-3); | |
| margin-bottom: var(--space-6); | |
| } | |
| .example-texts { | |
| padding: var(--space-4); | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: var(--radius-lg); | |
| } | |
| .example-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| margin-bottom: var(--space-3); | |
| } | |
| .example-buttons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-2); | |
| } | |
| .example-btn { | |
| padding: var(--space-2) var(--space-4); | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .example-btn:hover { | |
| background: rgba(139, 92, 246, 0.2); | |
| border-color: rgba(139, 92, 246, 0.4); | |
| color: white; | |
| } | |
| /* Test Result */ | |
| .test-result { | |
| margin-top: var(--space-6); | |
| padding: var(--space-6); | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-xl); | |
| animation: fadeIn 0.4s ease; | |
| } | |
| .test-result.hidden { | |
| display: none; | |
| } | |
| .result-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-4); | |
| } | |
| .result-header h3 { | |
| font-size: var(--font-size-lg); | |
| font-weight: 600; | |
| color: var(--text-strong); | |
| margin: 0; | |
| } | |
| .result-time { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| .sentiment-display { | |
| text-align: center; | |
| padding: var(--space-6); | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); | |
| border-radius: var(--radius-xl); | |
| margin-bottom: var(--space-5); | |
| } | |
| .sentiment-emoji { | |
| font-size: 64px; | |
| margin-bottom: var(--space-3); | |
| } | |
| .sentiment-label { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--font-size-2xl); | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| margin-bottom: var(--space-2); | |
| } | |
| .sentiment-label.bullish { color: #4ade80; } | |
| .sentiment-label.bearish { color: #f87171; } | |
| .sentiment-label.neutral { color: #60a5fa; } | |
| .sentiment-confidence { | |
| font-size: var(--font-size-lg); | |
| color: var(--text-muted); | |
| } | |
| .result-details { | |
| background: rgba(0, 0, 0, 0.4); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-4); | |
| overflow: auto; | |
| max-height: 300px; | |
| } | |
| .result-json { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: var(--font-size-xs); | |
| color: #22d3ee; | |
| white-space: pre-wrap; | |
| margin: 0; | |
| } | |
| /* ========================================================================= | |
| HEALTH MONITOR | |
| ========================================================================= */ | |
| .health-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| gap: var(--space-4); | |
| } | |
| .health-card { | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-4); | |
| transition: all 0.3s ease; | |
| } | |
| .health-card:hover { | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .health-card.healthy { | |
| border-left: 3px solid #4ade80; | |
| } | |
| .health-card.degraded { | |
| border-left: 3px solid #fbbf24; | |
| } | |
| .health-card.unavailable { | |
| border-left: 3px solid #f87171; | |
| } | |
| .health-card.unknown { | |
| border-left: 3px solid #94a3b8; | |
| } | |
| .health-header-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: var(--space-3); | |
| } | |
| .health-model-name { | |
| font-weight: 600; | |
| color: var(--text-strong); | |
| font-size: var(--font-size-sm); | |
| } | |
| .health-status-badge { | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .health-status-badge.healthy { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #4ade80; | |
| } | |
| .health-status-badge.degraded { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: #fbbf24; | |
| } | |
| .health-status-badge.unavailable { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #f87171; | |
| } | |
| .health-status-badge.unknown { | |
| background: rgba(148, 163, 184, 0.2); | |
| color: #94a3b8; | |
| } | |
| .health-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--space-2); | |
| margin-bottom: var(--space-3); | |
| } | |
| .health-stat { | |
| text-align: center; | |
| padding: var(--space-2); | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: var(--radius-sm); | |
| } | |
| .health-stat-value { | |
| font-size: var(--font-size-lg); | |
| font-weight: 700; | |
| color: var(--text-strong); | |
| } | |
| .health-stat-label { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| .health-error { | |
| font-size: var(--font-size-xs); | |
| color: #f87171; | |
| background: rgba(239, 68, 68, 0.1); | |
| padding: var(--space-2); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: var(--space-3); | |
| word-break: break-word; | |
| } | |
| .health-actions { | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .health-actions .btn { | |
| flex: 1; | |
| padding: var(--space-2); | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-xs); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .health-actions .btn:hover { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); | |
| color: white; | |
| } | |
| /* ========================================================================= | |
| CATALOG | |
| ========================================================================= */ | |
| .catalog-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); | |
| gap: var(--space-5); | |
| } | |
| .catalog-category { | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-xl); | |
| overflow: hidden; | |
| } | |
| .category-header { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-4) var(--space-5); | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .category-header.crypto { | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%); | |
| } | |
| .category-header.financial { | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%); | |
| } | |
| .category-header.social { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%); | |
| } | |
| .category-header.trading { | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%); | |
| } | |
| .category-header.generation { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); | |
| } | |
| .category-header.summarization { | |
| background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.1) 100%); | |
| } | |
| .category-icon { | |
| font-size: 24px; | |
| } | |
| .category-header h3 { | |
| font-size: var(--font-size-base); | |
| font-weight: 700; | |
| color: var(--text-strong); | |
| margin: 0; | |
| } | |
| .category-models { | |
| padding: var(--space-4); | |
| } | |
| .catalog-model { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-3); | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: var(--radius-md); | |
| margin-bottom: var(--space-2); | |
| transition: all 0.3s ease; | |
| } | |
| .catalog-model:last-child { | |
| margin-bottom: 0; | |
| } | |
| .catalog-model:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .catalog-model-name { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-secondary); | |
| word-break: break-all; | |
| } | |
| .catalog-model-badge { | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-xs); | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .catalog-model-badge.public { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #4ade80; | |
| } | |
| .catalog-model-badge.auth { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: #fbbf24; | |
| } | |
| /* ========================================================================= | |
| LOADING & EMPTY STATES | |
| ========================================================================= */ | |
| .loading-state { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-16); | |
| text-align: center; | |
| } | |
| .loading-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 4px solid rgba(139, 92, 246, 0.2); | |
| border-top-color: #8b5cf6; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: var(--space-4); | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-text { | |
| color: var(--text-muted); | |
| font-size: var(--font-size-base); | |
| } | |
| .empty-state { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| padding: var(--space-16); | |
| color: var(--text-muted); | |
| } | |
| .empty-icon { | |
| font-size: 64px; | |
| margin-bottom: var(--space-4); | |
| opacity: 0.3; | |
| } | |
| /* ========================================================================= | |
| RESPONSIVE | |
| ========================================================================= */ | |
| @media (max-width: 1200px) { | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .page-header.glass-panel { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: var(--space-4); | |
| } | |
| .page-title { | |
| flex-direction: column; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .tabs { | |
| flex-wrap: wrap; | |
| } | |
| .tab-btn { | |
| flex: 1; | |
| justify-content: center; | |
| min-width: 120px; | |
| } | |
| .models-grid, | |
| .health-grid, | |
| .catalog-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .section-header { | |
| flex-direction: column; | |
| gap: var(--space-3); | |
| } | |
| .filter-controls { | |
| width: 100%; | |
| } | |
| .filter-controls select { | |
| flex: 1; | |
| } | |
| } | |