Better CSS for the JSON editor

static/less/json_editor.less

@@ -0,0 +1,128 @@
+.je-indented-panel {
+	background-color: #f8f9fa;
+	border: 1px solid rgba(0,0,0,.125);
+	border-radius: var(--border-radius);
+	padding: 16px;
+	margin-left: 0px;
+	margin-top: 16px;
+	margin-bottom: 16px;
+	width: min-content;
+
+	.row {
+		margin-top: 16px;
+		&:first-child {
+			margin-top: 0px;
+		}
+	}
+}
+
+.je-header {
+	color: var(--je-color);
+	font-weight: bold;
+}
+
+.je-object__controls {
+	& > .je-modal {
+		width: 50%;
+
+		.je-textarea {
+			font-family: "Roboto Mono", monospace;
+			font-size: 0.85em;
+			height: 500px;
+		}
+
+		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;
+
+	th {
+		text-align: left;
+		font-size: var(--textsize);
+	}
+
+	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;
+}
+
+.datagraph-button() {
+	border: none;
+	background-color: inherit;
+	cursor: pointer;
+	margin-top: 4px;
+	padding: 0px;
+
+	& > span {
+		display: none;
+	}
+
+	&::after {
+		display: block;
+		content: "";
+		width: 24px;
+		height: 24px;
+	}
+}
+
+// json-editor-btn-delete
+// delete
+.json-editor-btntype-delete {
+	.datagraph-button();
+
+	&::after {
+		background: url(/images/v0/node_modules/@mdi/svg/svg/trash-can.svg);
+	}
+}
+
+// json-editor-btn-movedown
+// movedown
+.json-editor-btntype-move {
+	.datagraph-button();
+
+	&.moveup::after {
+		background: url(/images/v0/node_modules/@mdi/svg/svg/arrow-up-bold.svg);
+	}
+	
+	&.movedown::after {
+		background: url(/images/v0/node_modules/@mdi/svg/svg/arrow-down-bold.svg);
+	}
+}

static/less/main.less

@@ -1,9 +1,20 @@
+: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 {