forked from glen/dyna3
c54b6bc165
Invalid attempts to specify a regulator's set point are now local to each view of the regulator, and don't affect the regulator model. In particular, a regulator will be valid and in force even when one of its regulator input views is showing an invalid specification attempt. The invalidity indicator should therefore be tied to the input showing the invalid specification, not to the whole regulator outline item.
190 lines
No EOL
3.1 KiB
CSS
190 lines
No EOL
3.1 KiB
CSS
:root {
|
|
--text: #fcfcfc; /* almost white */
|
|
--text-bright: white;
|
|
--text-invalid: #f58fc2; /* bright pink */
|
|
--border: #555; /* light 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 */
|
|
--display-background: #020202; /* almost black */
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
color: var(--text);
|
|
background-color: var(--page-background);
|
|
font-family: 'Fira Sans', sans-serif;
|
|
}
|
|
|
|
/* sidebar */
|
|
|
|
#sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
float: left;
|
|
width: 500px;
|
|
height: 100vh;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border-width: 0px 1px 0px 0px;
|
|
border-style: solid;
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* add-remove */
|
|
|
|
#add-remove {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 8px;
|
|
}
|
|
|
|
#add-remove > button {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: large;
|
|
}
|
|
|
|
/* KLUDGE */
|
|
/*
|
|
for convenience, we're using emoji as temporary icons for some buttons. these
|
|
buttons need to be displayed in an emoji font
|
|
*/
|
|
#add-remove > button.emoji {
|
|
font-family: 'Noto Emoji', sans-serif;
|
|
}
|
|
|
|
/* outline */
|
|
|
|
#outline {
|
|
flex-grow: 1;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
li {
|
|
user-select: none;
|
|
}
|
|
|
|
summary {
|
|
display: flex;
|
|
}
|
|
|
|
summary.selected {
|
|
color: var(--text-bright);
|
|
background-color: var(--selection-highlight);
|
|
}
|
|
|
|
summary > div, .regulator {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.element, .regulator {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.element-switch {
|
|
width: 18px;
|
|
padding-left: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
details:has(li) .element-switch::after {
|
|
content: '▸';
|
|
}
|
|
|
|
details[open]:has(li) .element-switch::after {
|
|
content: '▾';
|
|
}
|
|
|
|
.element-label {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.regulator-label {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.element-representation {
|
|
display: flex;
|
|
}
|
|
|
|
.element-representation > div {
|
|
padding: 2px 0px 0px 0px;
|
|
font-size: 10pt;
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
width: 56px;
|
|
}
|
|
|
|
.regulator {
|
|
font-style: italic;
|
|
}
|
|
|
|
.regulator-type {
|
|
padding: 2px 8px 0px 8px;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.regulator-input {
|
|
color: inherit;
|
|
background-color: inherit;
|
|
border: 1px solid var(--border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.regulator-input::placeholder {
|
|
color: inherit;
|
|
opacity: 54%;
|
|
font-style: italic;
|
|
}
|
|
|
|
.regulator-input.constraint {
|
|
background-color: var(--display-background);
|
|
}
|
|
|
|
.regulator-input.invalid {
|
|
color: var(--text-invalid);
|
|
border-color: var(--border-invalid);
|
|
}
|
|
|
|
.status {
|
|
width: 20px;
|
|
padding-left: 4px;
|
|
text-align: center;
|
|
font-family: 'Noto Emoji';
|
|
font-style: normal;
|
|
}
|
|
|
|
.regulator-input.invalid + .status::after, details:has(.invalid):not([open]) .status::after {
|
|
content: '⚠';
|
|
color: var(--text-invalid);
|
|
}
|
|
|
|
/* display */
|
|
|
|
canvas {
|
|
float: left;
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
background-color: var(--display-background);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
canvas:focus {
|
|
border-color: var(--border-focus-dark);
|
|
outline: none;
|
|
}
|
|
|
|
input:focus {
|
|
border-color: var(--border-focus-light);
|
|
outline: none;
|
|
} |