feat(chat): universal scaling based on font size

Only with a CSS option for now. Probably will add UI later.
IS2511 · Dec 30, 2024 · 9b80357 · 9b80357
1 parent 8012d38
commit 9b80357
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 138 deletions.
diff --git a/v2/styles/size_large.css b/v2/styles/size_large.css
@@ -1,47 +1,3 @@
-#chat_container {
-    font-size: 48px;
+:root {
+    --chat-font-size: 48;
 }
-
-.chat_line {
-    line-height: 75px;
-}
-
-.badge {
-    width: 40px;
-    height: 40px;
-    margin-right: 5px;
-    margin-bottom: 8px;
-}
-
-.badge:last-of-type {
-    margin-right: 8px;
-}
-
-.colon {
-    margin-right: 20px;
-}
-
-.cheer_bits {
-    font-weight: 500;
-    margin-left: 5px;
-    margin-right: 10px;
-}
-
-.cheer_emote {
-    max-height: 60px;
-    margin-bottom: -15px;
-}
-
-.emote {
-    max-width: 180px;
-    max-height: 60px;
-    margin-right: -8px;
-}
-
-.upscale {
-    height: 60px;
-}
-
-.emoji {
-    height: 55px;
-}
diff --git a/v2/styles/size_medium.css b/v2/styles/size_medium.css
@@ -1,47 +1,3 @@
-#chat_container {
-    font-size: 34px;
+:root {
+    --chat-font-size: 34;
 }
-
-.chat_line {
-    line-height: 55px;
-}
-
-.badge {
-    width: 28px;
-    height: 28px;
-    margin-right: 4px;
-    margin-bottom: 6px;
-}
-
-.badge:last-of-type {
-    margin-right: 6px;
-}
-
-.colon {
-    margin-right: 14px;
-}
-
-.cheer_bits {
-    font-weight: 600;
-    margin-left: 4px;
-    margin-right: 7px;
-}
-
-.cheer_emote {
-    max-height: 42px;
-    margin-bottom: -10px;
-}
-
-.emote {
-    max-width: 128px;
-    max-height: 42px;
-    margin-right: -6px;
-}
-
-.upscale {
-    height: 42px;
-}
-
-.emoji {
-    height: 39px;
-}
diff --git a/v2/styles/size_small.css b/v2/styles/size_small.css
@@ -1,47 +1,3 @@
-#chat_container {
-    font-size: 20px;
+:root {
+    --chat-font-size: 20;
 }
