From 2bb27693e5d0fabe906c82698437e046ed1a4bdb Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Sat, 28 Jun 2025 01:55:27 -0400
Subject: [PATCH] 4.77.8

* Fixed: Issue with malformed CSS introduced in last update causing some settings to not function correctly when setting a custom font size.
---
 package.json                                   |  2 +-
 src/modules/chat/index.js                      |  2 +-
 src/sites/clips/theme.js                       |  2 +-
 .../twitch-twilight/modules/chat/index.js      |  2 +-
 .../twitch-twilight/modules/theme/index.js     |  2 +-
 styles/main.scss                               | 18 ++++++++++++++++++
 styles/widgets/main-menu.scss                  |  5 ++++-
 7 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index cfe2455b..1fdf070b 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "frankerfacez",
 	"author": "Dan Salvato LLC",
-	"version": "4.77.7",
+	"version": "4.77.8",
 	"description": "FrankerFaceZ is a Twitch enhancement suite.",
 	"private": true,
 	"license": "Apache-2.0",
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index acf0e900..edc66288 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -175,7 +175,7 @@ export default class Chat extends Module {
 		});
 
 		this.settings.add('chat.font-size', {
-			default: 13,
+			default: 14,
 			ui: {
 				path: 'Chat > Appearance >> General',
 				title: 'Font Size',
diff --git a/src/sites/clips/theme.js b/src/sites/clips/theme.js
index bfd0d661..5e803f62 100644
--- a/src/sites/clips/theme.js
+++ b/src/sites/clips/theme.js
@@ -200,7 +200,7 @@ export default class ThemeEngine extends Module {
 	--font-size-7: ${(12/14) * size}rem;
 	--font-size-8: ${(12/14) * size}rem;
 	--font-size-base: ${size}rem;
-`);
+}`);
 
 	}
 
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index 2daacfad..6f48cb48 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/src/sites/twitch-twilight/modules/chat/index.js
@@ -1082,7 +1082,7 @@ export default class ChatHook extends Module {
 		this.css_tweaks.setVariable('chat-width', `${width/10}rem`);
 		this.css_tweaks.setVariable('negative-chat-width', `${-width/10}rem`);
 
-		this.css_tweaks.toggle('chat-font', size !== 13 || font !== 'inherit');
+		this.css_tweaks.toggle('chat-font', size !== 14 || font !== 'inherit');
 		this.css_tweaks.toggle('chat-width', this.settings.get('chat.use-width'));
 		this.css_tweaks.toggle('chat-fix--watch-party', this.settings.get('context.isWatchParty'));
 
diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js
index 4c8d9c72..2eb475bf 100644
--- a/src/sites/twitch-twilight/modules/theme/index.js
+++ b/src/sites/twitch-twilight/modules/theme/index.js
@@ -322,7 +322,7 @@ export default class ThemeEngine extends Module {
 	--font-size-7: ${(12/14) * size}rem;
 	--font-size-8: ${(12/14) * size}rem;
 	--font-size-base: ${size}rem;
-`);
+}`);
 	}
 
 
diff --git a/styles/main.scss b/styles/main.scss
index 2879fd78..8ce452a5 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -35,6 +35,24 @@
 	100% { transform: rotate(360deg); }
 }
 
+:root {
+	--ffz-font-size-1: calc(var(--font-size-base) * 3.8571428571);
+	--ffz-font-size-2: calc(var(--font-size-base) * 2.5714285714);
+	--ffz-font-size-3: calc(var(--font-size-base) * 1.7142857143);
+	--ffz-font-size-4: calc(var(--font-size-base) * 1.2857142857);
+	--ffz-font-size-5: var(--font-size-base);
+	--ffz-font-size-6: calc(var(--font-size-base) * 0.9285714286);
+	--ffz-font-size-7: calc(var(--font-size-base) * 0.8571428571);
+}
+
+.ffz-font-size-1 { font-size: var(--ffz-font-size-1); }
+.ffz-font-size-2 { font-size: var(--ffz-font-size-2); }
+.ffz-font-size-3 { font-size: var(--ffz-font-size-3); }
+.ffz-font-size-4 { font-size: var(--ffz-font-size-4); }
+.ffz-font-size-5 { font-size: var(--ffz-font-size-5); }
+.ffz-font-size-6 { font-size: var(--ffz-font-size-6); }
+.ffz-font-size-7 { font-size: var(--ffz-font-size-7); }
+
 .ffz--inline {
 	display: inline;
 }
diff --git a/styles/widgets/main-menu.scss b/styles/widgets/main-menu.scss
index c4db1462..20ec535d 100644
--- a/styles/widgets/main-menu.scss
+++ b/styles/widgets/main-menu.scss
@@ -1,6 +1,9 @@
 .ffz-main-menu {
 	z-index: 1998;
 
+	h2 { font-size: var(--ffz-font-size-2); }
+	h3 { font-size: var(--ffz-font-size-3); }
+
 	.scrollable-area {
 		overflow-anchor: none;
 	}
@@ -18,4 +21,4 @@
 
 .ffz-dialog:not(.maximized) .ffz-vertical-nav {
 	border-bottom-left-radius: var(--border-radius-extra-large);
-}
\ No newline at end of file
+}