diff options
Diffstat (limited to 'api/static/style.css')
| -rw-r--r-- | api/static/style.css | 461 |
1 files changed, 0 insertions, 461 deletions
diff --git a/api/static/style.css b/api/static/style.css deleted file mode 100644 index 8a1a13a..0000000 --- a/api/static/style.css +++ /dev/null @@ -1,461 +0,0 @@ -/* ========================================================================== - AI Agent Reasoning Experiment Framework - Web GUI Styles - ========================================================================== */ - -:root { - --bg-primary: #0f1419; - --bg-secondary: #1a1f26; - --bg-tertiary: #242b33; - --bg-card: #1e2530; - --text-primary: #e7e9ea; - --text-secondary: #8b98a5; - --text-muted: #5c6c7a; - --accent-primary: #1d9bf0; - --accent-primary-hover: #1a8cd8; - --accent-success: #00ba7c; - --accent-warning: #ffd400; - --accent-danger: #f4212e; - --border-color: #2f3942; - --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; - --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: var(--font-family); - background: var(--bg-primary); - color: var(--text-primary); - line-height: 1.6; - min-height: 100vh; -} - -.container { - max-width: 1400px; - margin: 0 auto; - padding: 20px; -} - -/* ========================================================================== - Header - ========================================================================== */ - -header { - text-align: center; - padding: 40px 0 30px; - border-bottom: 1px solid var(--border-color); - margin-bottom: 30px; -} - -header h1 { - font-size: 2rem; - font-weight: 700; - margin-bottom: 8px; - background: linear-gradient(135deg, var(--accent-primary), #a855f7); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -header .subtitle { - color: var(--text-secondary); - font-size: 1.1rem; -} - -/* ========================================================================== - Cards & Sections - ========================================================================== */ - -.card { - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: 12px; - padding: 24px; - margin-bottom: 24px; -} - -.card h2 { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: 20px; - color: var(--text-primary); - display: flex; - align-items: center; - gap: 10px; -} - -/* ========================================================================== - Configuration Grid - ========================================================================== */ - -.config-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - margin-bottom: 24px; -} - -.config-item { - display: flex; - flex-direction: column; - gap: 8px; -} - -.config-item label { - font-size: 0.875rem; - color: var(--text-secondary); - font-weight: 500; -} - -.config-item select, -.config-item input { - padding: 10px 14px; - border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-tertiary); - color: var(--text-primary); - font-size: 0.95rem; - transition: border-color 0.2s, box-shadow 0.2s; -} - -.config-item select:focus, -.config-item input:focus { - outline: none; - border-color: var(--accent-primary); - box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15); -} - -.config-actions { - display: flex; - gap: 12px; -} - -/* ========================================================================== - Buttons - ========================================================================== */ - -.btn { - padding: 12px 24px; - border: none; - border-radius: 8px; - font-size: 0.95rem; - font-weight: 600; - cursor: pointer; - transition: all 0.2s; - display: inline-flex; - align-items: center; - gap: 8px; -} - -.btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.btn-primary { - background: var(--accent-primary); - color: white; -} - -.btn-primary:hover:not(:disabled) { - background: var(--accent-primary-hover); - transform: translateY(-1px); -} - -.btn-secondary { - background: var(--bg-tertiary); - color: var(--text-primary); - border: 1px solid var(--border-color); -} - -.btn-secondary:hover:not(:disabled) { - background: var(--border-color); -} - -.btn-danger { - background: transparent; - color: var(--accent-danger); - border: 1px solid var(--accent-danger); -} - -.btn-danger:hover:not(:disabled) { - background: var(--accent-danger); - color: white; -} - -.btn .btn-spinner { - display: none; -} - -.btn.loading .btn-text { - display: none; -} - -.btn.loading .btn-spinner { - display: inline; -} - -/* ========================================================================== - Status Badge - ========================================================================== */ - -.status-indicator { - display: flex; - align-items: center; - gap: 16px; -} - -.badge { - padding: 6px 14px; - border-radius: 20px; - font-size: 0.875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.badge-idle { - background: var(--bg-tertiary); - color: var(--text-secondary); -} - -.badge-running { - background: rgba(29, 155, 240, 0.15); - color: var(--accent-primary); - animation: pulse 2s infinite; -} - -.badge-complete { - background: rgba(0, 186, 124, 0.15); - color: var(--accent-success); -} - -.badge-error { - background: rgba(244, 33, 46, 0.15); - color: var(--accent-danger); -} - -.badge-cancelled { - background: rgba(255, 212, 0, 0.15); - color: var(--accent-warning); -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.7; } -} - -#status-time { - color: var(--text-muted); - font-size: 0.875rem; -} - -/* ========================================================================== - Logs Container - ========================================================================== */ - -.logs-container { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: 8px; - padding: 16px; - font-family: var(--font-mono); - font-size: 0.8rem; - max-height: 400px; - overflow-y: auto; - line-height: 1.8; -} - -.logs-container::-webkit-scrollbar { - width: 8px; -} - -.logs-container::-webkit-scrollbar-track { - background: var(--bg-primary); -} - -.logs-container::-webkit-scrollbar-thumb { - background: var(--border-color); - border-radius: 4px; -} - -.log-line { - padding: 2px 0; - white-space: pre-wrap; - word-break: break-all; -} - -.log-line:hover { - background: var(--bg-secondary); -} - -.log-level-1 { color: var(--accent-danger); } -.log-level-2 { color: var(--accent-warning); } -.log-level-3 { color: var(--text-primary); } -.log-level-4 { color: var(--text-muted); } - -.logs-empty { - color: var(--text-muted); - text-align: center; - padding: 40px; -} - -.logs-actions { - margin-top: 12px; -} - -/* ========================================================================== - Tabs - ========================================================================== */ - -.tabs { - display: flex; - gap: 4px; - border-bottom: 1px solid var(--border-color); - margin-bottom: 20px; -} - -.tab-btn { - padding: 12px 20px; - background: transparent; - border: none; - color: var(--text-secondary); - font-size: 0.95rem; - font-weight: 500; - cursor: pointer; - border-bottom: 2px solid transparent; - transition: all 0.2s; - margin-bottom: -1px; -} - -.tab-btn:hover { - color: var(--text-primary); -} - -.tab-btn.active { - color: var(--accent-primary); - border-bottom-color: var(--accent-primary); -} - -.tab-content { - display: none; -} - -.tab-content.active { - display: block; -} - -/* ========================================================================== - Results Tables - ========================================================================== */ - -.data-table { - width: 100%; - border-collapse: collapse; - font-size: 0.875rem; -} - -.data-table th, -.data-table td { - padding: 12px; - text-align: left; - border-bottom: 1px solid var(--border-color); -} - -.data-table th { - background: var(--bg-tertiary); - color: var(--text-secondary); - font-weight: 600; - text-transform: uppercase; - font-size: 0.75rem; - letter-spacing: 0.5px; -} - -.data-table tr:hover td { - background: var(--bg-secondary); -} - -.data-table td { - color: var(--text-primary); -} - -/* ========================================================================== - Images Grid - ========================================================================== */ - -.image-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 20px; -} - -.image-card { - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 8px; - overflow: hidden; -} - -.image-card img { - width: 100%; - height: auto; - display: block; -} - -.image-card .image-title { - padding: 12px; - font-size: 0.875rem; - color: var(--text-secondary); - text-align: center; -} - -/* ========================================================================== - Empty States - ========================================================================== */ - -.empty-state { - text-align: center; - padding: 40px; - color: var(--text-muted); - background: var(--bg-secondary); - border-radius: 8px; - border: 1px dashed var(--border-color); -} - -/* ========================================================================== - Footer - ========================================================================== */ - -footer { - text-align: center; - padding: 30px; - color: var(--text-muted); - font-size: 0.875rem; -} - -/* ========================================================================== - Responsive - ========================================================================== */ - -@media (max-width: 768px) { - .container { - padding: 12px; - } - - header h1 { - font-size: 1.5rem; - } - - .config-grid { - grid-template-columns: 1fr; - } - - .logs-container { - max-height: 300px; - font-size: 0.75rem; - } -} |
