diff options
| -rw-r--r-- | web/style.css | 119 |
1 files changed, 76 insertions, 43 deletions
diff --git a/web/style.css b/web/style.css index 1aa6627..83c88e3 100644 --- a/web/style.css +++ b/web/style.css @@ -9,13 +9,34 @@ --state-cancelled: #9ca3af; --state-budget-exceeded: #fb923c; --state-blocked: #818cf8; - - --bg: #0f172a; - --surface: #1e293b; - --border: #334155; - --text: #e2e8f0; - --text-muted: #94a3b8; - --accent: #38bdf8; + --state-ready: #34d399; + + --bg: #0f172a; + --surface: #1e293b; + --surface-1: #243044; + --surface-hover: #263350; + --border: #334155; + --border-light: #3d506a; + --text: #e2e8f0; + --text-muted: #94a3b8; + --accent: #38bdf8; + + /* Semantic aliases */ + --success: #34d399; + --warn: #f59e0b; + --danger: #f87171; + + /* Component aliases */ + --bg-card: #1a2640; + --card-bg: #1a2640; + --bg-elevated: #243044; + --bg-hover: #2d3f5a; + --code-bg: #111c2d; + --font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace; + + /* Glass-morphism */ + --glass-bg: rgba(30, 41, 59, 0.75); + --glass-blur: 12px; } /* Reset */ @@ -34,7 +55,9 @@ body { /* Header */ header { - background: var(--surface); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--border); padding: 1rem; position: sticky; @@ -79,12 +102,17 @@ header h1 { /* Tab bar */ .tab-bar { - background: var(--surface); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--border); display: flex; gap: 0; padding: 0; max-width: 100%; + position: sticky; + top: 57px; + z-index: 9; } .tab { @@ -482,9 +510,13 @@ main { border-radius: 0.375rem; border: none; cursor: pointer; - background: #2563eb; - color: #fff; - transition: opacity 0.15s; + background: var(--accent); + color: #0f172a; + transition: filter 0.15s; +} + +.btn-primary:hover:not(:disabled) { + filter: brightness(1.1); } .btn-primary:disabled { @@ -540,7 +572,9 @@ main { /* Modal dialog */ dialog { - background: var(--surface); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); color: var(--text); border: 1px solid var(--border); border-radius: 8px; @@ -550,7 +584,9 @@ dialog { } dialog::backdrop { - background: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.65); + backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); } dialog h2 { @@ -634,7 +670,9 @@ dialog label select:focus { right: 0; width: min(480px, 100vw); height: 100dvh; - background: var(--surface); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); border-left: 1px solid var(--border); z-index: 30; display: flex; @@ -775,10 +813,12 @@ dialog label select:focus { /* Clickable task cards */ .task-card { cursor: pointer; + transition: border-color 0.15s, box-shadow 0.15s; } .task-card:hover { border-color: var(--accent); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } /* Panel loading / error */ @@ -937,8 +977,8 @@ dialog label select:focus { .question-banner { margin-top: 0.75rem; padding: 0.75rem; - background: #1e293b; - border: 1px solid #f59e0b; + background: var(--surface); + border: 1px solid var(--warn); border-radius: 0.5rem; } @@ -950,7 +990,7 @@ dialog label select:focus { .question-text { font-weight: 600; - color: #f59e0b; + color: var(--warn); font-size: 0.9rem; } @@ -962,18 +1002,18 @@ dialog label select:focus { .btn-question-option { padding: 0.375rem 0.75rem; - border: 1px solid #475569; + border: 1px solid var(--border); border-radius: 0.375rem; - background: #334155; - color: #e2e8f0; + background: var(--surface-1); + color: var(--text); cursor: pointer; font-size: 0.8rem; transition: background 0.15s, border-color 0.15s; } .btn-question-option:hover:not(:disabled) { - background: #475569; - border-color: #f59e0b; + background: var(--bg-hover); + border-color: var(--warn); } .btn-question-option:disabled { @@ -989,23 +1029,23 @@ dialog label select:focus { .question-input { flex: 1; padding: 0.375rem 0.5rem; - border: 1px solid #475569; + border: 1px solid var(--border); border-radius: 0.375rem; - background: #0f172a; - color: #e2e8f0; + background: var(--bg); + color: var(--text); font-size: 0.8rem; } .question-input:focus { outline: none; - border-color: #f59e0b; + border-color: var(--warn); } .btn-question-send { padding: 0.375rem 0.75rem; - border: 1px solid #f59e0b; + border: 1px solid var(--warn); border-radius: 0.375rem; - background: #f59e0b; + background: var(--warn); color: #0f172a; font-weight: 600; cursor: pointer; @@ -1013,7 +1053,7 @@ dialog label select:focus { } .btn-question-send:hover:not(:disabled) { - background: #fbbf24; + filter: brightness(1.1); } .btn-question-send:disabled { @@ -1022,7 +1062,7 @@ dialog label select:focus { } .question-error { - color: #f87171; + color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem; } @@ -1124,7 +1164,7 @@ dialog label select:focus { } .log-error { - color: #f87171; + color: var(--danger); font-style: italic; } @@ -1335,7 +1375,7 @@ dialog label select:focus { .task-summary-text { padding: 0.75rem 1rem; - background: var(--surface-1, #f8f9fa); + background: var(--surface-1); border-radius: 6px; line-height: 1.5; white-space: pre-wrap; @@ -1345,16 +1385,9 @@ dialog label select:focus { flex-direction: column; gap: 0.75rem; } -.qa-item { - padding: 0.5rem 0.75rem; - border-left: 3px solid; - border-radius: 0 4px 4px 0; -} -.qa-question { border-color: #3b82f6; background: rgba(59,130,246,0.05); } -.qa-answer { border-color: #10b981; background: rgba(16,185,129,0.05); } .qa-label { font-weight: 600; font-size: 0.85em; display: block; margin-bottom: 0.25rem; } .qa-content { white-space: pre-wrap; } -.qa-timestamp { font-size: 0.75em; color: var(--text-muted, #6b7280); margin-top: 0.25rem; display: block; } +.qa-timestamp { font-size: 0.75em; color: var(--text-muted); margin-top: 0.25rem; display: block; } .inline-edit-success { color: var(--state-completed); @@ -1393,11 +1426,11 @@ dialog label select:focus { .qa-options { font-size: 0.82rem; - color: var(--text-muted, #94a3b8); + color: var(--text-muted); } .qa-answer { - color: var(--accent, #60a5fa); + color: var(--accent); font-style: italic; } |