Spaces:
Build error
Build error
| :root { | |
| --bg-base: #0b0d11; | |
| --bg-surface: #121418; | |
| --bg-elevated: #191b21; | |
| --bg-hover: #1e2028; | |
| --bg-active: #252833; | |
| --border: #23262e; | |
| --border-light: #2a2e38; | |
| --text-primary: #e8eaed; | |
| --text-secondary: #9aa0a6; | |
| --text-tertiary: #5f6368; | |
| --accent: #4fc3f7; | |
| --accent-dim: rgba(79, 195, 247, 0.12); | |
| --accent-glow: rgba(79, 195, 247, 0.15); | |
| --success: #66bb6a; | |
| --success-dim: rgba(102, 187, 106, 0.12); | |
| --warning: #ffa726; | |
| --warning-dim: rgba(255, 167, 38, 0.12); | |
| --danger: #ef5350; | |
| --danger-dim: rgba(239, 83, 80, 0.12); | |
| --purple: #ce93d8; | |
| --purple-dim: rgba(206, 147, 216, 0.12); | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 14px; | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); | |
| --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; | |
| --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; | |
| --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="light"] { | |
| --bg-base: #f5f5f5; | |
| --bg-surface: #ffffff; | |
| --bg-elevated: #f0f0f0; | |
| --bg-hover: #e8e8e8; | |
| --bg-active: #ddd; | |
| --border: #d0d0d0; | |
| --border-light: #c0c0c0; | |
| --text-primary: #1a1a1a; | |
| --text-secondary: #555; | |
| --text-tertiary: #999; | |
| --accent: #0288d1; | |
| --accent-dim: rgba(2, 136, 209, 0.1); | |
| --accent-glow: rgba(2, 136, 209, 0.15); | |
| --success-dim: rgba(102, 187, 106, 0.15); | |
| --warning-dim: rgba(255, 167, 38, 0.15); | |
| --danger-dim: rgba(239, 83, 80, 0.15); | |
| --purple-dim: rgba(206, 147, 216, 0.15); | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); | |
| --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: var(--font); | |
| background: var(--bg-base); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| transition: background var(--transition), color var(--transition); | |
| } | |
| /* LAYOUT */ | |
| .app-shell { | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| /* SIDEBAR */ | |
| .sidebar { | |
| width: 240px; | |
| background: var(--bg-surface); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 20px 16px; | |
| gap: 4px; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 12px; | |
| margin-bottom: 20px; | |
| cursor: pointer; | |
| border-radius: var(--radius-sm); | |
| transition: var(--transition); | |
| } | |
| .sidebar-brand:hover { background: var(--bg-hover); } | |
| .sidebar-brand svg { width: 28px; height: 28px; color: var(--accent); } | |
| .sidebar-brand h1 { | |
| font-size: 18px; | |
| font-weight: 700; | |
| letter-spacing: -0.3px; | |
| background: linear-gradient(135deg, var(--accent), var(--purple)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| font-weight: 500; | |
| border: none; | |
| background: none; | |
| width: 100%; | |
| text-align: left; | |
| } | |
| .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } | |
| .nav-item.active { background: var(--accent-dim); color: var(--accent); } | |
| .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } | |
| .shortcut-hint { | |
| margin-left: auto; | |
| font-size: 10px; | |
| color: var(--text-tertiary); | |
| font-family: var(--font-mono); | |
| opacity: 0.6; | |
| } | |
| .sidebar-spacer { flex: 1; } | |
| .sidebar-footer { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border); | |
| } | |
| /* MAIN CONTENT */ | |
| .main-content { | |
| flex: 1; | |
| padding: 24px 32px; | |
| max-width: 1440px; | |
| overflow-y: auto; | |
| } | |
| .page-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 24px; | |
| } | |
| .page-header h2 { | |
| font-size: 22px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| /* COMPONENT CARDS */ | |
| .section { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .section-header h3 { | |
| font-size: 15px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .section-body { padding: 20px; } | |
| /* BUTTONS */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 16px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: var(--bg-elevated); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-family: inherit; | |
| white-space: nowrap; | |
| } | |
| .btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); } | |
| .btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #000; | |
| border-color: var(--accent); | |
| } | |
| .btn-primary:hover { background: #64cff7; border-color: #64cff7; } | |
| .btn-primary:disabled { background: var(--accent-dim); color: var(--text-tertiary); border-color: transparent; } | |
| .btn-ghost { | |
| background: transparent; | |
| border-color: transparent; | |
| color: var(--text-secondary); | |
| } | |
| .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); } | |
| .btn-sm { padding: 5px 10px; font-size: 12px; } | |
| .btn-icon { padding: 6px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm); transition: var(--transition); } | |
| .btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); } | |
| /* FORMS */ | |
| .input { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| padding: 8px 12px; | |
| font-size: 14px; | |
| font-family: inherit; | |
| outline: none; | |
| transition: var(--transition); | |
| width: 100%; | |
| } | |
| .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } | |
| .input::placeholder { color: var(--text-tertiary); } | |
| .select { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| padding: 6px 10px; | |
| font-size: 13px; | |
| font-family: inherit; | |
| outline: none; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .select:focus { border-color: var(--accent); } | |
| /* SWITCH (Airgap) */ | |
| .switch-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .switch { | |
| position: relative; | |
| width: 36px; | |
| height: 20px; | |
| flex-shrink: 0; | |
| } | |
| .switch input { opacity: 0; width: 0; height: 0; } | |
| .slider { | |
| position: absolute; | |
| inset: 0; | |
| background: var(--bg-elevated); | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: 1px solid var(--border); | |
| } | |
| .slider::before { | |
| content: ''; | |
| position: absolute; | |
| width: 14px; | |
| height: 14px; | |
| left: 2px; | |
| bottom: 2px; | |
| background: var(--text-tertiary); | |
| border-radius: 50%; | |
| transition: var(--transition); | |
| } | |
| input:checked + .slider { background: var(--success-dim); border-color: var(--success); } | |
| input:checked + .slider::before { background: var(--success); transform: translateX(16px); } | |
| /* BADGES */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 2px 8px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| border-radius: 20px; | |
| } | |
| .badge-high { background: var(--danger-dim); color: var(--danger); } | |
| .badge-medium { background: var(--warning-dim); color: var(--warning); } | |
| .badge-low { background: var(--success-dim); color: var(--success); } | |
| .badge-status { | |
| padding: 2px 8px; | |
| border-radius: 20px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| } | |
| .badge-status.done { background: var(--success-dim); color: var(--success); } | |
| .badge-status.todo { background: var(--bg-hover); color: var(--text-secondary); } | |
| /* TABLES */ | |
| .table-wrap { | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| } | |
| thead th { | |
| text-align: left; | |
| padding: 10px 16px; | |
| color: var(--text-tertiary); | |
| font-weight: 600; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| tbody td { | |
| padding: 10px 16px; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: middle; | |
| } | |
| tbody tr:hover { background: var(--bg-hover); } | |
| tbody tr.low-confidence { border-left: 3px solid var(--warning); } | |
| tbody tr.done td { opacity: 0.5; } | |
| tbody tr.done .task-text { text-decoration: line-through; } | |
| /* UPLOADER */ | |
| .dropzone { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 48px 24px; | |
| border: 2px dashed var(--border); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| background: var(--bg-surface); | |
| gap: 16px; | |
| } | |
| .dropzone:hover, .dropzone.drag-over { border-color: var(--accent); background: var(--accent-dim); } | |
| .dropzone-icon { width: 48px; height: 48px; color: var(--text-tertiary); } | |
| .dropzone:hover .dropzone-icon { color: var(--accent); } | |
| .dropzone-title { font-size: 16px; font-weight: 600; color: var(--text-primary); } | |
| .dropzone-subtitle { font-size: 13px; color: var(--text-tertiary); } | |
| .dropzone-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 4px; | |
| } | |
| .upload-progress { | |
| padding: 20px; | |
| } | |
| .pipeline { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| position: relative; | |
| } | |
| .pipeline::before { | |
| content: ''; | |
| position: absolute; | |
| top: 14px; | |
| left: 20px; | |
| right: 20px; | |
| height: 2px; | |
| background: var(--border); | |
| z-index: 0; | |
| } | |
| .pipeline-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| z-index: 1; | |
| position: relative; | |
| } | |
| .pipeline-dot { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background: var(--bg-elevated); | |
| border: 2px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| transition: var(--transition); | |
| } | |
| .pipeline-step.active .pipeline-dot { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); } | |
| .pipeline-step.current .pipeline-dot { border-color: var(--purple); animation: pulse 1.5s infinite; } | |
| .pipeline-label { font-size: 11px; color: var(--text-tertiary); font-weight: 500; } | |
| .pipeline-step.active .pipeline-label { color: var(--text-secondary); } | |
| .progress-track { | |
| height: 4px; | |
| background: var(--bg-elevated); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: 12px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent), var(--purple)); | |
| border-radius: 4px; | |
| transition: width 400ms ease; | |
| } | |
| .progress-info { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 13px; | |
| color: var(--text-tertiary); | |
| } | |
| /* TELEMETRY */ | |
| .telemetry-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .telemetry-card { | |
| background: var(--bg-elevated); | |
| border-radius: var(--radius-md); | |
| padding: 16px; | |
| border: 1px solid var(--border); | |
| } | |
| .telemetry-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 12px; | |
| } | |
| .telemetry-value { | |
| font-size: 28px; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| color: var(--text-primary); | |
| } | |
| .telemetry-sub { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| margin-top: 2px; | |
| } | |
| .telemetry-bar { | |
| height: 6px; | |
| background: var(--bg-base); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| margin-top: 12px; | |
| } | |
| .telemetry-fill { | |
| height: 100%; | |
| border-radius: 6px; | |
| transition: width 600ms ease; | |
| } | |
| .telemetry-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .telemetry-status.active { color: var(--purple); } | |
| /* CHAT */ | |
| .chat-panel { | |
| display: flex; | |
| flex-direction: column; | |
| height: 360px; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 4px 0; | |
| } | |
| .chat-msg { | |
| display: flex; | |
| gap: 8px; | |
| align-items: flex-start; | |
| max-width: 85%; | |
| padding: 8px 12px; | |
| border-radius: var(--radius-md); | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| .chat-msg.user { align-self: flex-end; background: var(--accent-dim); border: 1px solid rgba(79, 195, 247, 0.2); } | |
| .chat-msg.bot { align-self: flex-start; background: var(--bg-elevated); border: 1px solid var(--border); } | |
| .chat-input-row { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border); | |
| } | |
| /* HISTORY LIST */ | |
| .history-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| max-height: 340px; | |
| overflow-y: auto; | |
| } | |
| .history-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .history-item:hover { background: var(--bg-hover); } | |
| .history-name { font-size: 13px; font-weight: 500; color: var(--text-primary); } | |
| .history-date { font-size: 11px; color: var(--text-tertiary); } | |
| .history-empty { | |
| text-align: center; | |
| padding: 32px 0; | |
| color: var(--text-tertiary); | |
| font-size: 13px; | |
| } | |
| /* MODAL OVERLAY */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(4px); | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| animation: fadeIn 150ms ease; | |
| } | |
| .modal { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| max-width: 960px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-lg); | |
| animation: slideUp 250ms cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .modal-header h3 { font-size: 16px; font-weight: 600; } | |
| .modal-body { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| padding: 20px; | |
| } | |
| .modal-image-col { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .modal-image-col .image-box { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 4px; | |
| aspect-ratio: 4/5; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| .modal-image-col .image-box img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| border-radius: 4px; | |
| } | |
| .toggle-group { | |
| display: flex; | |
| gap: 4px; | |
| background: var(--bg-elevated); | |
| padding: 3px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| } | |
| .toggle-btn { | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-tertiary); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .toggle-btn.active { background: var(--accent); color: #000; } | |
| .modal-info-col { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .meta-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 8px; | |
| } | |
| .meta-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 13px; | |
| padding: 6px 8px; | |
| background: var(--bg-elevated); | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| } | |
| .meta-item .label { color: var(--text-tertiary); } | |
| .meta-item .value { color: var(--accent); font-weight: 600; } | |
| .summary-box { | |
| background: var(--purple-dim); | |
| border: 1px solid rgba(206, 147, 216, 0.15); | |
| border-radius: var(--radius-md); | |
| padding: 12px 16px; | |
| } | |
| .summary-box .summary-text { font-size: 13px; line-height: 1.6; color: var(--text-secondary); } | |
| .raw-text { font-size: 13px; line-height: 1.6; color: var(--text-secondary); max-height: 200px; overflow-y: auto; padding: 12px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border); } | |
| .derived-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .derived-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| } | |
| .derived-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } | |
| /* CONNECTION BADGE */ | |
| .connection-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .connection-badge.online { background: var(--success-dim); color: var(--success); } | |
| .connection-badge.offline { background: var(--warning-dim); color: var(--warning); } | |
| /* ANIMATIONS */ | |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } | |
| @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(206, 147, 216, 0.4); } 100% { box-shadow: 0 0 0 8px rgba(206, 147, 216, 0); } } | |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } | |
| .animate-spin { animation: spin 1s linear infinite; } | |
| .animate-pulse { animation: pulse 2s infinite; } | |
| /* MISC */ | |
| .flex { display: flex; } | |
| .flex-col { flex-direction: column; } | |
| .items-center { align-items: center; } | |
| .justify-between { justify-content: space-between; } | |
| .gap-2 { gap: 8px; } | |
| .gap-3 { gap: 12px; } | |
| .gap-4 { gap: 16px; } | |
| .mt-2 { margin-top: 8px; } | |
| .mt-3 { margin-top: 12px; } | |
| .mb-3 { margin-bottom: 12px; } | |
| .text-sm { font-size: 13px; } | |
| .text-xs { font-size: 11px; } | |
| .text-secondary { color: var(--text-secondary); } | |
| .text-tertiary { color: var(--text-tertiary); } | |
| .text-success { color: var(--success); } | |
| .font-mono { font-family: var(--font-mono); } | |
| .font-semibold { font-weight: 600; } | |
| .text-center { text-align: center; } | |
| /* SCROLLBAR */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 6px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } | |
| /* RESPONSIVE */ | |
| @media (max-width: 1024px) { | |
| .modal-body { grid-template-columns: 1fr; } | |
| .main-content { padding: 16px; } | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { width: 56px; padding: 12px 8px; } | |
| .sidebar-brand h1, .nav-item span, .sidebar-footer .switch-row span, .shortcut-hint { display: none; } | |
| .nav-item { justify-content: center; padding: 10px; } | |
| .sidebar-footer { align-items: center; } | |
| .telemetry-grid { grid-template-columns: 1fr; } | |
| .meta-grid { grid-template-columns: 1fr; } | |
| } | |
| /* ALERTS */ | |
| .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; } | |
| .alert-error { background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger); } | |
| /* CODE EDITOR */ | |
| .code-editor-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .code-editor-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 12px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-bottom: none; | |
| border-radius: var(--radius-sm) var(--radius-sm) 0 0; | |
| } | |
| .code-textarea { | |
| width: 100%; | |
| min-height: 280px; | |
| padding: 16px; | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| background: var(--bg-base); | |
| border: 1px solid var(--border); | |
| border-radius: 0; | |
| resize: vertical; | |
| outline: none; | |
| transition: border-color var(--transition); | |
| tab-size: 2; | |
| } | |
| .code-textarea:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 2px var(--accent-dim); | |
| } | |
| .code-textarea::placeholder { | |
| color: var(--text-tertiary); | |
| opacity: 0.6; | |
| } | |
| .code-editor-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 12px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-top: none; | |
| border-radius: 0 0 var(--radius-sm) var(--radius-sm); | |
| } | |
| .code-analysis-result { | |
| margin-top: 16px; | |
| padding: 16px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .result-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .result-language-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| background: var(--accent-dim); | |
| color: var(--accent); | |
| border-radius: var(--radius-sm); | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| } | |
| .result-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-tertiary); | |
| margin-bottom: 6px; | |
| } | |
| .result-text { | |
| margin: 0; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| white-space: pre-wrap; | |
| } | |
| .result-summary, .result-explanation { | |
| padding: 12px; | |
| background: var(--bg-surface); | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| } | |
| .result-summary .result-text { | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .ollama-status-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 12px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 4px; | |
| } | |
| .ollama-config-panel { | |
| padding: 12px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 8px; | |
| } | |
| .animate-pulse { | |
| animation: pulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |