summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/style.css118
1 files changed, 75 insertions, 43 deletions
diff --git a/web/style.css b/web/style.css
index 83c88e3..e9e797d 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
/* Design tokens */
:root {
--state-pending: #94a3b8;
@@ -11,12 +13,12 @@
--state-blocked: #818cf8;
--state-ready: #34d399;
- --bg: #0f172a;
- --surface: #1e293b;
- --surface-1: #243044;
- --surface-hover: #263350;
- --border: #334155;
- --border-light: #3d506a;
+ --bg: #080f1a;
+ --surface: rgba(15, 23, 42, 0.80);
+ --surface-1: rgba(22, 33, 62, 0.85);
+ --surface-hover: rgba(30, 44, 80, 0.90);
+ --border: rgba(255, 255, 255, 0.08);
+ --border-light: rgba(255, 255, 255, 0.12);
--text: #e2e8f0;
--text-muted: #94a3b8;
--accent: #38bdf8;
@@ -27,16 +29,19 @@
--danger: #f87171;
/* Component aliases */
- --bg-card: #1a2640;
- --card-bg: #1a2640;
- --bg-elevated: #243044;
- --bg-hover: #2d3f5a;
- --code-bg: #111c2d;
+ --bg-card: rgba(15, 23, 42, 0.80);
+ --card-bg: rgba(15, 23, 42, 0.80);
+ --bg-elevated: rgba(22, 33, 62, 0.85);
+ --bg-hover: rgba(30, 44, 80, 0.90);
+ --code-bg: rgba(8, 15, 26, 0.90);
--font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;
+ --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
/* Glass-morphism */
- --glass-bg: rgba(30, 41, 59, 0.75);
- --glass-blur: 12px;
+ --glass-bg: rgba(15, 23, 42, 0.72);
+ --glass-blur: 12px;
+ --glass-border: rgba(255, 255, 255, 0.05);
+ --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
/* Reset */
@@ -47,7 +52,7 @@
}
body {
- font-family: system-ui, -apple-system, sans-serif;
+ font-family: var(--font-sans);
background: var(--bg);
color: var(--text);
min-height: 100dvh;
@@ -58,7 +63,7 @@ header {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
- border-bottom: 1px solid var(--border);
+ border-bottom: 1px solid var(--glass-border);
padding: 1rem;
position: sticky;
top: 0;
@@ -86,8 +91,8 @@ header h1 {
}
.agent-selector {
- background: var(--bg);
- border: 1px solid var(--border);
+ background: var(--glass-bg);
+ border: 1px solid var(--glass-border);
border-radius: 0.375rem;
color: var(--text);
padding: 0.4em 0.6em;
@@ -105,7 +110,7 @@ header h1 {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
- border-bottom: 1px solid var(--border);
+ border-bottom: 1px solid var(--glass-border);
display: flex;
gap: 0;
padding: 0;
@@ -232,13 +237,16 @@ main {
/* Task card */
.task-card {
- background: var(--surface);
- border: 1px solid var(--border);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
border-radius: 0.5rem;
padding: 0.875rem 1rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
+ box-shadow: var(--glass-shadow);
}
.task-card-header {
@@ -475,7 +483,7 @@ main {
padding: 0.3em 0.6em;
border-radius: 0.375rem;
border: 1px solid var(--border);
- background: var(--bg);
+ background: var(--glass-bg);
color: var(--text);
}
@@ -576,11 +584,12 @@ dialog {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
color: var(--text);
- border: 1px solid var(--border);
+ border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 1.5rem;
max-width: 480px;
width: 100%;
+ box-shadow: var(--glass-shadow);
}
dialog::backdrop {
@@ -609,7 +618,7 @@ dialog label select {
display: block;
width: 100%;
margin-top: 4px;
- background: var(--bg);
+ background: rgba(8, 15, 26, 0.70);
border: 1px solid var(--border);
border-radius: 0.375rem;
color: var(--text);
@@ -673,7 +682,8 @@ dialog label select:focus {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
- border-left: 1px solid var(--border);
+ border-left: 1px solid var(--glass-border);
+ box-shadow: var(--glass-shadow);
z-index: 30;
display: flex;
flex-direction: column;
@@ -789,7 +799,7 @@ dialog label select:focus {
}
.panel-code {
- background: var(--bg);
+ background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 0.375rem;
padding: 0.625rem 0.75rem;
@@ -843,8 +853,10 @@ dialog label select:focus {
}
.execution-row {
- background: var(--bg);
- border: 1px solid var(--border);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
border-radius: 0.375rem;
padding: 0.625rem 0.75rem;
display: flex;
@@ -977,7 +989,9 @@ dialog label select:focus {
.question-banner {
margin-top: 0.75rem;
padding: 0.75rem;
- background: var(--surface);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--warn);
border-radius: 0.5rem;
}
@@ -1004,7 +1018,7 @@ dialog label select:focus {
padding: 0.375rem 0.75rem;
border: 1px solid var(--border);
border-radius: 0.375rem;
- background: var(--surface-1);
+ background: var(--glass-bg);
color: var(--text);
cursor: pointer;
font-size: 0.8rem;
@@ -1031,7 +1045,7 @@ dialog label select:focus {
padding: 0.375rem 0.5rem;
border: 1px solid var(--border);
border-radius: 0.375rem;
- background: var(--bg);
+ background: var(--glass-bg);
color: var(--text);
font-size: 0.8rem;
}
@@ -1124,7 +1138,7 @@ dialog label select:focus {
font-size: 0.8rem;
overflow-y: auto;
max-height: 400px;
- background: var(--bg);
+ background: var(--code-bg);
padding: 0.625rem 0.75rem;
border-radius: 0.375rem;
border: 1px solid var(--border);
@@ -1227,8 +1241,10 @@ dialog label select:focus {
}
.running-log {
- background: var(--bg-card);
- border: 1px solid var(--border);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
border-radius: 6px;
padding: 0.75rem;
font-family: monospace;
@@ -1329,7 +1345,7 @@ dialog label select:focus {
display: block;
width: 100%;
margin-top: 4px;
- background: var(--bg);
+ background: rgba(8, 15, 26, 0.70);
border: 1px solid var(--border);
border-radius: 0.375rem;
color: var(--text);
@@ -1375,7 +1391,10 @@ dialog label select:focus {
.task-summary-text {
padding: 0.75rem 1rem;
- background: var(--surface-1);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
border-radius: 6px;
line-height: 1.5;
white-space: pre-wrap;
@@ -1467,8 +1486,11 @@ dialog label select:focus {
align-items: center;
padding: 0.75rem 1.25rem;
border-radius: 8px;
- background: var(--card-bg);
- border: 1px solid var(--border);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
+ box-shadow: var(--glass-shadow);
min-width: 80px;
}
@@ -1518,8 +1540,11 @@ dialog label select:focus {
align-items: center;
padding: 1rem;
border-radius: 8px;
- background: var(--card-bg);
- border: 1px solid var(--border);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
+ box-shadow: var(--glass-shadow);
text-align: center;
}
@@ -1746,7 +1771,11 @@ dialog label select:focus {
gap: 0.25rem;
padding: 0.75rem 1rem;
border-radius: 8px;
- border: 1px solid var(--border);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
+ box-shadow: var(--glass-shadow);
min-width: 160px;
}
@@ -1794,7 +1823,7 @@ dialog label select:focus {
height: 18px;
border-radius: 4px;
overflow: hidden;
- background: var(--bg-card);
+ background: var(--glass-bg);
width: 100%;
}
@@ -1840,12 +1869,15 @@ dialog label select:focus {
}
.story-card {
- background: var(--surface);
- border: 1px solid var(--border);
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
border-radius: 6px;
padding: 0.875rem 1rem;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
+ box-shadow: var(--glass-shadow);
}
.story-card:hover {
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-28 11:18:42 +0000