Better CSS for the JSON editor

static/css/json_editor.css

@@ -0,0 +1,106 @@
+.je-indented-panel {
+  background-color: #f8f9fa;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: var(--border-radius);
+  padding: 16px;
+  margin-left: 0px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  width: min-content;
+}
+.je-indented-panel .row {
+  margin-top: 16px;
+}
+.je-indented-panel .row:first-child {
+  margin-top: 0px;
+}
+.je-header {
+  color: var(--je-color);
+  font-weight: bold;
+}
+.je-object__controls > .je-modal {
+  width: 50%;
+}
+.je-object__controls > .je-modal .je-textarea {
+  font-family: "Roboto Mono", monospace;
+  font-size: 0.85em;
+  height: 500px;
+}
+.je-object__controls > .je-modal button {
+  margin: 8px 0px 8px 8px;
+}
+.form-control > label {
+  display: block;
+  color: var(--je-color);
+  margin-bottom: 4px;
+}
+[data-schematype="array"] button {
+  margin-right: 8px;
+}
+table {
+  margin-bottom: 8px;
+}
+table th {
+  text-align: left;
+  font-size: var(--textsize);
+}
+table td * {
+  white-space: nowrap;
+}
+input,
+textarea {
+  color: #495057;
+  padding: 8px 8px;
+  background-color: #fff;
+  border-radius: var(--border-radius);
+  border: 1px solid #ced4da;
+  font-family: "Roboto", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-size: var(--textsize);
+}
+textarea {
+  min-width: 400px;
+}
+.json-editor-btntype-delete {
+  border: none;
+  background-color: inherit;
+  cursor: pointer;
+  margin-top: 4px;
+  padding: 0px;
+}
+.json-editor-btntype-delete > span {
+  display: none;
+}
+.json-editor-btntype-delete::after {
+  display: block;
+  content: "";
+  width: 24px;
+  height: 24px;
+}
+.json-editor-btntype-delete::after {
+  background: url(/images/v0/node_modules/@mdi/svg/svg/trash-can.svg);
+}
+.json-editor-btntype-move {
+  border: none;
+  background-color: inherit;
+  cursor: pointer;
+  margin-top: 4px;
+  padding: 0px;
+}
+.json-editor-btntype-move > span {
+  display: none;
+}
+.json-editor-btntype-move::after {
+  display: block;
+  content: "";
+  width: 24px;
+  height: 24px;
+}
+.json-editor-btntype-move.moveup::after {
+  background: url(/images/v0/node_modules/@mdi/svg/svg/arrow-up-bold.svg);
+}
+.json-editor-btntype-move.movedown::after {
+  background: url(/images/v0/node_modules/@mdi/svg/svg/arrow-down-bold.svg);
+}

static/css/main.css

@@ -1,9 +1,17 @@
+:root {
+  --textsize: 12pt;
+  --je-color: #73a44d;
+  --border-radius: 5px;
+}
 html {
   box-sizing: border-box;
-  font-family: sans-serif;
-  font-size: 14pt;
   margin: 0px;
   padding: 0px;
+  font-family: "Roboto", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-size: var(--textsize);
 }
 body {
   margin: 0px;