Unify the .select/.option stuff

frontend/src/main.less

 // the threshold at which we consider the screen "mobile"
 @mobile_threshold: 700px;
-// the border around the preview (per color)
-@preview_border: .3rem;
+// the border around the options in the fieldset-select-like things
+@option_border: .3rem;
 // the minimum size of the left area in the form layout
 @label-width: 90px;
 
@@ -17,6 +17,7 @@ body {
 	// adjust colors for light theme here
 	--bg: #fff;
 	--fg: #000;
+	--fg-dark: #bbb;
 	--accent: #80f;
 	--accent2: #c4f;
 
@@ -24,6 +25,7 @@ body {
 		// adjust colors for dark theme here
 		--bg: #222;
 		--fg: #fff;
+		--fg-dark: #888;
 	}
 }
 
@@ -40,7 +42,7 @@ body, @{inputs}, @{buttons} {
 }
 
 @{inputs}, @{buttons}, fieldset {
-	border: .15rem solid var(--fg);
+	border: .15rem solid var(--fg-dark);
 	border-radius: .25rem;
 }
 
@@ -163,13 +165,6 @@ main {
 	width: min(95vw, 100rem);
 	/* A4 aspect ratio: √2:1 */
 	aspect-ratio: 1.4142135623730951;
-
-	border: @preview_border solid var(--bg);
-	padding: @preview_border;
-
-	&.preview-small {
-		width: 15rem;
-	}
 }
 
 .preview-label {
@@ -180,11 +175,12 @@ main {
 .box {
 	display: grid;
 	grid-template-columns: min(@label-width, auto) 1fr;
-	align-items: start;
+	align-items: baseline;
 
 	label.for-text {
 		display: inline-block;
 		justify-self: end;
+		font-size: 1.1rem;
 	}
 
 	input[type = "text"], textarea {
@@ -208,51 +204,59 @@ main {
 	gap: 1ch;
 }
 
-fieldset {
+// these are the fieldsets containing select-like options modeled with radio buttons
+.select {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 2 * @preview_border;
-}
+	gap: 2 * @option_border;
 
-fieldset > div {
+	.option {
 		display: flex;
-	gap: 0.5rem;
 		flex-direction: column;
+		gap: .5rem;
+
+		.preview {
+			width: 15rem;
 		}
 
-.imageselect > div {
+		img {
 			width: 10rem;
-	display: flex;
-	gap: 0.5rem;
+			background-color: #fff;
 		}
 
-fieldset label {
-	flex-grow: 1;
-}
+		.option-border {
+			border: @option_border solid var(--fg-dark);
+			border-radius: 3 * @option_border;
 
-.imageselect img {
-	width: 100%;
-	background-color: #fff;
+			// iframe's behave nicely
+			&.preview {
+				padding: @option_border;
 			}
 
-fieldset input {
-	display: none;
+			// label>img doesn't
+			& > img {
+				border: @option_border solid var(--bg);
+				border-radius: 2 * @option_border;
 			}
-
-fieldset img,
-fieldset iframe,
-.preview-small {
-	border-color: var(--fg);
-	border-radius: 3 * @preview_border;
 		}
 
 		input[type = "radio"] {
-	&:checked + label > img,
-	&:checked + iframe {
+			display: none;
+
+			&:checked + .option-border {
 				border-color: var(--accent2);
 			}
+		}
 
-	&:not(:checked) + iframe {
-		opacity: .8;
+		label {
+			flex-grow: 1;
+			// firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
+			// inline ist
+			display: flex;
+		}
+	}
+
+	input[type = "radio"] {
+		display: none;
 	}
 }

schilder2000/templates/schild.html.j2

@@ -50,7 +50,7 @@
 		<fieldset class="select templateselect">
 			<legend>Vorlage</legend>
 			{%- for t in form.template.choices -%}
-				<div>
+				<div class="option">
 					<input
 						type="radio"
 						name="template"
@@ -61,7 +61,7 @@
 						{%- endif -%}
 					/>
 					<iframe
-						class="preview preview-small"
+						class="preview option-border"
 						src="{{ url_for('instance.sample_html', template=t.name) }}"
 						id="template-preview:{{ t.name }}"
 					>
@@ -76,7 +76,7 @@
 		<fieldset class="select imageselect">
 			<legend>Bild</legend>
 			{%- for img in form.image.choices -%}
-				<div>
+				<div class="option">
 					<input
 						type="radio"
 						name="image"
@@ -86,7 +86,7 @@
 							checked
 						{%- endif -%}
 					/>
-					<label for="img:{{ img }}">
+					<label for="img:{{ img }}" class="option-border">
 						<img src="{{ url_for('instance.static', filename='img/'+img) }}" title="{{ img }}" />
 					</label>
 				</div>