use GODEBUG=embedfollowsymlinks=1 to support symlinked web src files

app/web/css/form.css

@@ -0,0 +1,101 @@
+input, select, textarea {
+	background-color: var(--main-input-bg-color);
+	color: var(--main-text-color);
+}
+
+.input-grid {
+	display: grid;
+	gap: 0.5em 1em;
+	align-items: center;
+	width: 100%;
+}
+
+.input-grid * {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+}
+
+.input-grid input {
+	padding: 0.5em;
+}
+
+.input-grid img {
+	padding: 0;
+}
+
+.input-grid .last-item {
+	text-align: right;
+}
+
+legend {
+	float: left;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	margin-top: 0.25em;
+	margin-bottom: 0.25em;
+}
+
+fieldset {
+	border: 0;
+	padding: 0;
+}
+
+fieldset > *:last-child {
+	margin-bottom: 0.5em;
+}
+
+fieldset > .input-grid {
+	float: left;
+}
+
+body:not(:-moz-handler-blocked) fieldset {
+	display: table-cell;
+}
+
+input[type="checkbox"] {
+	width: min-content;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+input[type="radio"] {
+	position: inherit;
+}
+
+.w3-select, select {
+	padding: 0.5em;
+}
+
+.w3-check {
+	top: 0;
+}
+
+/* sibling of input-grid that is not inside another input grid */
+:not(.input-grid) .input-grid + * {
+	display: inline-block;
+	width: 100%;
+	margin-top: 0.5em;
+}
+
+dialog {
+	margin: auto;
+	max-width: calc(min(100% - 16px, 80ch));
+	color: var(--main-text-color);
+}
+
+dialog #prompt {
+	margin-top: 1em;
+	margin-bottom: 1em;
+	text-align: center;
+}
+
+dialog button[value="confirm"] {
+	background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);
+}
+
+dialog button[value="cancel"] {
+	background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);
+}