Spaces:
Sleeping
Sleeping
| /* Global CSS Variables & Reset */ | |
| :root { | |
| --bg-dark: #070a13; | |
| --bg-gradient: linear-gradient(135deg, #070a13 0%, #0d1223 50%, #151c36 100%); | |
| --bg-sidebar: rgba(13, 18, 35, 0.7); | |
| --glass-card: rgba(20, 27, 50, 0.45); | |
| --glass-border: rgba(255, 255, 255, 0.07); | |
| --glass-border-focus: rgba(59, 130, 246, 0.4); | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --accent-blue: #3b82f6; | |
| --accent-purple: #8b5cf6; | |
| --accent-green: #10b981; | |
| --accent-orange: #f59e0b; | |
| --accent-red: #ef4444; | |
| --shadow-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg-dark); | |
| background-image: var(--bg-gradient); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Outfit', sans-serif; | |
| font-weight: 600; | |
| } | |
| /* App Container Layout */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| max-height: 100vh; | |
| } | |
| /* Main Header */ | |
| .main-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.25rem 2rem; | |
| background: rgba(13, 18, 35, 0.85); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--glass-border); | |
| z-index: 10; | |
| } | |
| .logo-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .logo-icon { | |
| font-size: 2.25rem; | |
| background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.3)); | |
| } | |
| .logo-text h1 { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| letter-spacing: -0.5px; | |
| } | |
| .logo-text h1 span { | |
| background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .logo-text p { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .live-telemetry { | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| .telemetry-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--glass-border); | |
| padding: 0.5rem 1.25rem; | |
| border-radius: 8px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-width: 140px; | |
| } | |
| .telemetry-card .stat-value { | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| } | |
| .telemetry-card .stat-label { | |
| font-size: 0.7rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-top: 0.2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| /* Workspace Panels */ | |
| .workspace { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| /* Sidebar Styling */ | |
| .sidebar { | |
| width: 320px; | |
| background: var(--bg-sidebar); | |
| backdrop-filter: blur(15px); | |
| border-right: 1px solid var(--glass-border); | |
| padding: 1.5rem; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .sidebar-section h2 { | |
| font-size: 1.05rem; | |
| color: var(--text-primary); | |
| margin-bottom: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| padding-bottom: 0.5rem; | |
| } | |
| /* Sidebar Sliders & Controls */ | |
| .control-group { | |
| margin-bottom: 1.25rem; | |
| } | |
| .slider-header { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.4rem; | |
| } | |
| .slider-header span { | |
| font-family: 'Outfit', sans-serif; | |
| color: var(--accent-blue); | |
| font-weight: 600; | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 2px; | |
| outline: none; | |
| -webkit-appearance: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 50%; | |
| background: var(--accent-blue); | |
| cursor: pointer; | |
| box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); | |
| transition: var(--transition-smooth); | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| } | |
| .help-text { | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| display: block; | |
| margin-top: 0.3rem; | |
| line-height: 1.3; | |
| } | |
| /* Forms in Sidebar */ | |
| .form-group { | |
| margin-bottom: 0.75rem; | |
| } | |
| .form-group input, .form-group textarea { | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 6px; | |
| padding: 0.6rem 0.8rem; | |
| color: var(--text-primary); | |
| font-family: 'Inter', sans-serif; | |
| font-size: 0.8rem; | |
| outline: none; | |
| transition: var(--transition-smooth); | |
| } | |
| .form-group input:focus, .form-group textarea:focus { | |
| border-color: var(--glass-border-focus); | |
| background: rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 0 10px rgba(59, 130, 246, 0.15); | |
| } | |
| .btn-primary { | |
| width: 100%; | |
| background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%); | |
| border: none; | |
| border-radius: 6px; | |
| padding: 0.65rem; | |
| color: var(--text-primary); | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0.5rem; | |
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); | |
| transition: var(--transition-smooth); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| /* Document Inventory List */ | |
| .inventory-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| max-height: 250px; | |
| overflow-y: auto; | |
| } | |
| .empty-list-text { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-align: center; | |
| padding: 1rem 0; | |
| } | |
| .doc-inventory-item { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 6px; | |
| padding: 0.6rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| transition: var(--transition-smooth); | |
| } | |
| .doc-inventory-item:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .doc-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| width: calc(100% - 30px); | |
| } | |
| .doc-info h4 { | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .doc-info span { | |
| font-size: 0.65rem; | |
| color: var(--text-secondary); | |
| } | |
| .btn-delete { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 4px; | |
| transition: var(--transition-smooth); | |
| } | |
| .btn-delete:hover { | |
| color: var(--accent-red); | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| /* Main Content Area */ | |
| .main-content { | |
| flex: 1; | |
| padding: 2rem; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| /* Glass Card Base Style */ | |
| .glass-card { | |
| background: var(--glass-card); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 12px; | |
| box-shadow: var(--shadow-glow); | |
| backdrop-filter: blur(12px); | |
| transition: var(--transition-smooth); | |
| } | |
| /* Search Console Card */ | |
| .console-section { | |
| padding: 1.25rem; | |
| } | |
| .search-box { | |
| display: flex; | |
| gap: 0.75rem; | |
| position: relative; | |
| } | |
| .search-box input { | |
| flex: 1; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| padding: 0.9rem 1.2rem; | |
| font-size: 0.95rem; | |
| color: var(--text-primary); | |
| outline: none; | |
| transition: var(--transition-smooth); | |
| } | |
| .search-box input:focus { | |
| border-color: var(--glass-border-focus); | |
| background: rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.15); | |
| } | |
| .btn-search { | |
| background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%); | |
| border: none; | |
| border-radius: 8px; | |
| padding: 0 1.75rem; | |
| color: var(--text-primary); | |
| font-family: 'Outfit', sans-serif; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25); | |
| transition: var(--transition-smooth); | |
| } | |
| .btn-search:hover { | |
| box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); | |
| transform: translateY(-1px); | |
| } | |
| .btn-search:active { | |
| transform: translateY(0); | |
| } | |
| /* Welcome Container */ | |
| .welcome-container { | |
| padding: 3rem; | |
| text-align: center; | |
| max-width: 850px; | |
| margin: 2rem auto; | |
| } | |
| .welcome-logo { | |
| font-size: 3.5rem; | |
| margin-bottom: 1.5rem; | |
| background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.25)); | |
| } | |
| .welcome-container h2 { | |
| font-size: 1.85rem; | |
| font-weight: 700; | |
| margin-bottom: 0.75rem; | |
| } | |
| .welcome-container p { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| margin-bottom: 2.5rem; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| text-align: left; | |
| } | |
| .feature-item { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| padding: 1.25rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| transition: var(--transition-smooth); | |
| } | |
| .feature-item:hover { | |
| transform: translateY(-2px); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| .feat-icon { | |
| font-size: 1.5rem; | |
| color: var(--accent-blue); | |
| margin-bottom: 0.2rem; | |
| } | |
| .feature-item h4 { | |
| font-size: 0.95rem; | |
| color: var(--text-primary); | |
| } | |
| .feature-item p { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| line-height: 1.4; | |
| } | |
| .quick-ingest-prompt { | |
| margin-top: 2.5rem; | |
| padding: 0.85rem; | |
| background: rgba(16, 185, 129, 0.06); | |
| border: 1px solid rgba(16, 185, 129, 0.2); | |
| border-radius: 6px; | |
| color: var(--accent-green); | |
| font-size: 0.8rem; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* Results & Telemetry Trace Section */ | |
| .results-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .trace-map-container { | |
| padding: 1.5rem; | |
| } | |
| .trace-map-container h3 { | |
| font-size: 1rem; | |
| margin-bottom: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Trace Timeline Flow Map */ | |
| .trace-timeline { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| overflow-x: auto; | |
| padding: 0.75rem 0.5rem; | |
| } | |
| .timeline-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| cursor: pointer; | |
| min-width: 100px; | |
| transition: var(--transition-smooth); | |
| } | |
| .timeline-step .step-icon { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 2px solid var(--glass-border); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 1.15rem; | |
| color: var(--text-secondary); | |
| transition: var(--transition-smooth); | |
| } | |
| .timeline-step span { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| transition: var(--transition-smooth); | |
| } | |
| /* Timeline Step Hover and Active States */ | |
| .timeline-step:hover .step-icon { | |
| border-color: rgba(255, 255, 255, 0.3); | |
| color: var(--text-primary); | |
| transform: scale(1.05); | |
| } | |
| .timeline-step.active .step-icon { | |
| background: var(--accent-blue); | |
| border-color: var(--accent-blue); | |
| color: var(--text-primary); | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); | |
| } | |
| .timeline-step.active span { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| /* Pipeline Status States */ | |
| .timeline-step.success .step-icon { | |
| background: var(--accent-green); | |
| border-color: var(--accent-green); | |
| color: var(--text-primary); | |
| box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); | |
| } | |
| .timeline-step.success span { | |
| color: var(--accent-green); | |
| } | |
| .timeline-step.warning .step-icon { | |
| background: var(--accent-orange); | |
| border-color: var(--accent-orange); | |
| color: var(--text-primary); | |
| box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); | |
| } | |
| .timeline-step.warning span { | |
| color: var(--accent-orange); | |
| } | |
| .timeline-step.danger .step-icon { | |
| background: var(--accent-red); | |
| border-color: var(--accent-red); | |
| color: var(--text-primary); | |
| box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); | |
| } | |
| .timeline-step.danger span { | |
| color: var(--accent-red); | |
| } | |
| /* Connecting Line */ | |
| .timeline-line { | |
| flex: 1; | |
| height: 2px; | |
| background: var(--glass-border); | |
| margin: 0 0.5rem; | |
| min-width: 30px; | |
| } | |
| .timeline-line.active { | |
| background: var(--accent-blue); | |
| } | |
| /* Outputs Grid Layout */ | |
| .outputs-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.5rem; | |
| align-items: stretch; | |
| } | |
| /* Answer Card */ | |
| .answer-card { | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .answer-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| padding-bottom: 0.75rem; | |
| margin-bottom: 1rem; | |
| } | |
| .answer-header h3 { | |
| font-size: 1.15rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .badge { | |
| padding: 0.35rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .badge-success { | |
| background: rgba(16, 185, 129, 0.15); | |
| color: var(--accent-green); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| } | |
| .badge-warning { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: var(--accent-orange); | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| } | |
| .badge-danger { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: var(--accent-red); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| .answer-body { | |
| flex: 1; | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| overflow-y: auto; | |
| white-space: pre-line; | |
| } | |
| .answer-meta { | |
| margin-top: 1.5rem; | |
| padding-top: 0.75rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Details Panel Card */ | |
| .details-card { | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .details-header { | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| padding-bottom: 0.75rem; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| #details-title { | |
| font-size: 1.15rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--accent-blue); | |
| } | |
| #details-subtitle { | |
| font-size: 0.7rem; | |
| color: var(--text-secondary); | |
| } | |
| .details-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| } | |
| /* Welcome details state */ | |
| .welcome-details { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| color: var(--text-muted); | |
| text-align: center; | |
| padding: 2rem; | |
| gap: 1rem; | |
| } | |
| .welcome-details p { | |
| font-size: 0.85rem; | |
| line-height: 1.5; | |
| } | |
| .pulse-arrow { | |
| font-size: 1.5rem; | |
| animation: bounceUpDown 2s infinite ease-in-out; | |
| } | |
| /* Keyframes */ | |
| @keyframes bounceUpDown { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| /* Details Subpanels */ | |
| .detail-item-box { | |
| background: rgba(255, 255, 255, 0.015); | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .detail-item-box h4 { | |
| font-size: 0.9rem; | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .detail-item-box p { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| } | |
| /* Data Tables inside Details Panel */ | |
| .telemetry-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 0.5rem; | |
| font-size: 0.75rem; | |
| } | |
| .telemetry-table th, .telemetry-table td { | |
| padding: 0.6rem 0.5rem; | |
| text-align: left; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .telemetry-table th { | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .score-badge { | |
| font-family: monospace; | |
| font-weight: 600; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .score-high { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--accent-green); | |
| } | |
| .score-medium { | |
| background: rgba(245, 158, 11, 0.1); | |
| color: var(--accent-orange); | |
| } | |
| .score-low { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--accent-red); | |
| } | |
| /* NLI Chart */ | |
| .nli-charts-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .nli-bar-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| } | |
| .nli-bar-label { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: capitalize; | |
| } | |
| .nli-bar-bg { | |
| width: 100%; | |
| height: 10px; | |
| background: rgba(255, 255, 255, 0.04); | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .nli-bar-fill { | |
| height: 100%; | |
| border-radius: 5px; | |
| transition: width 0.8s ease-out; | |
| } | |
| /* Loading animations */ | |
| .loading-dots { | |
| display: inline-flex; | |
| gap: 4px; | |
| } | |
| .loading-dots span { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--text-primary); | |
| border-radius: 50%; | |
| animation: flashDot 1.4s infinite; | |
| } | |
| .loading-dots span:nth-child(2) { animation-delay: 0.2s; } | |
| .loading-dots span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes flashDot { | |
| 0%, 100% { opacity: 0.2; } | |
| 50% { opacity: 1; } | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.1); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |