Spaces:
Sleeping
Sleeping
| /* Crypto Intelligence Hub - Enhanced Stylesheet with Sidebar Navigation */ | |
| :root { | |
| /* Primary Colors */ | |
| --primary: #667eea; | |
| --primary-dark: #764ba2; | |
| --primary-light: #8b9aff; | |
| --secondary: #f093fb; | |
| --accent: #ff6b9d; | |
| /* Status Colors */ | |
| --success: #10b981; | |
| --danger: #ef4444; | |
| --warning: #f59e0b; | |
| --info: #3b82f6; | |
| /* Background Colors */ | |
| --dark: #0a0e1a; | |
| --dark-card: #111827; | |
| --dark-hover: #1f2937; | |
| --dark-elevated: #1a1f35; | |
| /* Text Colors */ | |
| --text-primary: #f9fafb; | |
| --text-secondary: #9ca3af; | |
| --text-muted: #6b7280; | |
| /* UI Elements */ | |
| --border: rgba(255, 255, 255, 0.1); | |
| --border-light: rgba(255, 255, 255, 0.05); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4); | |
| --glow: 0 0 20px rgba(102, 126, 234, 0.3); | |
| /* Sidebar */ | |
| --sidebar-width: 240px; | |
| --sidebar-collapsed-width: 70px; | |
| /* Gradients */ | |
| --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| --gradient-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); | |
| --gradient-pink: linear-gradient(135deg, #f093fb 0%, #ff6b9d 100%); | |
| /* Transitions */ | |
| --transition-fast: 0.2s ease; | |
| --transition-normal: 0.3s ease; | |
| --transition-slow: 0.5s ease; | |
| /* Spacing */ | |
| --spacing-xs: 4px; | |
| --spacing-sm: 8px; | |
| --spacing-md: 16px; | |
| --spacing-lg: 24px; | |
| --spacing-xl: 32px; | |
| --spacing-2xl: 48px; | |
| /* Border Radius */ | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 20px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(135deg, var(--dark) 0%, #1a1f35 50%, #0f1729 100%); | |
| background-attachment: fixed; | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| font-size: 15px; | |
| } | |
| /* Animated background particles */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.05) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* ============================================================================= | |
| Layout Structure | |
| ============================================================================= */ | |
| .app-layout { | |
| display: flex; | |
| min-height: 100vh; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* ============================================================================= | |
| Sidebar Navigation | |
| ============================================================================= */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: linear-gradient(180deg, rgba(17, 24, 39, 0.95) 0%, rgba(31, 41, 55, 0.9) 100%); | |
| backdrop-filter: blur(20px); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100vh; | |
| z-index: 1000; | |
| transition: transform var(--transition-normal); | |
| box-shadow: var(--shadow); | |
| } | |
| .sidebar-header { | |
| padding: 16px 16px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .sidebar-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: var(--transition-normal); | |
| } | |
| .sidebar-logo:hover { | |
| opacity: 0.9; | |
| transform: scale(1.02); | |
| } | |
| .sidebar-logo .logo-icon { | |
| width: 36px; | |
| height: 36px; | |
| background: var(--gradient-purple); | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 22px; | |
| color: white; | |
| box-shadow: var(--glow); | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| .sidebar-logo .logo-text h1 { | |
| font-size: 17px; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 2px; | |
| } | |
| .sidebar-logo .logo-text p { | |
| font-size: 10px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .sidebar-toggle-btn { | |
| display: none; | |
| width: 32px; | |
| height: 32px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .sidebar-toggle-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: rotate(90deg); | |
| } | |
| /* Sidebar Navigation */ | |
| .sidebar-nav { | |
| flex: 1; | |
| padding: 14px 12px; | |
| overflow-y: auto; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 11px 14px; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: 10px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 600; | |
| transition: all var(--transition-fast); | |
| width: 100%; | |
| text-align: left; | |
| margin-bottom: 6px; | |
| } | |
| .nav-item svg { | |
| width: 18px; | |
| height: 18px; | |
| flex-shrink: 0; | |
| stroke-width: 2; | |
| } | |
| .nav-item:hover { | |
| background: rgba(102, 126, 234, 0.1); | |
| border-color: var(--primary); | |
| color: var(--text-primary); | |
| transform: translateX(5px); | |
| } | |
| .nav-item.active { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| border-color: var(--primary); | |
| color: white; | |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); | |
| } | |
| /* Sidebar Footer */ | |
| .sidebar-footer { | |
| padding: 14px 16px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px; | |
| background: rgba(16, 185, 129, 0.15); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| border-radius: 10px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| margin-bottom: 12px; | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| background: var(--success); | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.2); } | |
| } | |
| .sidebar-stats { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .stat-mini { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 12px; | |
| background: rgba(31, 41, 55, 0.6); | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| } | |
| .stat-mini svg { | |
| width: 16px; | |
| height: 16px; | |
| color: var(--primary); | |
| margin-bottom: 5px; | |
| stroke-width: 2; | |
| } | |
| .stat-mini span { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| display: block; | |
| visibility: visible; | |
| opacity: 1; | |
| min-height: 1.2em; | |
| line-height: 1.2; | |
| } | |
| /* Sidebar Overlay for Mobile */ | |
| .sidebar-overlay { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(5px); | |
| z-index: 999; | |
| opacity: 0; | |
| transition: opacity var(--transition-normal); | |
| } | |
| .sidebar-overlay.active { | |
| display: block; | |
| opacity: 1; | |
| } | |
| /* ============================================================================= | |
| Main Wrapper | |
| ============================================================================= */ | |
| .main-wrapper { | |
| flex: 1; | |
| margin-left: var(--sidebar-width); | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| transition: margin-left var(--transition-normal); | |
| } | |
| /* Top Header */ | |
| .top-header { | |
| background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.7) 100%); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border); | |
| padding: 20px 30px; | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .hamburger-btn { | |
| display: none; | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(102, 126, 234, 0.2); | |
| border: 1px solid var(--primary); | |
| border-radius: 10px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| font-size: 18px; | |
| transition: var(--transition-fast); | |
| } | |
| .hamburger-btn:hover { | |
| background: var(--gradient-purple); | |
| transform: scale(1.05); | |
| } | |
| .header-title { | |
| flex: 1; | |
| } | |
| .header-title h2 { | |
| font-size: 24px; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 2px; | |
| } | |
| .header-title p { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .icon-btn { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(31, 41, 55, 0.6); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| } | |
| .icon-btn:hover { | |
| background: var(--gradient-purple); | |
| border-color: var(--primary); | |
| transform: translateY(-2px); | |
| } | |
| /* ============================================================================= | |
| Content Area | |
| ============================================================================= */ | |
| .content-area { | |
| flex: 1; | |
| padding: 30px; | |
| overflow-y: auto; | |
| } | |
| .tab-panel { | |
| display: none; | |
| } | |
| .tab-panel.active { | |
| display: block; | |
| animation: fadeIn 0.3s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ============================================================================= | |
| Cards & Components | |
| ============================================================================= */ | |
| .glass-card { | |
| background: rgba(17, 24, 39, 0.7); | |
| backdrop-filter: blur(12px) saturate(180%); | |
| border: 1px solid var(--border); | |
| border-radius: 18px; | |
| padding: 28px; | |
| margin-bottom: 24px; | |
| transition: all var(--transition-normal); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--primary), transparent); | |
| opacity: 0; | |
| transition: opacity var(--transition-normal); | |
| } | |
| .glass-card:hover { | |
| border-color: rgba(102, 126, 234, 0.4); | |
| box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2), 0 4px 20px rgba(0, 0, 0, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .glass-card:hover::before { | |
| opacity: 1; | |
| } | |
| .glass-card h3 { | |
| font-size: 22px; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| color: var(--text-primary); | |
| border-bottom: 2px solid var(--border); | |
| padding-bottom: 12px; | |
| letter-spacing: -0.02em; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .glass-card h3::before { | |
| content: ''; | |
| width: 4px; | |
| height: 22px; | |
| background: var(--gradient-purple); | |
| border-radius: 2px; | |
| flex-shrink: 0; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 24px; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .card-header h3 { | |
| margin-bottom: 0; | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| flex: 1; | |
| min-width: 200px; | |
| } | |
| .card-header > div:first-child { | |
| flex: 1; | |
| min-width: 200px; | |
| } | |
| .card-header > div:first-child p { | |
| margin-top: 6px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| /* Tablet: 2 columns */ | |
| @media (max-width: 1024px) and (min-width: 769px) { | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* Mobile: 1 column */ | |
| @media (max-width: 768px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .stat-card { | |
| background: linear-gradient(135deg, rgba(17, 24, 39, 0.85), rgba(31, 41, 55, 0.7)); | |
| border: 1px solid var(--border); | |
| border-radius: 18px; | |
| padding: 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| transition: all var(--transition-normal); | |
| backdrop-filter: blur(12px) saturate(180%); | |
| position: relative; | |
| overflow: hidden; | |
| min-height: 130px; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%); | |
| opacity: 0; | |
| transition: var(--transition-normal); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-6px); | |
| box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(102, 126, 234, 0.2); | |
| border-color: rgba(102, 126, 234, 0.4); | |
| } | |
| .stat-card:hover::before { | |
| opacity: 1; | |
| } | |
| .stat-card.gradient-purple { | |
| border-left: 4px solid #667eea; | |
| } | |
| .stat-card.gradient-green { | |
| border-left: 4px solid #10b981; | |
| } | |
| .stat-card.gradient-blue { | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .stat-card.gradient-orange { | |
| border-left: 4px solid #f59e0b; | |
| } | |
| .stat-icon { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 28px; | |
| flex-shrink: 0; | |
| transition: transform var(--transition-normal); | |
| } | |
| .stat-card:hover .stat-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| .stat-card.gradient-purple .stat-icon { | |
| background: var(--gradient-purple); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); | |
| } | |
| .stat-card.gradient-green .stat-icon { | |
| background: var(--gradient-green); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3); | |
| } | |
| .stat-card.gradient-blue .stat-icon { | |
| background: var(--gradient-blue); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3); | |
| } | |
| .stat-card.gradient-orange .stat-icon { | |
| background: var(--gradient-orange); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3); | |
| } | |
| .stat-content { | |
| flex: 1; | |
| } | |
| .stat-value { | |
| font-size: 36px; | |
| font-weight: 800; | |
| color: var(--text-primary); | |
| margin-bottom: 6px; | |
| display: block; | |
| visibility: visible; | |
| opacity: 1; | |
| min-height: 1.2em; | |
| line-height: 1.2; | |
| letter-spacing: -0.03em; | |
| background: linear-gradient(135deg, var(--text-primary), rgba(255, 255, 255, 0.8)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 8px; | |
| } | |
| .stat-trend { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin-top: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-weight: 500; | |
| } | |
| .stat-trend i { | |
| color: var(--success); | |
| } | |
| /* Grid Layouts */ | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 20px; | |
| } | |
| /* ============================================================================= | |
| Forms | |
| ============================================================================= */ | |
| .form-group { | |
| margin-bottom: 24px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| letter-spacing: 0.01em; | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| width: 100%; | |
| padding: 14px 16px; | |
| background: rgba(31, 41, 55, 0.7); | |
| border: 1.5px solid var(--border); | |
| border-radius: 12px; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 15px; | |
| transition: all var(--transition-fast); | |
| backdrop-filter: blur(8px); | |
| } | |
| .form-group input:hover, | |
| .form-group textarea:hover, | |
| .form-group select:hover { | |
| border-color: rgba(102, 126, 234, 0.3); | |
| background: rgba(31, 41, 55, 0.8); | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 4px 12px rgba(102, 126, 234, 0.1); | |
| background: rgba(31, 41, 55, 0.9); | |
| transform: translateY(-1px); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 100px; | |
| line-height: 1.6; | |
| } | |
| .form-group select { | |
| 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 12 12'%3E%3Cpath fill='%239ca3af' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 14px center; | |
| padding-right: 40px; | |
| } | |
| /* ============================================================================= | |
| Buttons | |
| ============================================================================= */ | |
| .btn-primary, .btn-refresh { | |
| padding: 14px 28px; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| border: none; | |
| border-radius: 12px; | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: 15px; | |
| position: relative; | |
| overflow: hidden; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| letter-spacing: 0.01em; | |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); | |
| } | |
| .btn-primary::before, .btn-refresh::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.25); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .btn-primary:hover, .btn-refresh:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5); | |
| background: linear-gradient(135deg, var(--primary-light), var(--primary)); | |
| } | |
| .btn-primary:active, .btn-refresh:active { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); | |
| } | |
| .btn-primary:hover::before, .btn-refresh:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .btn-refresh { | |
| background: rgba(102, 126, 234, 0.15); | |
| border: 1.5px solid var(--primary); | |
| box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2); | |
| } | |
| .btn-refresh:hover { | |
| background: rgba(102, 126, 234, 0.25); | |
| border-color: var(--primary-light); | |
| } | |
| /* ============================================================================= | |
| Tables | |
| ============================================================================= */ | |
| table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| table th, | |
| table td { | |
| padding: 16px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| white-space: nowrap; | |
| transition: background-color var(--transition-fast); | |
| } | |
| table td:nth-child(3), | |
| table td:nth-child(5), | |
| table td:nth-child(6) { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 14px; | |
| } | |
| table th { | |
| background: linear-gradient(135deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.8)); | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| letter-spacing: 0.05em; | |
| border-bottom: 2px solid var(--border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| } | |
| table tbody tr { | |
| transition: all var(--transition-fast); | |
| } | |
| table tbody tr:hover { | |
| background: rgba(102, 126, 234, 0.08); | |
| transform: scale(1.01); | |
| } | |
| table tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| table tbody tr td:first-child { | |
| font-weight: 600; | |
| } | |
| /* ============================================================================= | |
| Alerts | |
| ============================================================================= */ | |
| .alert { | |
| padding: 16px 20px; | |
| border-radius: 12px; | |
| margin-bottom: 20px; | |
| border-left: 4px solid; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| backdrop-filter: blur(8px); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| transition: all var(--transition-fast); | |
| } | |
| .alert:hover { | |
| transform: translateX(4px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .alert-success { | |
| background: rgba(16, 185, 129, 0.15); | |
| border-left-color: var(--success); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| border-left-width: 4px; | |
| color: var(--success); | |
| } | |
| .alert-error { | |
| background: rgba(239, 68, 68, 0.15); | |
| border-left-color: var(--danger); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| border-left-width: 4px; | |
| color: var(--danger); | |
| } | |
| .alert-warning { | |
| background: rgba(245, 158, 11, 0.15); | |
| border-left-color: var(--warning); | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| border-left-width: 4px; | |
| color: var(--warning); | |
| } | |
| .alert-info { | |
| background: rgba(59, 130, 246, 0.15); | |
| border-left-color: var(--info); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| border-left-width: 4px; | |
| color: var(--info); | |
| } | |
| /* ============================================================================= | |
| Loading States | |
| ============================================================================= */ | |
| .loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px; | |
| color: var(--text-secondary); | |
| } | |
| .spinner { | |
| border: 3px solid var(--border); | |
| border-top: 3px solid var(--primary); | |
| border-right: 3px solid transparent; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 0.8s linear infinite; | |
| margin: 0 auto 15px; | |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* ============================================================================= | |
| Utility Classes | |
| ============================================================================= */ | |
| .text-secondary { | |
| color: var(--text-secondary); | |
| margin-bottom: 15px; | |
| } | |
| /* ============================================================================= | |
| Scrollbar | |
| ============================================================================= */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--dark-card); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--gradient-purple); | |
| border-radius: 5px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-light); | |
| } | |
| /* ============================================================================= | |
| Responsive Design (Mobile First) | |
| ============================================================================= */ | |
| @media (max-width: 768px) { | |
| /* Hide sidebar by default on mobile */ | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .sidebar-toggle-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Show hamburger button */ | |
| .hamburger-btn { | |
| display: flex; | |
| } | |
| /* Adjust main wrapper */ | |
| .main-wrapper { | |
| margin-left: 0; | |
| } | |
| /* Adjust content padding */ | |
| .content-area { | |
| padding: 15px; | |
| } | |
| .top-header { | |
| padding: 15px 20px; | |
| } | |
| /* Adjust grids */ | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .grid-2 { | |
| grid-template-columns: 1fr; | |
| } | |
| /* Adjust stat cards */ | |
| .stat-card { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .stat-card .stat-icon { | |
| width: 60px; | |
| height: 60px; | |
| font-size: 28px; | |
| } | |
| /* Adjust header title */ | |
| .header-title h2 { | |
| font-size: 18px; | |
| } | |
| .header-title p { | |
| font-size: 11px; | |
| } | |
| } | |
| /* Tablet adjustments */ | |
| @media (min-width: 769px) and (max-width: 1024px) { | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* ============================================================================= | |
| Large Screen Optimizations (1440px+) | |
| ============================================================================= */ | |
| @media (min-width: 1440px) { | |
| :root { | |
| --sidebar-width: 320px; | |
| } | |
| body { | |
| font-size: 16px; | |
| } | |
| .sidebar-header { | |
| padding: 30px 25px; | |
| } | |
| .sidebar-logo .logo-icon { | |
| width: 50px; | |
| height: 50px; | |
| font-size: 24px; | |
| } | |
| .sidebar-logo .logo-text h1 { | |
| font-size: 22px; | |
| } | |
| .sidebar-logo .logo-text p { | |
| font-size: 12px; | |
| } | |
| .nav-item { | |
| padding: 16px 20px; | |
| font-size: 16px; | |
| gap: 14px; | |
| } | |
| .nav-item svg { | |
| width: 22px; | |
| height: 22px; | |
| } | |
| .top-header { | |
| padding: 25px 40px; | |
| } | |
| .header-title h2 { | |
| font-size: 28px; | |
| } | |
| .header-title p { | |
| font-size: 14px; | |
| } | |
| .icon-btn { | |
| width: 44px; | |
| height: 44px; | |
| font-size: 18px; | |
| } | |
| .content-area { | |
| padding: 40px; | |
| } | |
| .glass-card { | |
| padding: 30px; | |
| border-radius: 18px; | |
| margin-bottom: 25px; | |
| } | |
| .glass-card h3 { | |
| font-size: 24px; | |
| margin-bottom: 25px; | |
| padding-bottom: 12px; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 25px; | |
| } | |
| .stat-card { | |
| padding: 30px; | |
| border-radius: 18px; | |
| } | |
| .stat-icon { | |
| width: 80px; | |
| height: 80px; | |
| font-size: 36px; | |
| } | |
| .stat-value { | |
| font-size: 42px; | |
| } | |
| .stat-label { | |
| font-size: 15px; | |
| } | |
| .stat-trend { | |
| font-size: 13px; | |
| } | |
| .grid-2 { | |
| grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); | |
| gap: 25px; | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| } | |
| .form-group label { | |
| font-size: 15px; | |
| margin-bottom: 10px; | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| padding: 14px; | |
| font-size: 15px; | |
| border-radius: 12px; | |
| } | |
| .btn-primary, .btn-refresh { | |
| padding: 14px 28px; | |
| font-size: 15px; | |
| border-radius: 12px; | |
| } | |
| .news-card { | |
| padding: 25px; | |
| border-radius: 18px; | |
| gap: 25px; | |
| } | |
| .news-card-image { | |
| width: 140px; | |
| height: 140px; | |
| font-size: 36px; | |
| } | |
| .news-card-title { | |
| font-size: 20px; | |
| } | |
| .news-card-excerpt { | |
| font-size: 15px; | |
| } | |
| .sentiment-gauge-container { | |
| width: 350px; | |
| height: 175px; | |
| } | |
| .ai-result-card { | |
| padding: 30px; | |
| } | |
| .ai-result-header h4 { | |
| font-size: 24px; | |
| } | |
| .ai-result-metric-value { | |
| font-size: 42px; | |
| } | |
| } | |
| /* ============================================================================= | |
| Extra Large Screen Optimizations (1920px+) | |
| ============================================================================= */ | |
| @media (min-width: 1920px) { | |
| :root { | |
| --sidebar-width: 360px; | |
| } | |
| body { | |
| font-size: 17px; | |
| } | |
| .sidebar-header { | |
| padding: 35px 30px; | |
| } | |
| .sidebar-logo .logo-icon { | |
| width: 55px; | |
| height: 55px; | |
| font-size: 26px; | |
| } | |
| .sidebar-logo .logo-text h1 { | |
| font-size: 24px; | |
| } | |
| .sidebar-logo .logo-text p { | |
| font-size: 13px; | |
| } | |
| .nav-item { | |
| padding: 18px 24px; | |
| font-size: 17px; | |
| gap: 16px; | |
| margin-bottom: 10px; | |
| } | |
| .nav-item svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .top-header { | |
| padding: 30px 50px; | |
| } | |
| .header-title h2 { | |
| font-size: 32px; | |
| } | |
| .header-title p { | |
| font-size: 15px; | |
| } | |
| .icon-btn { | |
| width: 48px; | |
| height: 48px; | |
| font-size: 20px; | |
| } | |
| .content-area { | |
| padding: 50px; | |
| max-width: 1920px; | |
| margin: 0 auto; | |
| } | |
| .glass-card { | |
| padding: 35px; | |
| border-radius: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .glass-card h3 { | |
| font-size: 26px; | |
| margin-bottom: 30px; | |
| padding-bottom: 15px; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 30px; | |
| margin-bottom: 40px; | |
| } | |
| .stat-card { | |
| padding: 35px; | |
| border-radius: 20px; | |
| gap: 25px; | |
| } | |
| .stat-icon { | |
| width: 90px; | |
| height: 90px; | |
| font-size: 40px; | |
| } | |
| .stat-value { | |
| font-size: 48px; | |
| } | |
| .stat-label { | |
| font-size: 16px; | |
| } | |
| .stat-trend { | |
| font-size: 14px; | |
| } | |
| .grid-2 { | |
| grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); | |
| gap: 30px; | |
| } | |
| .form-group { | |
| margin-bottom: 30px; | |
| } | |
| .form-group label { | |
| font-size: 16px; | |
| margin-bottom: 12px; | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| padding: 16px; | |
| font-size: 16px; | |
| border-radius: 14px; | |
| } | |
| .btn-primary, .btn-refresh { | |
| padding: 16px 32px; | |
| font-size: 16px; | |
| border-radius: 14px; | |
| } | |
| .news-card { | |
| padding: 30px; | |
| border-radius: 20px; | |
| gap: 30px; | |
| margin-bottom: 25px; | |
| } | |
| .news-card-image { | |
| width: 160px; | |
| height: 160px; | |
| font-size: 40px; | |
| } | |
| .news-card-title { | |
| font-size: 22px; | |
| } | |
| .news-card-excerpt { | |
| font-size: 16px; | |
| } | |
| .sentiment-gauge-container { | |
| width: 400px; | |
| height: 200px; | |
| } | |
| .ai-result-card { | |
| padding: 35px; | |
| } | |
| .ai-result-header h4 { | |
| font-size: 26px; | |
| } | |
| .ai-result-metric-value { | |
| font-size: 48px; | |
| } | |
| table th, | |
| table td { | |
| padding: 16px; | |
| font-size: 16px; | |
| } | |
| } | |
| /* ============================================================================= | |
| Ultra-Wide Screen Optimizations (2560px+) | |
| ============================================================================= */ | |
| @media (min-width: 2560px) { | |
| :root { | |
| --sidebar-width: 400px; | |
| } | |
| body { | |
| font-size: 18px; | |
| } | |
| .sidebar-header { | |
| padding: 40px 35px; | |
| } | |
| .sidebar-logo .logo-icon { | |
| width: 60px; | |
| height: 60px; | |
| font-size: 28px; | |
| } | |
| .sidebar-logo .logo-text h1 { | |
| font-size: 26px; | |
| } | |
| .sidebar-logo .logo-text p { | |
| font-size: 14px; | |
| } | |
| .nav-item { | |
| padding: 20px 28px; | |
| font-size: 18px; | |
| gap: 18px; | |
| margin-bottom: 12px; | |
| border-radius: 14px; | |
| } | |
| .nav-item svg { | |
| width: 26px; | |
| height: 26px; | |
| } | |
| .top-header { | |
| padding: 35px 60px; | |
| } | |
| .header-title h2 { | |
| font-size: 36px; | |
| } | |
| .header-title p { | |
| font-size: 16px; | |
| } | |
| .icon-btn { | |
| width: 52px; | |
| height: 52px; | |
| font-size: 22px; | |
| } | |
| .content-area { | |
| padding: 60px; | |
| max-width: 2400px; | |
| } | |
| .glass-card { | |
| padding: 40px; | |
| border-radius: 24px; | |
| margin-bottom: 35px; | |
| } | |
| .glass-card h3 { | |
| font-size: 28px; | |
| margin-bottom: 35px; | |
| padding-bottom: 18px; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 35px; | |
| margin-bottom: 50px; | |
| } | |
| .stat-card { | |
| padding: 40px; | |
| border-radius: 24px; | |
| gap: 30px; | |
| } | |
| .stat-icon { | |
| width: 100px; | |
| height: 100px; | |
| font-size: 44px; | |
| } | |
| .stat-value { | |
| font-size: 54px; | |
| } | |
| .stat-label { | |
| font-size: 17px; | |
| } | |
| .stat-trend { | |
| font-size: 15px; | |
| } | |
| .grid-2 { | |
| grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); | |
| gap: 35px; | |
| } | |
| .form-group { | |
| margin-bottom: 35px; | |
| } | |
| .form-group label { | |
| font-size: 17px; | |
| margin-bottom: 14px; | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| padding: 18px; | |
| font-size: 17px; | |
| border-radius: 16px; | |
| } | |
| .btn-primary, .btn-refresh { | |
| padding: 18px 36px; | |
| font-size: 17px; | |
| border-radius: 16px; | |
| } | |
| .news-card { | |
| padding: 35px; | |
| border-radius: 24px; | |
| gap: 35px; | |
| margin-bottom: 30px; | |
| } | |
| .news-card-image { | |
| width: 180px; | |
| height: 180px; | |
| font-size: 44px; | |
| } | |
| .news-card-title { | |
| font-size: 24px; | |
| } | |
| .news-card-excerpt { | |
| font-size: 17px; | |
| } | |
| .sentiment-gauge-container { | |
| width: 450px; | |
| height: 225px; | |
| } | |
| .ai-result-card { | |
| padding: 40px; | |
| } | |
| .ai-result-header h4 { | |
| font-size: 28px; | |
| } | |
| .ai-result-metric-value { | |
| font-size: 54px; | |
| } | |
| table th, | |
| table td { | |
| padding: 18px; | |
| font-size: 17px; | |
| } | |
| } | |
| /* ============================================================================= | |
| Light Theme | |
| ============================================================================= */ | |
| body.light-theme { | |
| --dark: #f3f4f6; | |
| --dark-card: #ffffff; | |
| --dark-hover: #f9fafb; | |
| --dark-elevated: #e5e7eb; | |
| --text-primary: #111827; | |
| --text-secondary: #6b7280; | |
| --text-muted: #9ca3af; | |
| --border: rgba(0, 0, 0, 0.1); | |
| --border-light: rgba(0, 0, 0, 0.05); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15); | |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #d1d5db 100%); | |
| } | |
| body.light-theme::before { | |
| background-image: | |
| radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.08) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.08) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%); | |
| } | |
| body.light-theme .sidebar { | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%); | |
| } | |
| body.light-theme .top-header { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.7) 100%); | |
| } | |
| body.light-theme .glass-card, | |
| body.light-theme .stat-card { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| } | |
| body.light-theme .form-group input, | |
| body.light-theme .form-group textarea, | |
| body.light-theme .form-group select { | |
| background: rgba(249, 250, 251, 0.8); | |
| } | |
| body.light-theme table th { | |
| background: rgba(249, 250, 251, 0.8); | |
| } | |
| body.light-theme ::-webkit-scrollbar-track { | |
| background: #e5e7eb; | |
| } | |
| /* ============================================================================= | |
| News Cards - Modern Design | |
| ============================================================================= */ | |
| .news-card { | |
| background: rgba(17, 24, 39, 0.6); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| gap: 20px; | |
| transition: all var(--transition-normal); | |
| cursor: pointer; | |
| } | |
| .news-card:hover { | |
| border-color: rgba(102, 126, 234, 0.5); | |
| box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .news-card-image { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 12px; | |
| object-fit: cover; | |
| flex-shrink: 0; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 32px; | |
| } | |
| .news-card-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .news-card-title { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 12px; | |
| line-height: 1.5; | |
| letter-spacing: -0.01em; | |
| } | |
| .news-card-title a { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| transition: color var(--transition-fast); | |
| } | |
| .news-card-title a:hover { | |
| color: var(--primary); | |
| } | |
| .news-card-excerpt { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| margin-bottom: 12px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .news-card-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| flex-wrap: wrap; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .news-card-source { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| background: rgba(102, 126, 234, 0.1); | |
| border-radius: 6px; | |
| font-weight: 600; | |
| } | |
| .news-card-time { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .news-card-time svg { | |
| width: 14px; | |
| height: 14px; | |
| } | |
| .news-card-symbols { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .symbol-badge { | |
| padding: 3px 8px; | |
| background: rgba(59, 130, 246, 0.15); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--info); | |
| } | |
| /* ============================================================================= | |
| Sentiment Visualizations | |
| ============================================================================= */ | |
| .sentiment-gauge-container { | |
| position: relative; | |
| width: 300px; | |
| height: 150px; | |
| margin: 20px auto; | |
| } | |
| .sentiment-gauge { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .sentiment-trend-arrow { | |
| display: inline-block; | |
| width: 24px; | |
| height: 24px; | |
| margin: 0 8px; | |
| vertical-align: middle; | |
| animation: pulse-arrow 2s ease-in-out infinite; | |
| } | |
| .sentiment-trend-arrow.bullish { | |
| color: var(--success); | |
| } | |
| .sentiment-trend-arrow.bearish { | |
| color: var(--danger); | |
| transform: rotate(180deg); | |
| } | |
| .sentiment-trend-arrow.neutral { | |
| color: var(--warning); | |
| transform: rotate(90deg); | |
| } | |
| @keyframes pulse-arrow { | |
| 0%, 100% { transform: translateY(0); opacity: 1; } | |
| 50% { transform: translateY(-5px); opacity: 0.7; } | |
| } | |
| .confidence-bar-container { | |
| margin: 15px 0; | |
| } | |
| .confidence-bar-label { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .confidence-bar { | |
| width: 100%; | |
| height: 12px; | |
| background: rgba(31, 41, 55, 0.6); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .confidence-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary), var(--primary-light)); | |
| border-radius: 6px; | |
| transition: width 1s ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .confidence-bar-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .sentiment-badge { | |
| display: inline-block; | |
| padding: 6px 12px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .sentiment-badge.bullish, | |
| .sentiment-badge.positive { | |
| background: rgba(16, 185, 129, 0.2); | |
| border: 1px solid rgba(16, 185, 129, 0.4); | |
| color: var(--success); | |
| } | |
| .sentiment-badge.bearish, | |
| .sentiment-badge.negative { | |
| background: rgba(239, 68, 68, 0.2); | |
| border: 1px solid rgba(239, 68, 68, 0.4); | |
| color: var(--danger); | |
| } | |
| .sentiment-badge.neutral { | |
| background: rgba(245, 158, 11, 0.2); | |
| border: 1px solid rgba(245, 158, 11, 0.4); | |
| color: var(--warning); | |
| } | |
| .ai-result-card { | |
| background: rgba(17, 24, 39, 0.6); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 25px; | |
| margin-top: 20px; | |
| } | |
| .ai-result-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .ai-result-header h4 { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .ai-result-metric { | |
| text-align: center; | |
| } | |
| .ai-result-metric-value { | |
| font-size: 36px; | |
| font-weight: 800; | |
| margin-bottom: 5px; | |
| } | |
| .ai-result-metric-label { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* ============================================================================= | |
| Utility Classes | |
| ============================================================================= */ | |
| .time-ago { | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .icon-btn svg { | |
| width: 18px; | |
| height: 18px; | |
| stroke-width: 2; | |
| } | |
| .hamburger-btn svg { | |
| width: 24px; | |
| height: 24px; | |
| stroke-width: 2; | |
| } | |
| .sidebar-toggle-btn svg { | |
| width: 20px; | |
| height: 20px; | |
| stroke-width: 2; | |
| } | |
| .btn-primary svg, | |
| .btn-refresh svg { | |
| width: 16px; | |
| height: 16px; | |
| stroke-width: 2; | |
| vertical-align: middle; | |
| } | |
| /* Model Status Styles */ | |
| .model-status { | |
| display: inline-block; | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .model-status.available { | |
| background: rgba(16, 185, 129, 0.2); | |
| border: 1px solid rgba(16, 185, 129, 0.4); | |
| color: var(--success); | |
| } | |
| .model-status.unavailable { | |
| background: rgba(239, 68, 68, 0.2); | |
| border: 1px solid rgba(239, 68, 68, 0.4); | |
| color: var(--danger); | |
| } | |
| /* Ensure stat values are always visible */ | |
| .stat-value:empty::before { | |
| content: '0'; | |
| opacity: 0.5; | |
| } | |
| .stat-mini span:empty::before { | |
| content: '-'; | |
| opacity: 0.5; | |
| } | |
| /* Responsive adjustments for news cards */ | |
| @media (max-width: 768px) { | |
| .news-card { | |
| flex-direction: column; | |
| } | |
| .news-card-image { | |
| width: 100%; | |
| height: 200px; | |
| } | |
| .sentiment-gauge-container { | |
| width: 100%; | |
| } | |
| /* ===== DIAGNOSTICS STYLES ===== */ | |
| /* Navigation Sections */ | |
| .nav-section { | |
| margin-bottom: 8px; | |
| } | |
| .nav-section-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| opacity: 0.8; | |
| } | |
| .nav-section-header svg { | |
| opacity: 0.7; | |
| } | |
| .nav-section-items { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| margin-left: 8px; | |
| } | |
| .nav-subitem { | |
| padding-left: 32px ; | |
| font-size: 14px ; | |
| opacity: 0.9; | |
| } | |
| .nav-subitem:hover { | |
| opacity: 1; | |
| } | |
| /* Diagnostic Header */ | |
| .diagnostic-header { | |
| margin-bottom: 24px; | |
| } | |
| .diagnostic-title h2 { | |
| color: var(--text-primary); | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin: 0 0 8px 0; | |
| } | |
| .diagnostic-title p { | |
| color: var(--text-secondary); | |
| font-size: 16px; | |
| margin: 0; | |
| } | |
| /* Status Cards Grid */ | |
| .status-cards-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 32px; | |
| } | |
| .status-card { | |
| background: var(--dark-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| transition: var(--transition-normal); | |
| } | |
| .status-card:hover { | |
| border-color: var(--primary); | |
| box-shadow: var(--glow); | |
| } | |
| .status-icon { | |
| font-size: 32px; | |
| opacity: 0.8; | |
| } | |
| .status-content { | |
| flex: 1; | |
| } | |
| .status-label { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| } | |
| .status-value { | |
| color: var(--text-primary); | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| /* Diagnostic Actions - Removed custom styles, using standard button classes */ | |
| /* Diagnostic Tab Buttons */ | |
| .diagnostic-tab-btn { | |
| padding: 12px 24px; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 3px solid transparent; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-size: 14px; | |
| position: relative; | |
| letter-spacing: 0.01em; | |
| } | |
| .diagnostic-tab-btn::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -3px; | |
| left: 0; | |
| width: 0; | |
| height: 3px; | |
| background: var(--gradient-purple); | |
| transition: width var(--transition-normal); | |
| } | |
| .diagnostic-tab-btn:hover { | |
| color: var(--text-primary); | |
| background: rgba(102, 126, 234, 0.08); | |
| } | |
| .diagnostic-tab-btn:hover::after { | |
| width: 100%; | |
| } | |
| .diagnostic-tab-btn.active { | |
| color: var(--primary); | |
| background: rgba(102, 126, 234, 0.1); | |
| } | |
| .diagnostic-tab-btn.active::after { | |
| width: 100%; | |
| } | |
| .diagnostic-tab-content { | |
| display: none; | |
| } | |
| .diagnostic-tab-content.active { | |
| display: block; | |
| } | |
| /* Sentiment Analysis Enhancements */ | |
| @keyframes pulse-glow { | |
| 0%, 100% { | |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); | |
| } | |
| 50% { | |
| box-shadow: 0 0 40px rgba(102, 126, 234, 0.6); | |
| } | |
| } | |
| @keyframes progress-fill { | |
| from { | |
| width: 0%; | |
| } | |
| } | |
| .sentiment-gauge { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| margin: 0 auto; | |
| } | |
| .sentiment-progress-bar { | |
| position: relative; | |
| height: 24px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .sentiment-progress-fill { | |
| height: 100%; | |
| border-radius: 12px; | |
| transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .sentiment-progress-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 0.3; | |
| } | |
| 50% { | |
| opacity: 0.6; | |
| } | |
| } | |
| /* Health Status Badge */ | |
| .health-badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .health-badge.healthy { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--success); | |
| } | |
| .health-badge.degraded { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--warning); | |
| } | |
| .health-badge.unavailable { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--danger); | |
| } | |
| .health-badge.unknown { | |
| background: rgba(107, 114, 128, 0.2); | |
| color: var(--text-secondary); | |
| } | |
| /* Test Progress */ | |
| #test-progress { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .spinner { | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid var(--border); | |
| border-top: 2px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Diagnostic Output */ | |
| .diagnostic-output-section { | |
| margin-bottom: 32px; | |
| } | |
| .diagnostic-output-container { | |
| max-height: 500px; | |
| overflow-y: auto; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--dark); | |
| } | |
| .diagnostic-output { | |
| font-family: 'JetBrains Mono', 'Courier New', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--text-primary); | |
| margin: 0; | |
| padding: 16px; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| background: transparent; | |
| border: none; | |
| min-height: 300px; | |
| } | |
| /* Diagnostic Summary */ | |
| .diagnostic-summary { | |
| margin-top: 24px; | |
| } | |
| .summary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .summary-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 12px 16px; | |
| background: var(--dark-hover); | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| } | |
| .summary-label { | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .summary-value { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .diagnostic-title h2 { | |
| font-size: 24px; | |
| } | |
| .status-cards-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| /* Diagnostic actions use standard button classes, no special mobile handling needed */ | |
| .summary-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .nav-subitem { | |
| padding-left: 24px ; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .diagnostic-output { | |
| font-size: 12px; | |
| padding: 12px; | |
| } | |
| .status-card { | |
| padding: 16px; | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 12px; | |
| } | |
| } | |
| /* ===== PLACEHOLDER PAGE STYLES ===== */ | |
| .placeholder-page { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 500px; | |
| padding: 80px 20px; | |
| text-align: center; | |
| background: rgba(17, 24, 39, 0.3); | |
| border-radius: 18px; | |
| border: 2px dashed var(--border); | |
| } | |
| .placeholder-icon { | |
| font-size: 96px; | |
| margin-bottom: 32px; | |
| opacity: 0.7; | |
| animation: float 3s ease-in-out infinite; | |
| filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3)); | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .placeholder-page h2 { | |
| color: var(--text-primary); | |
| font-size: 36px; | |
| font-weight: 800; | |
| margin: 0 0 20px 0; | |
| letter-spacing: -0.02em; | |
| background: linear-gradient(135deg, var(--text-primary), rgba(255, 255, 255, 0.7)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .placeholder-page p { | |
| color: var(--text-secondary); | |
| font-size: 18px; | |
| margin: 0 0 12px 0; | |
| max-width: 600px; | |
| line-height: 1.6; | |
| } | |
| .placeholder-page .text-secondary { | |
| color: var(--text-muted); | |
| font-size: 15px; | |
| margin-bottom: 40px; | |
| line-height: 1.6; | |
| } | |
| .placeholder-page .btn-primary { | |
| margin-top: 16px; | |
| } | |
| /* ============================================================================= | |
| System Status Display | |
| ============================================================================= */ | |
| .system-status-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .system-status-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 20px; | |
| border-radius: 12px; | |
| background: rgba(31, 41, 55, 0.5); | |
| border: 1px solid var(--border); | |
| backdrop-filter: blur(8px); | |
| } | |
| .system-status-header.alert-success { | |
| background: rgba(16, 185, 129, 0.1); | |
| border-color: rgba(16, 185, 129, 0.3); | |
| } | |
| .system-status-header.alert-warning { | |
| background: rgba(245, 158, 11, 0.1); | |
| border-color: rgba(245, 158, 11, 0.3); | |
| } | |
| .system-status-header.alert-error { | |
| background: rgba(239, 68, 68, 0.1); | |
| border-color: rgba(239, 68, 68, 0.3); | |
| } | |
| .status-icon-wrapper { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(102, 126, 234, 0.2); | |
| flex-shrink: 0; | |
| } | |
| .system-status-header.alert-success .status-icon-wrapper { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--success); | |
| } | |
| .system-status-header.alert-warning .status-icon-wrapper { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--warning); | |
| } | |
| .system-status-header.alert-error .status-icon-wrapper { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--danger); | |
| } | |
| .status-icon-wrapper svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .status-title { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .status-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| letter-spacing: -0.02em; | |
| } | |
| .system-status-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 16px; | |
| } | |
| .status-item { | |
| padding: 16px; | |
| background: rgba(31, 41, 55, 0.4); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| backdrop-filter: blur(8px); | |
| transition: all var(--transition-fast); | |
| } | |
| .status-item:hover { | |
| background: rgba(31, 41, 55, 0.6); | |
| border-color: rgba(102, 126, 234, 0.3); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |
| } | |
| .status-item.status-full-width { | |
| grid-column: 1 / -1; | |
| } | |
| .status-item.status-online { | |
| border-left: 3px solid var(--success); | |
| } | |
| .status-item.status-degraded { | |
| border-left: 3px solid var(--warning); | |
| } | |
| .status-item.status-offline { | |
| border-left: 3px solid var(--danger); | |
| } | |
| .status-item-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .status-item-value { | |
| font-size: 28px; | |
| font-weight: 800; | |
| color: var(--text-primary); | |
| letter-spacing: -0.03em; | |
| line-height: 1.2; | |
| } | |
| .status-item-value.status-time { | |
| font-size: 16px; | |
| font-weight: 600; | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--text-secondary); | |
| } | |
| .status-online .status-item-value { | |
| color: var(--success); | |
| } | |
| .status-degraded .status-item-value { | |
| color: var(--warning); | |
| } | |
| .status-offline .status-item-value { | |
| color: var(--danger); | |
| } | |
| @media (max-width: 768px) { | |
| .system-status-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .status-item-value { | |
| font-size: 24px; | |
| } | |
| .status-value { | |
| font-size: 20px; | |
| } | |
| } | |
| /* ============================================================================= | |
| Trending Coins Display | |
| ============================================================================= */ | |
| .trending-coins-grid { | |
| display: grid; | |
| gap: 16px; | |
| } | |
| .trending-coin-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 18px; | |
| background: rgba(31, 41, 55, 0.6); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| border-left: 4px solid var(--primary); | |
| backdrop-filter: blur(8px); | |
| transition: all var(--transition-normal); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .trending-coin-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: var(--gradient-purple); | |
| opacity: 0; | |
| transition: opacity var(--transition-normal); | |
| } | |
| .trending-coin-card:hover { | |
| background: rgba(31, 41, 55, 0.8); | |
| border-color: rgba(102, 126, 234, 0.4); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2); | |
| } | |
| .trending-coin-card:hover::before { | |
| opacity: 1; | |
| } | |
| .trending-coin-rank { | |
| font-size: 20px; | |
| font-weight: 800; | |
| color: var(--primary); | |
| min-width: 40px; | |
| text-align: center; | |
| background: rgba(102, 126, 234, 0.15); | |
| border-radius: 10px; | |
| padding: 8px 12px; | |
| flex-shrink: 0; | |
| } | |
| .trending-coin-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .trending-coin-thumb { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 10px; | |
| object-fit: cover; | |
| flex-shrink: 0; | |
| border: 1px solid var(--border); | |
| } | |
| .trending-coin-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .trending-coin-name { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| margin-bottom: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .trending-coin-name strong { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| letter-spacing: -0.01em; | |
| } | |
| .trending-coin-fullname { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .trending-coin-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| margin-top: 4px; | |
| } | |
| .trending-coin-score { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 4px; | |
| flex-shrink: 0; | |
| padding-left: 16px; | |
| border-left: 1px solid var(--border); | |
| } | |
| .trending-coin-score-value { | |
| font-size: 22px; | |
| font-weight: 800; | |
| color: var(--success); | |
| letter-spacing: -0.02em; | |
| line-height: 1; | |
| } | |
| .trending-coin-score-label { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| font-weight: 600; | |
| } | |
| @media (max-width: 768px) { | |
| .trending-coin-card { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .trending-coin-rank { | |
| align-self: flex-start; | |
| } | |
| .trending-coin-score { | |
| align-self: flex-end; | |
| border-left: none; | |
| border-top: 1px solid var(--border); | |
| padding-left: 0; | |
| padding-top: 12px; | |
| width: 100%; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .trending-coin-name { | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| } | |