6d2e3d776b
This introduces a dependency on the Charming crate, which we use to plot the loss history, and the ECharts JavaScript library, which Charming depends on. Now that there's more than one canvas on the page, we have to pick out the display by ID rather than by element type in our style sheet.
202 lines
No EOL
3.3 KiB
CSS
202 lines
No EOL
3.3 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 {
|
|
height: 32px;
|
|
}
|
|
|
|
/* 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 {
|
|
width: 32px;
|
|
font-family: 'Noto Emoji', sans-serif;
|
|
font-size: large;
|
|
}
|
|
|
|
/* 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 > input {
|
|
margin-left: 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);
|
|
}
|
|
|
|
/* diagnostics */
|
|
|
|
#loss-history {
|
|
margin: 10px;
|
|
background-color: var(--display-background);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* display */
|
|
|
|
#display {
|
|
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;
|
|
} |