general changes to css order

client/homebrew/editor/uiEditor.less

@@ -45,7 +45,7 @@
 		border-bottom : 2px solid currentColor;
 	}
 
-	& > div { margin-bottom : 10px; }
+	& > div ,& > fieldset { margin-bottom : 10px; }
 
 	.field-group {
 		display   : flex;
@@ -68,6 +68,7 @@
 		width         : 100%;
 		min-width     : 250px;
 		padding-left  : 10px;
+		
 		& > label {
 			width          : 100px;
 			font-size      : 1em;
@@ -94,7 +95,6 @@
 				float      : right;
 				text-align : end;
 			}
-		}
 			input[type='text'], textarea {
 				color            : var(--input-text-clr);
 				background-color : var(--input-bg);
@@ -103,6 +103,8 @@
 				&::placeholder { color : var(--input-placeholder-clr); }
 			}
 		
+		}
+
 		&.description {
 			flex : 1;
 			textarea.value {
@@ -147,108 +149,11 @@
 		&.themes {
 			.value {
 				overflow      : visible;
-				text-overflow : auto;
 			}
 			button {
 				padding-right : 5px;
 				padding-left  : 5px;
 			}
-		}
-
-		&.invitedAuthors .value {
-			z-index   : 100;
-			
-			.tagInput-dropdown { max-width : 200px; }
-		}
-	}
-
-	.thumbnail-preview {
-		position         : relative;
-		flex             : 1 1;
-		justify-self     : center;
-		width            : 80px;
-		height           : min-content;
-		max-height       : 115px;
-		aspect-ratio     : 1 / 1;
-		object-fit       : contain;
-		background-color : #AAAAAA;
-	}
-	.renderers.field .value {
-		label {
-			display        : inline-flex;
-			align-items    : center;
-			margin-right   : 15px;
-			font-size      : 0.9em;
-			font-weight    : 800;
-			vertical-align : middle;
-			white-space    : nowrap;
-			cursor         : pointer;
-			user-select    : none;
-		}
-		input {
-			margin         : 3px;
-			vertical-align : middle;
-			cursor         : pointer;
-		}
-	}
-	.publish.field .value {
-		position      : relative;
-		margin-bottom : 15px;
-		button { width : 100%; }
-		button.publish {
-			.colorButton(@blueLight);
-		}
-		button.unpublish {
-			.colorButton(@silver);
-		}
-	}
-	.delete.field .value {
-		button {
-			.colorButton(@red);
-		}
-	}
-
-	.tag {
-		color      : var(--input-bg);
-		background : var(--input-text-clr);
-	}
-	.authors.field {
-		.tag {
-			font-weight : 300;
-			transition  : background-color 0.2s;
-
-			&.owner {
-				position         : relative;
-				display          : grid;
-				place-items      : center;
-				min-width        : 25px;
-				font-weight      : 900;
-				background-color : @silverLight;
-
-				&::after {
-					position    : absolute;
-					top         : 0;
-					left        : 0;
-					width       : 15px;
-					height      : 15px;
-					font-family : 'Font Awesome 6 Free';
-					color       : gold;
-					content     : '\f521';
-					transform   : scaleY(0.7);
-					rotate      : -25deg;
-					translate   : -30% -50%;
-				}
-			}
-			&:has(button) a { padding-right : 5px; }
-			&:has(button:hover) { background : #D97D7D; }
-
-			button { color : @red; }
-
-		
-		}
-		a { text-underline-offset : 0.2em; }
-	}
-	.themes.field {
 			& .dropdown-container { z-index          : 200; }
 			& .dropdown-options { overflow-y : visible; }
 			.disabled {
@@ -309,7 +214,84 @@
 				&:hover > .preview { opacity : 1; }
 			}
 		}
-	.field .list {
+		&.renderers .value {
+			label {
+				display        : inline-flex;
+				align-items    : center;
+				margin-right   : 15px;
+				font-size      : 0.9em;
+				font-weight    : 800;
+				vertical-align : middle;
+				white-space    : nowrap;
+				cursor         : pointer;
+				user-select    : none;
+			}
+			input {
+				margin         : 3px;
+				vertical-align : middle;
+				cursor         : pointer;
+			}
+		}
+
+		&.authors {
+			.tag {
+				font-weight : 300;
+				transition  : background-color 0.2s;
+
+				&.owner {
+					position         : relative;
+					display          : grid;
+					place-items      : center;
+					min-width        : 25px;
+					font-weight      : 900;
+					background-color : @silverLight;
+
+					&::after {
+						position    : absolute;
+						top         : 0;
+						left        : 0;
+						width       : 15px;
+						height      : 15px;
+						font-family : 'Font Awesome 6 Free';
+						color       : gold;
+						content     : '\f521';
+						transform   : scaleY(0.7);
+						rotate      : -25deg;
+						translate   : -30% -50%;
+					}
+				}
+				&:has(button) a { padding-right : 5px; }
+				&:has(button:hover) { background : #D97D7D; }
+
+				button { color : @red; }
+
+			}
+			a { text-underline-offset : 0.2em; }
+		}
+		&.invitedAuthors .value {
+			z-index   : 100;
+			
+			.tagInput-dropdown { max-width : 200px; }
+		}
+
+		&.publish .value {
+			position      : relative;
+			margin-bottom : 15px;
+			button { width : 100%; }
+			button.publish {
+				.colorButton(@blueLight);
+			}
+			button.unpublish {
+				.colorButton(@silver);
+			}
+		}
+		&.delete .value {
+			button {
+				.colorButton(@red);
+			}
+		}
+
+		.list {
 			display   : flex;
 			flex      : 1 0;
 			flex-wrap : wrap;
@@ -393,8 +375,24 @@
 				}
 			}
 		}
+	}
 
+	.thumbnail-preview {
+		position         : relative;
+		flex             : 1 1;
+		justify-self     : center;
+		width            : 80px;
+		height           : min-content;
+		max-height       : 115px;
+		aspect-ratio     : 1 / 1;
+		object-fit       : contain;
+		background-color : #AAAAAA;
+	}
 
+	.tag {
+		color      : var(--input-bg);
+		background : var(--input-text-clr);
+	}
 }
 
 .settingsEditor .field {
@@ -413,9 +411,9 @@
 	}
 }
 
-.editor.darkMode .metadataEditor {
+.editor.darkMode .uiEditor {
 	--bg-clr                : #555555;
-	--bg-image              : @backgroundImageAlt;
+	--bg-image              : @backgroundImageAltDark;
 	--h1-clr                : white;
 	--h2-clr                : #AAAAFF;
 	--label-clr             : #DDDDDD;
@@ -424,7 +422,7 @@
 	--input-text-clr        : #EEEEEE;
 	--input-placeholder-clr : #AAAAAA;
 
-	--bg-image              : @backgroundImageAltDark;
+	.field { border-color : var(--h1-clr); }
 
 	a {
 		color : @blueLight;