Add font source/family settings matching v1.4.0 feature set
Restored the font configuration that was missing from the Tauri rewrite. Settings now include: - Font Source: System Font, Web-Safe, Google Font - System Font: text input for any installed font family - Web-Safe: dropdown with 13 universal fonts (Arial, Courier New, etc.) - Google Font: dropdown with 35 fonts organized by category (Sans Serif, Serif, Monospace, Display, Handwriting) - Font Size: range slider (8-32px) All font settings are saved to config and applied to the OBS web display and server sync. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Developer
@@ -27,6 +27,10 @@
|
||||
let showTimestamps = $state(true);
|
||||
let fadeSeconds = $state(10);
|
||||
let maxLines = $state(100);
|
||||
let fontSource = $state("System Font");
|
||||
let fontFamily = $state("Courier");
|
||||
let websafeFont = $state("Arial");
|
||||
let googleFont = $state("Roboto");
|
||||
let fontSize = $state(12);
|
||||
let userColor = $state("#4CAF50");
|
||||
let textColor = $state("#FFFFFF");
|
||||
@@ -99,6 +103,10 @@
|
||||
showTimestamps = cfg.display.show_timestamps;
|
||||
fadeSeconds = cfg.display.fade_after_seconds;
|
||||
maxLines = cfg.display.max_lines;
|
||||
fontSource = cfg.display.font_source ?? "System Font";
|
||||
fontFamily = cfg.display.font_family ?? "Courier";
|
||||
websafeFont = cfg.display.websafe_font ?? "Arial";
|
||||
googleFont = cfg.display.google_font ?? "Roboto";
|
||||
fontSize = cfg.display.font_size;
|
||||
userColor = cfg.display.user_color;
|
||||
textColor = cfg.display.text_color;
|
||||
@@ -174,6 +182,10 @@
|
||||
show_timestamps: showTimestamps,
|
||||
fade_after_seconds: fadeSeconds,
|
||||
max_lines: maxLines,
|
||||
font_source: fontSource,
|
||||
font_family: fontFamily,
|
||||
websafe_font: websafeFont,
|
||||
google_font: googleFont,
|
||||
font_size: fontSize,
|
||||
user_color: userColor,
|
||||
text_color: textColor,
|
||||
@@ -485,6 +497,95 @@
|
||||
bind:value={maxLines}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="font-source">Font Source</label>
|
||||
<select id="font-source" bind:value={fontSource}>
|
||||
<option value="System Font">System Font</option>
|
||||
<option value="Web-Safe">Web-Safe</option>
|
||||
<option value="Google Font">Google Font</option>
|
||||
</select>
|
||||
</div>
|
||||
{#if fontSource === "System Font"}
|
||||
<div class="field">
|
||||
<label for="font-family">System Font Family</label>
|
||||
<input id="font-family" type="text" bind:value={fontFamily} placeholder="Courier" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if fontSource === "Web-Safe"}
|
||||
<div class="field">
|
||||
<label for="websafe-font">Web-Safe Font</label>
|
||||
<select id="websafe-font" bind:value={websafeFont}>
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Arial Black">Arial Black</option>
|
||||
<option value="Comic Sans MS">Comic Sans MS</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Impact">Impact</option>
|
||||
<option value="Lucida Console">Lucida Console</option>
|
||||
<option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
|
||||
<option value="Palatino Linotype">Palatino Linotype</option>
|
||||
<option value="Tahoma">Tahoma</option>
|
||||
<option value="Times New Roman">Times New Roman</option>
|
||||
<option value="Trebuchet MS">Trebuchet MS</option>
|
||||
<option value="Verdana">Verdana</option>
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
{#if fontSource === "Google Font"}
|
||||
<div class="field">
|
||||
<label for="google-font">Google Font</label>
|
||||
<select id="google-font" bind:value={googleFont}>
|
||||
<optgroup label="Sans Serif">
|
||||
<option value="Roboto">Roboto</option>
|
||||
<option value="Open Sans">Open Sans</option>
|
||||
<option value="Lato">Lato</option>
|
||||
<option value="Montserrat">Montserrat</option>
|
||||
<option value="Poppins">Poppins</option>
|
||||
<option value="Nunito">Nunito</option>
|
||||
<option value="Raleway">Raleway</option>
|
||||
<option value="Ubuntu">Ubuntu</option>
|
||||
<option value="Rubik">Rubik</option>
|
||||
<option value="Work Sans">Work Sans</option>
|
||||
<option value="Inter">Inter</option>
|
||||
<option value="Outfit">Outfit</option>
|
||||
<option value="Quicksand">Quicksand</option>
|
||||
<option value="Comfortaa">Comfortaa</option>
|
||||
<option value="Varela Round">Varela Round</option>
|
||||
</optgroup>
|
||||
<optgroup label="Serif">
|
||||
<option value="Playfair Display">Playfair Display</option>
|
||||
<option value="Merriweather">Merriweather</option>
|
||||
<option value="Lora">Lora</option>
|
||||
<option value="PT Serif">PT Serif</option>
|
||||
<option value="Crimson Text">Crimson Text</option>
|
||||
</optgroup>
|
||||
<optgroup label="Monospace">
|
||||
<option value="Roboto Mono">Roboto Mono</option>
|
||||
<option value="Source Code Pro">Source Code Pro</option>
|
||||
<option value="Fira Code">Fira Code</option>
|
||||
<option value="JetBrains Mono">JetBrains Mono</option>
|
||||
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||
</optgroup>
|
||||
<optgroup label="Display">
|
||||
<option value="Bebas Neue">Bebas Neue</option>
|
||||
<option value="Oswald">Oswald</option>
|
||||
<option value="Righteous">Righteous</option>
|
||||
<option value="Bangers">Bangers</option>
|
||||
<option value="Permanent Marker">Permanent Marker</option>
|
||||
</optgroup>
|
||||
<optgroup label="Handwriting">
|
||||
<option value="Pacifico">Pacifico</option>
|
||||
<option value="Lobster">Lobster</option>
|
||||
<option value="Dancing Script">Dancing Script</option>
|
||||
<option value="Caveat">Caveat</option>
|
||||
<option value="Satisfy">Satisfy</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<p style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">
|
||||
Browse more at <a href="https://fonts.google.com" target="_blank" rel="noopener" style="color: var(--accent-blue);">fonts.google.com</a>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="field">
|
||||
<label for="font-size">Font Size: {fontSize}px</label>
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user