Caption Appearance
x
Font
update({ fontFamily: (e.target as HTMLSelectElement).value })} > {#each systemFonts as font}
{font}
{/each}
Font Size
{settings.fontSize}px
update({ fontSize: parseInt((e.target as HTMLInputElement).value, 10) })} />
Text Color
update({ textColor: (e.target as HTMLInputElement).value })} />
update({ bold: (e.target as HTMLInputElement).checked })} /> Bold
Dimmed Text
update({ dimmedColorMode: 'auto' })} /> Auto
update({ dimmedColorMode: 'custom' })} /> Custom
{#if settings.dimmedColorMode === 'auto'}
Dim Opacity
{Math.round(settings.dimmedOpacity * 100)}%
update({ dimmedOpacity: parseInt((e.target as HTMLInputElement).value, 10) / 100 })} />
{:else}
Dimmed Color
update({ dimmedColor: (e.target as HTMLInputElement).value })} />
{/if}
update({ textOutline: (e.target as HTMLInputElement).checked })} /> Outline
update({ outlineColor: (e.target as HTMLInputElement).value })} />
update({ backgroundEnabled: (e.target as HTMLInputElement).checked })} /> Background
update({ backgroundColor: (e.target as HTMLInputElement).value })} />
{#if settings.backgroundEnabled}
BG Opacity
{Math.round(settings.backgroundOpacity * 100)}%
update({ backgroundOpacity: parseInt((e.target as HTMLInputElement).value, 10) / 100 })} />
{/if}
update({ shadowEnabled: (e.target as HTMLInputElement).checked })} /> Drop Shadow
update({ shadowColor: (e.target as HTMLInputElement).value })} />
{#if settings.shadowEnabled}
Shadow Depth
{settings.shadowDepth}px
update({ shadowDepth: parseInt((e.target as HTMLInputElement).value, 10) })} />
{/if}
Position
update({ position: 'bottom' })} /> Bottom
update({ position: 'top' })} /> Top
update({ wordHighlight: (e.target as HTMLInputElement).checked })} /> Word-by-word highlight