Make model status message less prominent when ready (#177)

simonw · claude · web-flow · commit 5eed328d7e2c · 2025-12-22T12:54:18.000-08:00
Use semi-transparent white background with smaller, non-bold text
that looks good against both red and green page backgrounds.

Co-authored-by: Claude &lt;noreply@anthropic.com&gt;
diff --git a/is-it-a-bird.html b/is-it-a-bird.html
@@ -120,8 +120,11 @@
       color: #856404;
     }
     #model-status.ready {
-      background: #d4edda;
-      color: #155724;
+      background: rgba(255, 255, 255, 0.5);
+      color: #333;
+      font-weight: normal;
+      font-size: 14px;
+      padding: 10px;
     }
     #model-status.error {
       background: #f8d7da;

Original file line number	Diff line number	Diff line change
`@@ -120,8 +120,11 @@`
`120`	`120`	`color: #856404;`
`121`	`121`	`}`
`122`	`122`	`#model-status.ready {`
`123`		`- background: #d4edda;`
`124`		`- color: #155724;`
	`123`	`+ background: rgba(255, 255, 255, 0.5);`
	`124`	`+ color: #333;`
	`125`	`+ font-weight: normal;`
	`126`	`+ font-size: 14px;`
	`127`	`+ padding: 10px;`
`125`	`128`	`}`
`126`	`129`	`#model-status.error {`
`127`	`130`	`background: #f8d7da;`