Spaces:
Runtime error
Runtime error
| /* ResearchGPT Core Stylesheet - Premium Light Theme (Dribbble Inspo) */ | |
| :root { | |
| --bg-main: #f0f4f8; | |
| --bg-sidebar: #ffffff; | |
| --card-bg: rgba(255, 255, 255, 0.95); | |
| --card-border: rgba(0, 0, 0, 0.04); | |
| --text-primary: #0f172a; | |
| --text-secondary: #334155; | |
| --text-muted: #64748b; | |
| --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%); | |
| --accent-color: #4f46e5; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| --danger-color: #ef4444; | |
| --primary-soft: rgba(79, 70, 229, 0.08); | |
| --success-soft: rgba(16, 185, 129, 0.08); | |
| --info-soft: rgba(6, 182, 212, 0.08); | |
| --warning-soft: rgba(245, 158, 11, 0.08); | |
| --danger-soft: rgba(239, 68, 68, 0.08); | |
| --dark-soft: rgba(15, 23, 42, 0.04); | |
| } | |
| body { | |
| background-color: var(--bg-main); | |
| color: var(--text-secondary); | |
| font-family: 'Inter', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, h5, h6, .logo-text, .page-title { | |
| font-family: 'Outfit', sans-serif; | |
| font-weight: 600; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(0, 0, 0, 0.1); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| .app-container { | |
| display: flex; | |
| min-height: 100vh; | |
| width: 100vw; | |
| } | |
| .app-sidebar { | |
| width: 280px; | |
| background-color: var(--bg-sidebar); | |
| border-right: 1px solid var(--card-border); | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-header { | |
| padding: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .logo-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo-icon { | |
| font-size: 1.8rem; | |
| } | |
| .logo-text { | |
| font-size: 1.4rem; | |
| color: var(--text-primary); | |
| margin: 0; | |
| letter-spacing: -0.5px; | |
| } | |
| .text-gradient { | |
| background: var(--primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .sidebar-close-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 1.2rem; | |
| } | |
| .sidebar-nav { | |
| padding: 10px 16px; | |
| } | |
| .nav-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .nav-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| border-radius: 12px; | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-link i { | |
| font-size: 1.1rem; | |
| color: var(--text-muted); | |
| transition: color 0.2s ease; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .nav-link:hover { | |
| background-color: rgba(0, 0, 0, 0.02); | |
| color: var(--text-primary); | |
| } | |
| .nav-link:hover i { | |
| color: var(--accent-color); | |
| } | |
| .nav-link.active { | |
| background: var(--primary-gradient); | |
| color: white ; | |
| font-weight: 600; | |
| box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); | |
| } | |
| .nav-link.active i { | |
| color: white ; | |
| } | |
| .sidebar-divider { | |
| height: 1px; | |
| background-color: rgba(0,0,0,0.05); | |
| margin: 20px 24px; | |
| } | |
| .sidebar-papers-section { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| padding: 0 16px; | |
| } | |
| .section-title { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| letter-spacing: 1px; | |
| } | |
| .sidebar-papers-list { | |
| overflow-y: auto; | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding-bottom: 20px; | |
| } | |
| .paper-item-sidebar { | |
| padding: 10px 12px; | |
| background-color: rgba(0, 0, 0, 0.02); | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| transition: all 0.2s ease; | |
| } | |
| .paper-item-sidebar:hover { | |
| background-color: rgba(0, 0, 0, 0.04); | |
| border-color: rgba(0,0,0,0.05); | |
| } | |
| .paper-name { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .btn-icon-only { | |
| background: none; | |
| border: none; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| color: var(--text-muted); | |
| } | |
| .btn-icon-only:hover { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| color: var(--danger-color); | |
| } | |
| .sidebar-footer { | |
| padding: 20px 24px; | |
| border-top: 1px solid rgba(0,0,0,0.05); | |
| background-color: #f8fafc; | |
| } | |
| .user-profile { | |
| overflow: hidden; | |
| background: white; | |
| padding: 12px; | |
| border-radius: 12px; | |
| border: 1px solid rgba(0,0,0,0.05); | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.02); | |
| } | |
| .avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| background: var(--primary-gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.1rem; | |
| flex-shrink: 0; | |
| } | |
| .profile-name { | |
| font-size: 0.85rem; | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| .profile-status { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .status-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background-color: var(--success-color); | |
| display: inline-block; | |
| } | |
| .app-main { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| .app-header { | |
| height: 70px; | |
| padding: 0 30px; | |
| background-color: rgba(240, 244, 248, 0.8); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid rgba(0,0,0,0.03); | |
| flex-shrink: 0; | |
| } | |
| .page-title { | |
| font-size: 1.25rem; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .sidebar-toggle-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 1.2rem; | |
| } | |
| .api-status-badge { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| padding: 6px 14px; | |
| border-radius: 50px; | |
| } | |
| .bg-primary-soft { background-color: var(--primary-soft); color: var(--accent-color); } | |
| .bg-success-soft { background-color: var(--success-soft); color: var(--success-color); } | |
| .bg-info-soft { background-color: var(--info-soft); color: #0284c7; } | |
| .bg-warning-soft { background-color: var(--warning-soft); color: var(--warning-color); } | |
| .bg-danger-soft { background-color: var(--danger-soft); color: var(--danger-color); } | |
| .bg-dark-soft { background-color: var(--dark-soft); } | |
| .glass-card { | |
| background: var(--card-bg); | |
| border: 1px solid rgba(0,0,0,0.05); | |
| border-radius: 16px; | |
| box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.03); | |
| } | |
| .content-viewport { | |
| flex-grow: 1; | |
| padding: 30px; | |
| overflow-y: auto; | |
| } | |
| .hero-card { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 100%); | |
| border-left: 4px solid var(--accent-color); | |
| } | |
| .max-width-600 { | |
| max-width: 600px; | |
| } | |
| .hero-graphic { | |
| position: relative; | |
| width: 150px; | |
| height: 150px; | |
| } | |
| .glow-orb { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, rgba(59, 130, 246, 0) 70%); | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| border-radius: 50%; | |
| filter: blur(10px); | |
| } | |
| .graphic-icon { | |
| font-size: 5rem; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: var(--accent-color); | |
| text-shadow: 0 0 20px rgba(79, 70, 229, 0.2); | |
| animation: pulse 4s infinite ease-in-out; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } | |
| 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } | |
| } | |
| @keyframes floating { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .stat-card { | |
| border-radius: 16px; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.06); | |
| } | |
| .stat-icon-wrapper { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.4rem; | |
| } | |
| .stat-value { | |
| font-size: 1.5rem; | |
| color: var(--text-primary); | |
| } | |
| .stat-label { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .feature-card { | |
| transition: all 0.2s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.08); | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| } | |
| .upload-dropzone { | |
| border: 2px dashed rgba(0,0,0,0.1); | |
| background-color: rgba(0, 0, 0, 0.02); | |
| border-radius: 16px; | |
| padding: 40px 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .upload-dropzone.dragover, .upload-dropzone:hover { | |
| border-color: var(--accent-color); | |
| background-color: rgba(79, 70, 229, 0.02); | |
| box-shadow: 0 0 15px rgba(79, 70, 229, 0.08); | |
| } | |
| .dropzone-icon { | |
| font-size: 3rem; | |
| color: var(--text-muted); | |
| transition: color 0.2s ease; | |
| } | |
| .upload-dropzone:hover .dropzone-icon { | |
| color: var(--accent-color); | |
| } | |
| .custom-table th { | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| border-bottom: 1px solid rgba(0,0,0,0.05); | |
| padding: 12px 16px; | |
| } | |
| .custom-table td { | |
| padding: 16px; | |
| border-bottom: 1px solid rgba(0,0,0,0.05); | |
| color: var(--text-secondary); | |
| } | |
| .custom-table tbody tr:hover { | |
| background-color: rgba(0, 0, 0, 0.02); | |
| } | |
| .file-name { | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| max-width: 250px; | |
| display: inline-block; | |
| } | |
| .chat-layout-container { | |
| display: flex; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .chat-main-workspace { | |
| flex-grow: 1; | |
| height: 100%; | |
| min-width: 0; | |
| background-color: #f8fafc; | |
| } | |
| .chat-toolbar { | |
| background-color: transparent; | |
| border-bottom: none ; | |
| height: 52px; | |
| } | |
| .chat-messages-container { | |
| overflow-y: auto; | |
| background-color: transparent; | |
| } | |
| .chat-message { | |
| display: flex; | |
| width: 100%; | |
| } | |
| .chat-message.user { | |
| justify-content: flex-end; | |
| } | |
| .chat-message.assistant { | |
| justify-content: flex-start; | |
| } | |
| .ai-avatar { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.9rem; | |
| } | |
| .message-bubble { | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); | |
| border: 1px solid rgba(0,0,0,0.02); | |
| } | |
| .chat-message.user .message-bubble { | |
| background: var(--primary-gradient) ; | |
| color: white ; | |
| } | |
| .chat-message.user .message-bubble p { | |
| color: white ; | |
| } | |
| .message-text { | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| .chat-input-wrapper { | |
| flex-shrink: 0; | |
| } | |
| .chat-input-wrapper .form-control::placeholder { | |
| color: #cbd5e1; | |
| } | |
| .chat-input-wrapper .form-control:focus { | |
| box-shadow: none; | |
| border-color: transparent; | |
| } | |
| .prompt-suggestion:hover { | |
| background-color: #f1f5f9; | |
| transform: translateY(-1px); | |
| } | |
| .chat-citations-sidebar { | |
| width: 320px; | |
| height: 100%; | |
| background-color: white; | |
| border-left: 1px solid rgba(0,0,0,0.05) ; | |
| flex-shrink: 0; | |
| overflow-y: auto; | |
| box-shadow: -5px 0 20px rgba(0,0,0,0.02); | |
| } | |
| .citation-card { | |
| transition: all 0.3s ease; | |
| background: #f8fafc; | |
| border: 1px solid rgba(0,0,0,0.05); | |
| } | |
| .citation-card:hover { | |
| border-color: rgba(0,0,0,0.1); | |
| background: white; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.04); | |
| } | |
| .citation-flash { | |
| border-color: var(--success-color) ; | |
| box-shadow: 0 0 15px rgba(16, 185, 129, 0.15) ; | |
| } | |
| .citation-tag { | |
| color: var(--success-color); | |
| font-weight: 600; | |
| text-decoration: none; | |
| margin: 0 2px; | |
| padding: 1px 4px; | |
| border-radius: 4px; | |
| background-color: var(--success-soft); | |
| font-size: 0.85rem; | |
| transition: all 0.2s ease; | |
| } | |
| .citation-tag:hover { | |
| background-color: var(--success-color); | |
| color: white; | |
| } | |