Added Lyric Font Size

plugins/radiant-lyrics-luna/src/Settings.tsx

@@ -48,6 +48,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	blurInactive: true,
 	bubbledLyrics: true,
 	syllableLogging: false,
+	lyricsFontSize: 100,
 });
 
 export const Settings = () => {
@@ -132,6 +133,9 @@ export const Settings = () => {
 			window.updateLyricsStyleSetting = undefined;
 		};
 	}, []);
+	const [lyricsFontSize, setLyricsFontSize] = React.useState(
+		settings.lyricsFontSize,
+	);
 	const [contextAwareLyrics, setContextAwareLyrics] = React.useState(
 		settings.contextAwareLyrics,
 	);
@@ -212,6 +216,21 @@ export const Settings = () => {
 					}
 				}}
 			/>
+			<LunaNumberSetting
+				title="Lyrics Font Size"
+				desc="Scale the lyrics font size (50-200%, default: 100)"
+				min={50}
+				max={200}
+				step={5}
+				value={lyricsFontSize}
+				onNumber={(value: number) => {
+					settings.lyricsFontSize = value;
+					setLyricsFontSize(value);
+					if (window.updateRadiantLyricsTextGlow) {
+						window.updateRadiantLyricsTextGlow();
+					}
+				}}
+			/>
 			<AnySwitch
 				title="Blur Inactive"
 				desc="Blurs inactive lyric lines, scaling with distance from the active line"

plugins/radiant-lyrics-luna/src/index.ts

@@ -133,7 +133,7 @@ if (settings.qualityProgressColor) {
 // Apply base styles always (I kinda dont really remember what this does but it's important i guess)
 baseStyleTag.css = baseStyles;
 
-// Update CSS variables for lyrics text glow based on settings
+// Update CSS variables for lyrics glow + font scale
 const updateRadiantLyricsTextGlow = function (): void {
 	const root = document.documentElement;
 	if (settings.lyricsGlowEnabled) {
@@ -145,6 +145,7 @@ const updateRadiantLyricsTextGlow = function (): void {
 		root.style.setProperty("--rl-glow-inner", "0px");
 		root.classList.add("lyrics-glow-disabled");
 	}
+	root.style.setProperty("--rl-font-scale", `${settings.lyricsFontSize / 100}`);
 };
 
 // Apply glow state immediately at startup
@@ -1741,7 +1742,7 @@ const buildWordSpans = (): {
 			"margin-bottom": "2rem",
 			"padding-top": "0",
 			"padding-bottom": "0",
-			"font-size": "40px",
+			"font-size": "calc(40px * var(--rl-font-scale, 1))",
 			"font-family": FONT_STACK,
 			"font-weight": "700",
 			color: "rgba(128, 128, 128, 0.4)",

plugins/radiant-lyrics-luna/src/lyrics-glow.css

@@ -32,7 +32,7 @@
 		0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
 	padding-left: 20px;
 	transition-duration: 0.7s;
-	font-size: 55px;
+	font-size: calc(55px * var(--rl-font-scale, 1));
 	/* biome-ignore lint: Active lyric uses Colorama color */
 	color: var(--cl-glow1, #fff) !important;
 	font-family:
@@ -47,7 +47,7 @@
 		0 0 0px transparent;
 	transition-duration: 0.25s;
 	color: rgba(128, 128, 128, 0.4);
-	font-size: 40px;
+	font-size: calc(40px * var(--rl-font-scale, 1));
 	font-family:
 		"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
 		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -106,7 +106,7 @@
 		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 	font-weight: 700;
 	/* biome-ignore lint: Typography override for readability */
-	font-size: 38px !important;
+	font-size: calc(38px * var(--rl-font-scale, 1)) !important;
 }
 
 /* MARKER: WBW lyrics CSS */
@@ -328,7 +328,7 @@
 /* Tidals "..." at the top of the container */
 .rl-wbw-active > span:not([data-test="lyrics-line"]) {
 	display: block;
-	font-size: 40px;
+	font-size: calc(40px * var(--rl-font-scale, 1));
 	font-family:
 		"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
 		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;