Set font size directly rather than using classes, add 18px font size option, fixes

packages/backend/src/server/web/boot.js

@@ -95,9 +95,13 @@
 	}
 	//#endregion
 
-	const fontSize = localStorage.getItem("fontSize");
+	let fontSize = localStorage.getItem("fontSize");
 	if (fontSize) {
-		document.documentElement.classList.add("f-" + fontSize);
+		if (fontSize < 10) { // need to do this for now, as values before were 1, 2, 3 depending on the option
+			localStorage.setItem("fontSize", null);
+			fontSize = localStorage.getItem("fontSize");
+		}
+		document.documentElement.style.fontSize = fontSize + "px";
 	}
 
 	const useSystemFont = localStorage.getItem("useSystemFont");

packages/client/src/components/form/range.vue

@@ -23,9 +23,9 @@
 				/>
 				<datalist v-if="showTicks && steps" :id="id">
 					<option
-						v-for="i in steps + 1"
-						:value="i"
-						:label="i.toString()"
+						v-for="i in steps"
+						:value="i + min"
+						:label="(i + min).toString()"
 					></option>
 				</datalist>
 			</div>

packages/client/src/components/global/MkPageHeader.vue

@@ -431,7 +431,8 @@ onUnmounted(() => {
 
 			> .icon {
 				margin-right: 8px;
-				width: 16px;
+				min-width: 16px;
+				width: 1em;
 				text-align: center;
 			}
 
@@ -508,10 +509,11 @@ onUnmounted(() => {
 		}
 
 		&.collapse {
-			--width: 38px;
+			--width: 2.7em;
+			// --width: 1.33333em
 			> .tab {
-				width: 38px;
-				min-width: 38px !important;
+				width: 2.7em;
+				min-width: 2.7em !important;
 				&:not(.active) > .title {
 					opacity: 0;
 				}

packages/client/src/pages/settings/general.vue

@@ -114,18 +114,34 @@
 			<FormRadios v-model="fontSize" class="_formBlock">
 				<template #label>{{ i18n.ts.fontSize }}</template>
 				<option :value="null">
-					<span style="font-size: 14px">Aa</span>
+					<span style="font-size: 14px">14</span>
 				</option>
-				<option value="1">
-					<span style="font-size: 15px">Aa</span>
+				<option value="15">
+					<span style="font-size: 15px">15</span>
 				</option>
-				<option value="2">
-					<span style="font-size: 16px">Aa</span>
+				<option value="16">
+					<span style="font-size: 16px">16</span>
 				</option>
-				<option value="3">
-					<span style="font-size: 17px">Aa</span>
+				<option value="17">
+					<span style="font-size: 17px">17</span>
+				</option>
+				<option value="18">
+					<span style="font-size: 18px">18</span>
 				</option>
 			</FormRadios>
+
+			<!-- <FormRange
+				v-model="fontSize"
+				:min="12"
+				:max="18"
+				:step="1"
+				:value="fontSize ? fontSize : 14"
+				easing
+				:showTicks="true"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.fontSize }}</template>
+			</FormRange> -->
 		</FormSection>
 
 		<FormSection>

packages/client/src/style.scss

@@ -54,20 +54,8 @@ html {
 	tab-size: 2;
 	scroll-padding: 60px;
 
-	&.f-1 {
-		font-size: 15px;
-	}
-
-	&.f-2 {
-		font-size: 16px;
-	}
-
-	&.f-3 {
-		font-size: 17px;
-	}
-
 	&.useSystemFont {
-		font-family: sans-serif;
+		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	}
 }
 body::-webkit-scrollbar {