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;
 }