From a2ce10230cbb90be74383c1fb334a463bad41c37 Mon Sep 17 00:00:00 2001
From: Claudomator Agent <agent@claudomator.local>
Date: Thu, 26 Mar 2026 07:13:20 +0000
Subject: style: polish Claudomator UI — close remaining gaps for full Doot
 visual parity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add .tag-chip rule for task tags displayed in the detail panel
- Add .story-project badge style (mirrors .task-project, was unstyled)
- Add .elaborate-section flex layout, .elaborate-hint muted italic text,
  and .elaborate-banner success callout (green tinted glass) after AI draft
- Add hr.form-divider styling (was invisible — no border rule)
- Add .validate-header (flex row + font-weight) and .validate-icon, plus
  .validate-questions / .validate-suggestions list containers
- Add hover filter:brightness states for all action buttons (btn-run,
  btn-cancel, btn-restart, btn-resume, btn-accept, btn-reject, btn-answer,
  btn-danger) — buttons had transition but no :hover rule
- Add max-height + overflow-y to dialog for overflow on small screens
- Add backdrop-filter blur to .panel-backdrop for glass consistency
- Add .stats-bar-chart container margin rule
- Fix .stats-count-box[data-state="READY"] to use --state-ready (was
  incorrectly using --state-running)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/style.css | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)

diff --git a/web/style.css b/web/style.css
index e9e797d..b3b3cde 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1989,3 +1989,137 @@ dialog label select:focus {
 .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 {
+  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;
+}
+
+/* Fix: READY state box should use --state-ready, not --state-running */
+.stats-count-box[data-state="READY"] { border-color: var(--state-ready); }
-- 
cgit v1.2.3