glen/dyna3
1
0
Fork 1
Code Issues 26 Pull requests 1 Projects 1 Releases 2 Wiki Activity Actions

Revise observable styling

Browse source 
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.
This commit is contained in:
Aaron Fenyes 2025-02-09 22:25:44 -08:00
parent af2724f934
commit dc8330df6a
1 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app-proto/main.css
View file

@ -3,7 +3,8 @@
--text-bright: white; --text-bright: white;
--text-invalid: #f58fc2; /* bright pink */ --text-invalid: #f58fc2; /* bright pink */
--border: #555; /* light gray */ --border: #555; /* light gray */
--border-focus: #aaa; /* bright gray */ --border-focus-dark: #aaa; /* bright gray */
--border-focus-light: white;
--border-invalid: #70495c; /* dusky pink */ --border-invalid: #70495c; /* dusky pink */
--selection-highlight: #444; /* medium gray */ --selection-highlight: #444; /* medium gray */
--page-background: #222; /* dark gray */ --page-background: #222; /* dark gray */
@ -131,14 +132,24 @@ details[open]:has(li) .element-switch::after {
color: var(--text-invalid); color: var(--text-invalid);
} }
.observable > input[type=text] { .observable > input {
color: inherit; color: inherit;
background-color: inherit; background-color: inherit;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 2px; 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); border-color: var(--border-invalid);
} }
@ -150,10 +161,6 @@ details[open]:has(li) .element-switch::after {
font-style: normal; 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 { .invalid-constraint > .status::after, details:has(.invalid-constraint):not([open]) .status::after {
content: '⚠'; content: '⚠';
color: var(--text-invalid); color: var(--text-invalid);
@ -171,5 +178,11 @@ canvas {
} }
canvas:focus { 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;
} }