[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>

2 files changed, 16 insertions, 2 deletions

diff --git a/web/source/settings/lib/types/instance.ts b/web/source/settings/lib/types/instance.ts
index 11f75032c..9abdc6a96 100644
--- a/web/source/settings/lib/types/instance.ts
+++ b/web/source/settings/lib/types/instance.ts
@@ -25,6 +25,7 @@ export interface InstanceV1 {
     description_text?:       string;
     short_description:      string;
     short_description_text?: string;
+    custom_css:             string;
     email:                  string;
     version:                string;
     debug?:                 boolean;
diff --git a/web/source/settings/views/admin/instance/settings.tsx b/web/source/settings/views/admin/instance/settings.tsx
index c769b11ec..fd5ceb1ee 100644
--- a/web/source/settings/views/admin/instance/settings.tsx
+++ b/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>
 	);
-}
\ No newline at end of file
+}