From dc8330df6a3ce414648028993a43a2ee58456468 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Sun, 9 Feb 2025 22:25:44 -0800
Subject: [PATCH] Revise observable styling

Distinguish constraints from observables using dark background rather
than marker. Customize focus highlighting. Drop the input type selector
that used to make styling apply to the Lorentz product field but not the
constraint activation check box.
---
 app-proto/main.css | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/app-proto/main.css b/app-proto/main.css
index f544e19..46bdf84 100644
--- a/app-proto/main.css
+++ b/app-proto/main.css
@@ -3,7 +3,8 @@
   --text-bright: white;
   --text-invalid: #f58fc2; /* bright pink */
   --border: #555; /* light gray */
-  --border-focus: #aaa; /* bright gray */
+  --border-focus-dark: #aaa; /* bright gray */
+  --border-focus-light: white;
   --border-invalid: #70495c; /* dusky pink */
   --selection-highlight: #444; /* medium gray */
   --page-background: #222; /* dark gray */
@@ -131,14 +132,24 @@ details[open]:has(li) .element-switch::after {
   color: var(--text-invalid);
 }
 
-.observable > input[type=text] {
+.observable > input {
   color: inherit;
   background-color: inherit;
   border: 1px solid var(--border);
   border-radius: 2px;
 }
 
-.observable.invalid-constraint > input[type=text] {
+.observable > input::placeholder {
+  color: inherit;
+  opacity: 54%;
+  font-style: italic;
+}
+
+.observable.valid-constraint > input {
+  background-color: var(--display-background);
+}
+
+.observable.invalid-constraint > input {
   border-color: var(--border-invalid);
 }
 
@@ -150,10 +161,6 @@ details[open]:has(li) .element-switch::after {
   font-style: normal;
 }
 
-.valid-constraint > .status::after, details:has(.valid-constraint):not([open]) .status::after {
-  content: '🔗';
-}
-
 .invalid-constraint > .status::after, details:has(.invalid-constraint):not([open]) .status::after {
   content: '⚠';
   color: var(--text-invalid);
@@ -171,5 +178,11 @@ canvas {
 }
 
 canvas:focus {
-  border-color: var(--border-focus);
+  border-color: var(--border-focus-dark);
+  outline: none;
+}
+
+input:focus {
+  border-color: var(--border-focus-light);
+  outline: none;
 }
\ No newline at end of file