summaryrefslogtreecommitdiff
path: root/web/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'web/style.css')
-rw-r--r--web/style.css119
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;
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-28 09:25:55 +0000