-
-.chat_line {
-    line-height: 30px;
-}
-
-.badge {
-    width: 16px;
-    height: 16px;
-    margin-right: 2px;
-    margin-bottom: 3px;
-}
-
-.badge:last-of-type {
-    margin-right: 3px;
-}
-
-.colon {
-    margin-right: 8px;
-}
-
-.cheer_bits {
-    font-weight: 700;
-    margin-left: 2px;
-    margin-right: 4px;
-}
-
-.cheer_emote {
-    max-height: 25px;
-    margin-bottom: -6px;
-}
-
-.emote {
-    max-width: 75px;
-    max-height: 25px;
-    margin-right: -3px;
-}
-
-.upscale {
-    height: 25px;
-}
-
-.emoji {
-    height: 22px;
-}
diff --git a/v2/styles/style.css b/v2/styles/style.css
@@ -64,3 +64,91 @@ body {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+/* Universal chat font size magic */
+
+:root {
+    /* Variables that can be overridden by users */
+    /* Values here are from the 'small' profile */
+    /* --chat-font-size: 20; */
+
+    /* These dynamic values almost match the hand-defined 'small', 'medium' and 'large' settings. */
+    /* I don't want to fit polynomials to achieve 100% backward compatibility :Dies: */
+    /* UPD: Scratch that. I'm doing quadratic regression. Yes, this will be *exactly* equal to the hand-defined values. */
+    /* Thanks mycurvefit.com, I didn't want to write Python scripts or god forbid open MATLAB. */
+
+    /* Popular unit choices: 'px' (default), 'em', 'rem' */
+    /* More possible units: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units */
+    /* NOTE: Currently only 'px' is supported. Honestly, just don't touch this. */
+    --chat-v2-font-size-unit: 1px;
+
+    --chat-v2-font-size: calc(var(--chat-font-size) * var(--chat-v2-font-size-unit));
+    --chat-v2-font-size-pow2: calc(var(--chat-font-size) * var(--chat-font-size) * var(--chat-v2-font-size-unit));
+
+    --chat-v2-line-height: round(nearest, (-14.38776*var(--chat-v2-font-size-unit) + 2.47449*var(--chat-v2-font-size) - 0.0127551*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+    --chat-v2-badge-size: round(nearest, (-1.142857*var(--chat-v2-font-size-unit) + 0.8571429*var(--chat-v2-font-size)), var(--chat-v2-font-size-unit));
+    --chat-v2-badge-margin-between: round(nearest, (-2.591837*var(--chat-v2-font-size-unit) + 0.2806122*var(--chat-v2-font-size) - 0.00255102*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+    --chat-v2-badge-margin-bottom: round(nearest, (-3.020408*var(--chat-v2-font-size-unit) + 0.3520408*var(--chat-v2-font-size) - 0.00255102*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+    --chat-v2-badge-margin-after: round(nearest, (-3.020408*var(--chat-v2-font-size-unit) + 0.3520408*var(--chat-v2-font-size) - 0.00255102*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+    --chat-v2-colon-margin-right: round(nearest, (-0.5714286*var(--chat-v2-font-size-unit) + 0.4285714*var(--chat-v2-font-size)), var(--chat-v2-font-size-unit));
+
+    --chat-v2-emote-max-height: round(nearest, (2.44898*var(--chat-v2-font-size-unit) + 1.076531*var(--chat-v2-font-size) + 0.00255102*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+    --chat-v2-emote-max-width: calc(var(--chat-v2-emote-max-height) * 3);
+    --chat-v2-emote-margin-right: round(nearest, -(-3.020408*var(--chat-v2-font-size-unit) + 0.3520408*var(--chat-v2-font-size) - 0.00255102*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+    --chat-v2-upscale-height: var(--chat-v2-emote-max-height);
+    --chat-v2-emoji-height: round(nearest, (-4.020408*var(--chat-v2-font-size-unit) + 1.352041*var(--chat-v2-font-size) - 0.00255102*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+
+    --chat-v2-cheer-bits-font-weight: round(nearest, (842.8571*var(--chat-v2-font-size-unit) - 7.142857*var(--chat-v2-font-size)), 1);
+    --chat-v2-cheer-bits-margin-left: round(nearest, (-2.591837*var(--chat-v2-font-size-unit) + 0.2806122*var(--chat-v2-font-size) - 0.00255102*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+    --chat-v2-cheer-bits-margin-right: round(nearest, (-0.2857143*var(--chat-v2-font-size-unit) + 0.2142857*var(--chat-v2-font-size)), var(--chat-v2-font-size-unit));
+    --chat-v2-cheer-emote-max-height: var(--chat-v2-emote-max-height);
+    --chat-v2-cheer-emote-margin-bottom: round(nearest, -(2.020408*var(--chat-v2-font-size-unit) + 0.1479592*var(--chat-v2-font-size) + 0.00255102*var(--chat-v2-font-size-pow2)), var(--chat-v2-font-size-unit));
+}
+
+#chat_container {
+    font-size: var(--chat-v2-font-size);
+}
+
+.chat_line {
+    line-height: var(--chat-v2-line-height);
+}
+
+.badge {
+    width: var(--chat-v2-badge-size);
+    height: var(--chat-v2-badge-size);
+    margin-right: var(--chat-v2-badge-margin-between);
+    margin-bottom: var(--chat-v2-badge-margin-bottom);
+}
+
+.badge:last-of-type {
+    margin-right: var(--chat-v2-badge-margin-after);
+}
+
+.colon {
+    margin-right: var(--chat-v2-colon-margin-right);
+}
+
+.cheer_bits {
+    font-weight: var(--chat-v2-cheer-bits-font-weight);
+    margin-left: var(--chat-v2-cheer-bits-margin-left);
+    margin-right: var(--chat-v2-cheer-bits-margin-right);
+}
+
+.cheer_emote {
+    max-height: var(--chat-v2-cheer-emote-max-height);
+    margin-bottom: var(--chat-v2-cheer-emote-margin-bottom);
+}
+
+.emote {
+    max-width: var(--chat-v2-emote-max-width);
+    max-height: var(--chat-v2-emote-max-height);
+    margin-right: var(--chat-v2-emote-margin-right);
+}
+
+.upscale {
+    height: var(--chat-v2-upscale-height);
+}
+
+.emoji {
+    height: var(--chat-v2-emoji-height);
+}