[feature] Add global instance CSS customization setting (#3352)

Allow instance admins to add custom CSS that will affect
every page of their instance.

This is done with a new CustomCSS instance setting that
works pretty much exactly like the Users CustomCSS property.
This custom CSS is then requested for every page load.
User styles/themes take precedence over this CSS.

Co-authored-by: tobi <tobi.smethurst@protonmail.com>

web/source/settings/views/admin/instance/settings.tsx

@@ -46,7 +46,7 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
 	const shortDescLimit = 500;
 	const descLimit = 5000;
 	const termsLimit = 5000;
-	
+
 	const form = {
 		title: useTextInput("title", {
 			source: instance,
@@ -66,6 +66,10 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
 			valueSelector: (s: InstanceV1) => s.description_text,
 			validator: (val: string) => val.length <= descLimit ? "" : `Instance description is ${val.length} characters; must be ${descLimit} characters or less`
 		}),
+		customCSS: useTextInput("custom_css", {
+			source: instance,
+			valueSelector: (s: InstanceV1) => s.custom_css
+		}),
 		terms: useTextInput("terms", {
 			source: instance,
 			// Select "raw" text version of parsed field for editing.
@@ -191,7 +195,16 @@ function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
 				type="email"
 			/>
 
+			<TextArea
+				field={form.customCSS}
+				label={"Custom CSS"}
+				className="monospace"
+				rows={8}
+				autoCapitalize="none"
+				spellCheck="false"
+			/>
+
 			<MutationButton label="Save" result={result} disabled={false} />
 		</form>
 	);
-}
+}