feat(configurator): add web configuration console

firmware/tools/configurator/web/styles.css

@@ -0,0 +1,254 @@
+:root {
+  color-scheme: light dark;
+  --background: #fff;
+  --foreground: #161616;
+  --muted: #595959;
+  --rule: #8a8a8a;
+  --subtle: #f2f2f2;
+  --link: #0000c0;
+  --visited: #6b287c;
+  --error: #9f1111;
+  --warning: #6b4b00;
+  --focus: #005fcc;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #111;
+    --foreground: #eee;
+    --muted: #bbb;
+    --rule: #777;
+    --subtle: #202020;
+    --link: #8db8ff;
+    --visited: #d4a1e4;
+    --error: #ff9d9d;
+    --warning: #f0c76a;
+    --focus: #82b7ff;
+  }
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+
+html {
+  background: var(--background);
+  color: var(--foreground);
+  font: 15px/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+}
+
+body {
+  width: min(100% - 2rem, 76rem);
+  margin: 0 auto 4rem;
+}
+
+header,
+section {
+  border-bottom: 1px solid var(--rule);
+  padding: 1.25rem 0;
+}
+
+h1, h2, h3, p { margin-top: 0; }
+h1 { margin-bottom: .35rem; font-size: 1.35rem; }
+h2 { font-size: 1.15rem; }
+h3 { font-size: 1rem; }
+
+a {
+  color: var(--link);
+  text-decoration: underline;
+  text-underline-offset: .15em;
+}
+
+a:visited { color: var(--visited); }
+
+.skip-link {
+  position: absolute;
+  left: .5rem;
+  top: -5rem;
+  padding: .5rem;
+  background: var(--background);
+  border: 2px solid var(--focus);
+  z-index: 2;
+}
+
+.skip-link:focus { top: .5rem; }
+
+button,
+input,
+select {
+  max-width: 100%;
+  padding: .35rem .5rem;
+  border: 1px solid var(--rule);
+  border-radius: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font: inherit;
+}
+
+button { background: var(--subtle); cursor: pointer; }
+
+button:disabled,
+input:disabled,
+select:disabled { cursor: not-allowed; opacity: .58; }
+
+:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
+
+.control-line,
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem;
+  margin-bottom: .75rem;
+}
+
+.control-line input:first-of-type { flex: 1 1 18rem; }
+.hint, small { color: var(--muted); }
+
+.error {
+  min-height: 1.45em;
+  color: var(--error);
+  font-weight: 700;
+}
+
+.status,
+.important {
+  padding: .7rem;
+  border-left: .3rem solid var(--warning);
+  background: var(--subtle);
+}
+
+.important { margin: 1rem 0; }
+.important h3 { margin-bottom: .35rem; }
+.important p { margin-bottom: 0; }
+
+details { margin: .75rem 0; }
+summary { cursor: pointer; font-weight: 700; }
+
+dl {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: .25rem 1rem;
+}
+
+dt { color: var(--muted); }
+dd { margin: 0; overflow-wrap: anywhere; }
+dl > div { display: contents; }
+
+.draft-fields {
+  display: grid;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.draft-fields fieldset {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+  gap: .9rem;
+  min-width: 0;
+  padding: .75rem;
+  border: 1px solid var(--rule);
+}
+
+.draft-fields label {
+  display: grid;
+  align-content: start;
+  gap: .25rem;
+}
+
+.field-key { color: var(--muted); font-size: .85rem; }
+
+.table-scroll { overflow-x: auto; }
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+th,
+td {
+  padding: .45rem .7rem .45rem 0;
+  border-bottom: 1px solid var(--rule);
+  text-align: left;
+  white-space: nowrap;
+}
+
+th { color: var(--muted); }
+td:first-child { width: 100%; }
+td:nth-child(n + 3),
+th:nth-child(n + 3) { text-align: right; }
+
+.empty-row { color: var(--muted); }
+.empty-row td { text-align: left; }
+
+.packet-toggle {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--link);
+  text-decoration: underline;
+  text-underline-offset: .15em;
+}
+
+.packet-detail td {
+  padding: .5rem .75rem;
+  background: var(--subtle);
+  text-align: left;
+  white-space: normal;
+}
+
+.packet-detail pre {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.log-entries {
+  max-height: 26rem;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  border: 1px solid var(--rule);
+  list-style: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.log-entry {
+  display: grid;
+  grid-template-columns: 7.5rem 5.5rem minmax(0, 1fr);
+  gap: .75rem;
+  padding: .4rem .55rem;
+  border-bottom: 1px solid var(--rule);
+}
+
+.log-entry:last-child { border-bottom: 0; }
+.log-entry time { color: var(--muted); }
+.log-severity { font-weight: 700; }
+.log-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.log-emergency,
+.log-alert,
+.log-critical,
+.log-error { color: var(--error); }
+.log-warning { color: var(--warning); }
+
+.empty-log {
+  padding: .55rem;
+  color: var(--muted);
+}
+
+#validation:empty,
+#validation-summary:empty,
+#log-retention:empty,
+#connect-error:empty { display: none; }
+
+#validation { color: var(--error); }
+
+@media (max-width: 38rem) {
+  body { width: min(100% - 1rem, 76rem); }
+  dl { grid-template-columns: 1fr; }
+  dd { margin-bottom: .5rem; }
+  .control-line { align-items: stretch; flex-direction: column; }
+  .control-line > * { width: 100%; }
+  .log-entry { grid-template-columns: 1fr auto; gap: .2rem .75rem; }
+  .log-text { grid-column: 1 / -1; }
+}