Fix overlay font sizes and chat overflow

Marakusa · Aug 31, 2023 · 7bf459c · 7bf459c
1 parent b20f28e
commit 7bf459c
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 23 deletions.
diff --git a/CutOverlay/CutOverlay/Models/TextModel.cs b/CutOverlay/CutOverlay/Models/TextModel.cs
@@ -7,7 +7,9 @@ public class TextModel
  public string StyleIdDiv => StyleId + "Div";
  public string? StyleIdText => StyleId;
  public Align Align { get; set; }
- public int FontSize { get; set; } = 36;
+ public int? FontSize { get; set; } = null;
+ public string? FontSizeString => FontSize == null ? null : $"{FontSize}px";
+ public string? FontSizeDivString => FontSize == null ? null : $"calc({FontSize}px + 6px)";
 
  public string AlignmentStyle =>
  Align switch

diff --git a/CutOverlay/CutOverlay/Pages/Shared/_StylizedHeader.cshtml b/CutOverlay/CutOverlay/Pages/Shared/_StylizedHeader.cshtml
@@ -1,5 +1,5 @@
 @model CutOverlay.Models.TextModel
 
-<div id="@Model.StyleIdDiv" class="styledHeaderDiv" style="height: calc(@{@Model.FontSize}px + 6px);">
- <p id="@Model.StyleIdText" class="styledHeaderText overlayMessage" style="width: 100%; text-align: @Model.AlignmentStyle; font-size: @{@Model.FontSize}px;">@Model.Text</p>
+<div id="@Model.StyleIdDiv" class="styledHeaderDiv" style="height: @Model.FontSizeDivString;">
+ <p id="@Model.StyleIdText" class="styledHeaderText overlayMessage" style="width: 100%; text-align: @Model.AlignmentStyle; font-size: @Model.FontSizeString;">@Model.Text</p>
 </div>
diff --git a/CutOverlay/CutOverlay/Pages/Shared/_StylizedText.cshtml b/CutOverlay/CutOverlay/Pages/Shared/_StylizedText.cshtml
@@ -1,5 +1,5 @@
 @model CutOverlay.Models.TextModel
 
-<div id="@Model.StyleIdDiv" class="styledTextDiv" style="height: calc(@{@Model.FontSize}px + 6px);">
- <p id="@Model.StyleIdText" class="styledText overlayMessage" style="width: 100%; text-align: @Model.AlignmentStyle; font-size: @{@Model.FontSize}px;">@Model.Text</p>
+<div id="@Model.StyleIdDiv" class="styledTextDiv" style="height: @Model.FontSizeDivString;">
+ <p id="@Model.StyleIdText" class="styledText overlayMessage" style="width: 100%; text-align: @Model.AlignmentStyle; font-size: @Model.FontSizeString;">@Model.Text</p>
 </div>
diff --git a/CutOverlay/CutOverlay/electron.manifest.json b/CutOverlay/CutOverlay/electron.manifest.json
@@ -12,7 +12,7 @@
  "appId": "com.CutOverlay.app",
  "productName": "CUT Overlay",
  "copyright": "Copyright © Markus Kannisto 2023",
- "buildVersion": "0.1.4-rc3",
+ "buildVersion": "0.1.4-rc4",
  "win": {
  "icon": "./public/icons/ico/favicon.ico"
  },

diff --git a/CutOverlay/CutOverlay/wwwroot/css/site.css b/CutOverlay/CutOverlay/wwwroot/css/site.css
@@ -430,7 +430,7 @@ p { white-space: nowrap; }
  bottom: 20px;
  overflow: hidden;
  position: absolute;
- width: 100%;
+ width: calc(100% - 40px);
 }
 
 .chatUser {
@@ -456,25 +456,29 @@ p { white-space: nowrap; }
  font-weight: 500;
  margin-top: 10px; /* Adjusting margin top */
  padding: 0;
- width: calc(100% - 40px);
+ width: 100%;
 }
+ .message div:last-child {
+ width: calc(100% - 50px);
+ overflow-wrap: break-word;
+ }
 
-.message span:last-child {
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background: white;
- background-clip: text;
-}
+ .message span:last-child {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background: white;
+  background-clip: text;
+ }
 
-.message span:last-child img {
- -webkit-text-fill-color: initial;
- grid-column: 1;
- grid-row: 1;
- height: 32px;
- margin: -3px -6px -3px 2px;
- object-fit: contain;
- width: 32px;
-}
+ .message span:last-child img {
+  -webkit-text-fill-color: initial;
+  grid-column: 1;
+  grid-row: 1;
+  height: 32px;
+  margin: -3px -6px -3px 2px;
+  object-fit: contain;
+  width: 32px;
+ }
 
 .highlighted {
  -webkit-background-clip: unset;