summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/style.css530
1 files changed, 173 insertions, 357 deletions
diff --git a/web/style.css b/web/style.css
index b3b3cde..78bfffe 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
/* Design tokens */
:root {
@@ -13,12 +13,12 @@
--state-blocked: #818cf8;
--state-ready: #34d399;
- --bg: #080f1a;
- --surface: rgba(15, 23, 42, 0.80);
+ --bg: #020617;
+ --surface: rgba(15, 23, 42, 0.8);
--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);
+ --border: rgba(255, 255, 255, 0.05);
+ --border-light: rgba(255, 255, 255, 0.10);
--text: #e2e8f0;
--text-muted: #94a3b8;
--accent: #38bdf8;
@@ -29,16 +29,16 @@
--danger: #f87171;
/* Component aliases */
- --bg-card: rgba(15, 23, 42, 0.80);
- --card-bg: rgba(15, 23, 42, 0.80);
+ --bg-card: rgba(15, 23, 42, 0.8);
+ --card-bg: rgba(15, 23, 42, 0.8);
--bg-elevated: rgba(22, 33, 62, 0.85);
--bg-hover: rgba(30, 44, 80, 0.90);
- --code-bg: rgba(8, 15, 26, 0.90);
+ --code-bg: rgba(2, 6, 23, 0.90);
--font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;
- --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+ --font-sans: 'Inter', system-ui, sans-serif;
/* Glass-morphism */
- --glass-bg: rgba(15, 23, 42, 0.72);
+ --glass-bg: rgba(15, 23, 42, 0.8);
--glass-blur: 12px;
--glass-border: rgba(255, 255, 255, 0.05);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
@@ -56,6 +56,8 @@ body {
background: var(--bg);
color: var(--text);
min-height: 100dvh;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
/* Header */
@@ -76,7 +78,7 @@ header {
header h1 {
font-size: 1.25rem;
- font-weight: 700;
+ font-weight: 600;
color: var(--accent);
letter-spacing: -0.01em;
max-width: 640px;
@@ -93,7 +95,7 @@ header h1 {
.agent-selector {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
color: var(--text);
padding: 0.4em 0.6em;
font-size: 0.85rem;
@@ -112,8 +114,8 @@ header h1 {
-webkit-backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--glass-border);
display: flex;
- gap: 0;
- padding: 0;
+ gap: 0.25rem;
+ padding: 0.5rem 0.75rem;
max-width: 100%;
position: sticky;
top: 57px;
@@ -123,25 +125,25 @@ header h1 {
.tab {
flex: 1;
text-align: center;
- font-size: 0.88rem;
- font-weight: 600;
- padding: 0.65em 0;
+ font-size: 0.875rem;
+ font-weight: 300;
+ padding: 0.5rem 1rem;
border: none;
- border-bottom: 2px solid transparent;
+ border-radius: 0.5rem;
background: transparent;
- color: var(--text-muted);
+ color: rgba(255, 255, 255, 0.7);
cursor: pointer;
- transition: color 0.15s, border-color 0.15s;
- margin-bottom: -1px;
+ transition: background 0.15s, color 0.15s;
}
.tab:hover {
- color: var(--text);
+ color: #fff;
+ background: rgba(255, 255, 255, 0.08);
}
.tab.active {
- color: var(--accent);
- border-bottom-color: var(--accent);
+ background: rgba(255, 255, 255, 0.2);
+ color: #fff;
}
.tab-count-badge {
@@ -150,7 +152,7 @@ header h1 {
padding: 0 0.4em;
border-radius: 999px;
font-size: 0.7em;
- font-weight: 700;
+ font-weight: 600;
line-height: 1.5;
background: var(--accent);
color: #fff;
@@ -180,7 +182,7 @@ main {
.panel-header h2 {
font-size: 1rem;
- font-weight: 700;
+ font-weight: 600;
}
/* Task list toolbar */
@@ -195,7 +197,7 @@ main {
.filter-tab {
font-size: 0.78rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.3em 0.75em;
border: none;
border-bottom: 2px solid transparent;
@@ -241,12 +243,20 @@ main {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
padding: 0.875rem 1rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
box-shadow: var(--glass-shadow);
+ cursor: pointer;
+ position: relative;
+ 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);
}
.task-card-header {
@@ -258,7 +268,7 @@ main {
}
.task-name {
- font-weight: 600;
+ font-weight: 500;
font-size: 0.95rem;
flex: 1;
min-width: 0;
@@ -302,10 +312,10 @@ main {
.task-project {
font-size: 0.72rem;
- font-weight: 600;
+ font-weight: 500;
color: var(--text-muted);
- background: var(--bg-elevated, #2a2a2a);
- border: 1px solid var(--border, #444);
+ background: var(--bg-elevated, rgba(22,33,62,0.85));
+ border: 1px solid var(--border);
border-radius: 3px;
padding: 0 0.35rem;
letter-spacing: 0.02em;
@@ -339,14 +349,18 @@ main {
.btn-run {
font-size: 0.8rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.35em 0.85em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
- background: var(--accent);
- color: #0f172a;
- transition: opacity 0.15s;
+ background: #0ea5e9;
+ color: #fff;
+ transition: background 0.15s;
+}
+
+.btn-run:hover:not(:disabled) {
+ background: #38bdf8;
}
.btn-run:disabled {
@@ -356,9 +370,9 @@ main {
.btn-cancel {
font-size: 0.8rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.35em 0.85em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
background: var(--state-failed);
@@ -373,14 +387,18 @@ main {
.btn-restart {
font-size: 0.8rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.35em 0.85em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
- background: var(--text-muted);
- color: #0f172a;
- transition: opacity 0.15s;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--text);
+ transition: background 0.15s;
+}
+
+.btn-restart:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.2);
}
.btn-restart:disabled {
@@ -390,14 +408,18 @@ main {
.btn-resume {
font-size: 0.8rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.35em 0.85em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
- background: var(--text-muted);
- color: #0f172a;
- transition: opacity 0.15s;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--text);
+ transition: background 0.15s;
+}
+
+.btn-resume:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.2);
}
.btn-resume:disabled {
@@ -407,9 +429,9 @@ main {
.btn-accept {
font-size: 0.8rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.35em 0.85em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
background: var(--state-completed);
@@ -424,17 +446,21 @@ main {
.btn-reject {
font-size: 0.8rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.35em 0.85em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
- background: var(--text-muted);
- color: #0f172a;
- transition: opacity 0.15s;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--text);
+ transition: background 0.15s;
margin-left: 0.375rem;
}
+.btn-reject:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.2);
+}
+
.btn-reject:disabled {
opacity: 0.5;
cursor: not-allowed;
@@ -481,17 +507,23 @@ main {
flex: 1;
font-size: 0.8rem;
padding: 0.3em 0.6em;
- border-radius: 0.375rem;
- border: 1px solid var(--border);
- background: var(--glass-bg);
+ border-radius: 0.5rem;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ background: var(--bg);
color: var(--text);
+ font-family: inherit;
+}
+
+.task-answer-input:focus {
+ outline: 2px solid var(--accent);
+ outline-offset: 1px;
}
.btn-answer {
font-size: 0.8rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.35em 0.85em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
background: var(--state-blocked);
@@ -513,18 +545,18 @@ main {
/* Primary button */
.btn-primary {
font-size: 0.85rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.4em 1em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
- background: var(--accent);
- color: #0f172a;
- transition: filter 0.15s;
+ background: #0ea5e9;
+ color: #fff;
+ transition: background 0.15s;
}
.btn-primary:hover:not(:disabled) {
- filter: brightness(1.1);
+ background: #38bdf8;
}
.btn-primary:disabled {
@@ -535,19 +567,18 @@ main {
/* Secondary button */
.btn-secondary {
font-size: 0.85rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.4em 1em;
- border-radius: 0.375rem;
- border: 1px solid var(--border);
- background: transparent;
- color: var(--text-muted);
+ border-radius: 0.5rem;
+ border: none;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--text);
cursor: pointer;
- transition: background 0.15s, color 0.15s;
+ transition: background 0.15s;
}
-.btn-secondary:hover {
- background: var(--border);
- color: var(--text);
+.btn-secondary:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.2);
}
.btn-secondary:disabled {
@@ -558,13 +589,13 @@ main {
/* Danger button */
.btn-danger {
font-size: 0.85rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.4em 1em;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: none;
cursor: pointer;
background: var(--state-failed);
- color: #0f172a;
+ color: #fff;
transition: opacity 0.15s;
}
@@ -585,7 +616,7 @@ dialog {
-webkit-backdrop-filter: blur(var(--glass-blur));
color: var(--text);
border: 1px solid var(--glass-border);
- border-radius: 8px;
+ border-radius: 0.75rem;
padding: 1.5rem;
max-width: 480px;
width: 100%;
@@ -600,7 +631,7 @@ dialog::backdrop {
dialog h2 {
font-size: 1.1rem;
- font-weight: 700;
+ font-weight: 600;
margin-bottom: 1rem;
}
@@ -618,9 +649,9 @@ dialog label select {
display: block;
width: 100%;
margin-top: 4px;
- background: rgba(8, 15, 26, 0.70);
- border: 1px solid var(--border);
- border-radius: 0.375rem;
+ background: var(--bg);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 0.5rem;
color: var(--text);
padding: 0.4em 0.6em;
font-size: 0.9rem;
@@ -645,16 +676,16 @@ dialog label select:focus {
.form-actions button[type="button"] {
font-size: 0.85rem;
padding: 0.4em 1em;
- border-radius: 0.375rem;
- border: 1px solid var(--border);
- background: transparent;
- color: var(--text-muted);
+ border-radius: 0.5rem;
+ border: none;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--text);
cursor: pointer;
+ transition: background 0.15s;
}
.form-actions button[type="button"]:hover {
- background: var(--border);
- color: var(--text);
+ background: rgba(255, 255, 255, 0.2);
}
/* Inline form error */
@@ -707,7 +738,7 @@ dialog label select:focus {
.task-panel-header h2 {
font-size: 1rem;
- font-weight: 700;
+ font-weight: 600;
margin: 0;
flex: 1;
min-width: 0;
@@ -725,13 +756,13 @@ dialog label select:focus {
line-height: 1;
padding: 0.15em 0.35em;
margin-left: 0.5rem;
- border-radius: 0.25rem;
+ border-radius: 0.375rem;
flex-shrink: 0;
}
.btn-close-panel:hover {
color: var(--text);
- background: var(--border);
+ background: rgba(255, 255, 255, 0.1);
}
.task-panel-content {
@@ -751,7 +782,7 @@ dialog label select:focus {
.panel-section-title {
font-size: 0.68rem;
- font-weight: 700;
+ font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
@@ -801,7 +832,7 @@ dialog label select:focus {
.panel-code {
background: var(--code-bg);
border: 1px solid var(--border);
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
padding: 0.625rem 0.75rem;
font-family: monospace;
font-size: 0.8rem;
@@ -820,17 +851,6 @@ dialog label select:focus {
margin-top: 0.1rem;
}
-/* 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 */
.panel-loading {
color: var(--text-muted);
@@ -857,7 +877,7 @@ dialog label select:focus {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
padding: 0.625rem 0.75rem;
display: flex;
align-items: center;
@@ -958,9 +978,9 @@ dialog label select:focus {
.btn-view-logs {
font-size: 0.72rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.2em 0.55em;
- border-radius: 0.25rem;
+ border-radius: 0.375rem;
border: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
@@ -970,7 +990,7 @@ dialog label select:focus {
}
.btn-view-logs:hover {
- background: var(--border);
+ background: rgba(255, 255, 255, 0.1);
color: var(--text);
}
@@ -993,7 +1013,7 @@ dialog label select:focus {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--warn);
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
}
.question-item {
@@ -1003,7 +1023,7 @@ dialog label select:focus {
}
.question-text {
- font-weight: 600;
+ font-weight: 500;
color: var(--warn);
font-size: 0.9rem;
}
@@ -1017,8 +1037,8 @@ dialog label select:focus {
.btn-question-option {
padding: 0.375rem 0.75rem;
border: 1px solid var(--border);
- border-radius: 0.375rem;
- background: var(--glass-bg);
+ border-radius: 0.5rem;
+ background: rgba(255, 255, 255, 0.05);
color: var(--text);
cursor: pointer;
font-size: 0.8rem;
@@ -1026,7 +1046,7 @@ dialog label select:focus {
}
.btn-question-option:hover:not(:disabled) {
- background: var(--bg-hover);
+ background: rgba(255, 255, 255, 0.12);
border-color: var(--warn);
}
@@ -1043,11 +1063,12 @@ dialog label select:focus {
.question-input {
flex: 1;
padding: 0.375rem 0.5rem;
- border: 1px solid var(--border);
- border-radius: 0.375rem;
- background: var(--glass-bg);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 0.5rem;
+ background: var(--bg);
color: var(--text);
font-size: 0.8rem;
+ font-family: inherit;
}
.question-input:focus {
@@ -1058,7 +1079,7 @@ dialog label select:focus {
.btn-question-send {
padding: 0.375rem 0.75rem;
border: 1px solid var(--warn);
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
background: var(--warn);
color: #0f172a;
font-weight: 600;
@@ -1090,22 +1111,21 @@ dialog label select:focus {
.log-back-btn {
font-size: 0.78rem;
- font-weight: 600;
+ font-weight: 500;
padding: 0.3em 0.75em;
- border-radius: 0.375rem;
- border: 1px solid var(--border);
- background: transparent;
- color: var(--text-muted);
+ border-radius: 0.5rem;
+ border: none;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--text);
cursor: pointer;
- transition: background 0.15s, color 0.15s;
+ transition: background 0.15s;
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
}
.log-back-btn:hover {
- background: var(--border);
- color: var(--text);
+ background: rgba(255, 255, 255, 0.2);
}
@keyframes pulse-dot {
@@ -1140,7 +1160,7 @@ dialog label select:focus {
max-height: 400px;
background: var(--code-bg);
padding: 0.625rem 0.75rem;
- border-radius: 0.375rem;
+ border-radius: 0.5rem;
border: 1px solid var(--border);
}
@@ -1227,7 +1247,7 @@ dialog label select:focus {
.running-current h2 {
font-size: 1rem;
- font-weight: 600;
+ font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -1245,7 +1265,7 @@ dialog label select:focus {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
- border-radius: 6px;
+ border-radius: 0.75rem;
padding: 0.75rem;
font-family: monospace;
font-size: 0.8rem;
@@ -1262,7 +1282,7 @@ dialog label select:focus {
.running-history h2 {
font-size: 1rem;
- font-weight: 600;
+ font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -1291,10 +1311,6 @@ dialog label select:focus {
/* ── Task delete button ──────────────────────────────────────────────────── */
-.task-card {
- position: relative;
-}
-
.btn-delete-task {
position: absolute;
top: 6px;
@@ -1345,9 +1361,9 @@ dialog label select:focus {
display: block;
width: 100%;
margin-top: 4px;
- background: rgba(8, 15, 26, 0.70);
- border: 1px solid var(--border);
- border-radius: 0.375rem;
+ background: var(--bg);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 0.5rem;
color: var(--text);
padding: 0.4em 0.6em;
font-size: 0.9rem;
@@ -1371,16 +1387,16 @@ dialog label select:focus {
.inline-edit-actions button[type="button"]:not(.btn-primary) {
font-size: 0.85rem;
padding: 0.4em 1em;
- border-radius: 0.375rem;
- border: 1px solid var(--border);
- background: transparent;
- color: var(--text-muted);
+ border-radius: 0.5rem;
+ border: none;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--text);
cursor: pointer;
+ transition: background 0.15s;
}
.inline-edit-actions button[type="button"]:not(.btn-primary):hover {
- background: var(--border);
- color: var(--text);
+ background: rgba(255, 255, 255, 0.2);
}
.inline-edit-error {
@@ -1395,7 +1411,7 @@ dialog label select:focus {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
- border-radius: 6px;
+ border-radius: 0.75rem;
line-height: 1.5;
white-space: pre-wrap;
}
@@ -1404,7 +1420,7 @@ dialog label select:focus {
flex-direction: column;
gap: 0.75rem;
}
-.qa-label { font-weight: 600; font-size: 0.85em; display: block; margin-bottom: 0.25rem; }
+.qa-label { font-weight: 500; 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); margin-top: 0.25rem; display: block; }
@@ -1466,7 +1482,7 @@ dialog label select:focus {
.stats-section h2 {
font-size: 1rem;
- font-weight: 600;
+ font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -1485,7 +1501,7 @@ dialog label select:focus {
flex-direction: column;
align-items: center;
padding: 0.75rem 1.25rem;
- border-radius: 8px;
+ border-radius: 0.75rem;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
@@ -1507,7 +1523,7 @@ dialog label select:focus {
.stats-count-number {
font-size: 1.75rem;
- font-weight: 700;
+ font-weight: 600;
line-height: 1;
}
@@ -1539,7 +1555,7 @@ dialog label select:focus {
flex-direction: column;
align-items: center;
padding: 1rem;
- border-radius: 8px;
+ border-radius: 0.75rem;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
@@ -1550,7 +1566,7 @@ dialog label select:focus {
.stats-kpi-value {
font-size: 1.5rem;
- font-weight: 700;
+ font-weight: 600;
line-height: 1;
}
@@ -1770,7 +1786,7 @@ dialog label select:focus {
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem 1rem;
- border-radius: 8px;
+ border-radius: 0.75rem;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
@@ -1873,7 +1889,7 @@ dialog label select:focus {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
- border-radius: 6px;
+ border-radius: 0.75rem;
padding: 0.875rem 1rem;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
@@ -1882,7 +1898,7 @@ dialog label select:focus {
.story-card:hover {
border-color: var(--accent);
- background: var(--surface-hover, var(--surface));
+ background: rgba(56, 189, 248, 0.04);
}
.story-card-header {
@@ -1893,7 +1909,7 @@ dialog label select:focus {
}
.story-name {
- font-weight: 600;
+ font-weight: 500;
flex: 1;
}
@@ -1918,208 +1934,8 @@ dialog label select:focus {
.story-meta {
display: flex;
- gap: 1rem;
- font-size: 0.8rem;
- color: var(--text-muted);
-}
-
-.story-branch {
- font-family: var(--font-mono, monospace);
-}
-
-/* Story modals */
-.story-modal-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 1rem;
-}
-
-.story-modal-header h2 {
- margin: 0;
-}
-
-.story-modal-body {
- display: flex;
- flex-direction: column;
- gap: 0.875rem;
-}
-
-#story-plan-area {
- background: var(--code-bg, #1e293b);
- border: 1px solid var(--border);
- border-radius: 4px;
- padding: 0.875rem;
- font-size: 0.85rem;
-}
-
-.story-plan-name {
- font-weight: 600;
- margin: 0 0 0.25rem;
-}
-
-.story-plan-branch {
- font-family: var(--font-mono, monospace);
- font-size: 0.8rem;
- color: var(--text-muted);
- margin: 0 0 0.75rem;
-}
-
-.story-plan-section {
- font-weight: 600;
- margin: 0.75rem 0 0.25rem;
-}
-
-.story-plan-tasks {
- margin: 0;
- padding-left: 1.25rem;
-}
-
-.story-plan-tasks li {
- margin-bottom: 0.25rem;
-}
-
-.story-plan-tasks ul {
- font-size: 0.8rem;
- color: var(--text-muted);
- margin: 0.2rem 0 0;
- padding-left: 1rem;
-}
-
-.story-detail-body {
- padding: 0.25rem 0;
-}
-
-/* ── Missing tag chip ───────────────────────────────────────────────────── */
-
-.tag-chip {
- display: inline-block;
- font-size: 0.72rem;
- font-weight: 600;
- padding: 0.15em 0.55em;
- border-radius: 3px;
- background: var(--bg-elevated);
- border: 1px solid var(--border);
- color: var(--text-muted);
- letter-spacing: 0.02em;
-}
-
-/* ── Story project badge ────────────────────────────────────────────────── */
-
-.story-project {
- font-size: 0.72rem;
- font-weight: 600;
- color: var(--text-muted);
- background: var(--bg-elevated);
- border: 1px solid var(--border);
- border-radius: 3px;
- padding: 0 0.35rem;
- letter-spacing: 0.02em;
-}
-
-/* ── Elaborate section & banner ─────────────────────────────────────────── */
-
-.elaborate-section {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- margin-bottom: 0.25rem;
-}
-
-.elaborate-hint {
+ gap: 0.75rem;
font-size: 0.78rem;
color: var(--text-muted);
- font-style: italic;
-}
-
-.elaborate-banner {
- font-size: 0.82rem;
- color: var(--state-completed);
- padding: 0.35em 0.625em;
- border-radius: 0.375rem;
- background: color-mix(in srgb, var(--state-completed) 12%, transparent);
- border: 1px solid color-mix(in srgb, var(--state-completed) 30%, transparent);
-}
-
-/* ── Form divider ───────────────────────────────────────────────────────── */
-
-hr.form-divider {
- border: none;
- border-top: 1px solid var(--border);
- margin: 0.75rem 0;
-}
-
-/* ── Validate header / icon / lists ─────────────────────────────────────── */
-
-.validate-header {
- display: flex;
- align-items: center;
- gap: 0.4rem;
- font-size: 0.85rem;
- font-weight: 600;
- margin-bottom: 0.375rem;
-}
-
-.validate-icon {
- font-size: 1rem;
- line-height: 1;
- flex-shrink: 0;
-}
-
-.validate-questions,
-.validate-suggestions {
- margin: 0.25rem 0 0;
- padding-left: 1.25rem;
- font-size: 0.82rem;
- display: flex;
- flex-direction: column;
- gap: 0.2rem;
-}
-
-/* ── Action button hover states ─────────────────────────────────────────── */
-
-.btn-run:hover:not(:disabled),
-.btn-accept:hover:not(:disabled) {
- filter: brightness(1.1);
-}
-
-.btn-cancel:hover:not(:disabled) {
- filter: brightness(1.15);
-}
-
-.btn-restart:hover:not(:disabled),
-.btn-resume:hover:not(:disabled),
-.btn-reject:hover:not(:disabled) {
- filter: brightness(1.12);
-}
-
-.btn-answer:hover:not(:disabled) {
- filter: brightness(1.1);
-}
-
-.btn-danger:hover:not(:disabled) {
- filter: brightness(1.1);
-}
-
-/* ── Dialog overflow on small screens ───────────────────────────────────── */
-
-dialog {
- max-height: 90dvh;
- overflow-y: auto;
-}
-
-/* ── Panel backdrop glass blur ──────────────────────────────────────────── */
-
-.panel-backdrop {
- backdrop-filter: blur(4px);
- -webkit-backdrop-filter: blur(4px);
-}
-
-/* ── Stats bar chart container ──────────────────────────────────────────── */
-
-.stats-bar-chart {
- margin-bottom: 1.25rem;
+ flex-wrap: wrap;
}
-
-/* Fix: READY state box should use --state-ready, not --state-running */
-.stats-count-box[data-state="READY"] { border-color: var(--state-ready); }
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-28 07:16:21 +0000