Futontime_UI/settings/subtitleappearanceeditor.template.html

<fieldset class="fieldsetSubtitleAppearance">

    <legend class="appearanceTitle hide">${HeaderSubtitleAppearance}</legend>

    <div class="fieldset-fields">

        <div style="margin-bottom:1.5em;" class="fieldset-field previewContainer hide">
            <div class="subtitleappearance-preview flex align-items-center justify-content-center" style="border: .08em solid gray; color: black; border-radius:.24em; padding:1em; height: 3em;">
                <div class="subtitleappearance-preview-window flex align-items-center justify-content-center" style="width: 90%; padding: .25em;">
                    <div class="subtitleappearance-preview-text flex align-items-center justify-content-center">
                        ${TheseSettingsAffectSubtitlesOnThisDevice}
                    </div>
                </div>
            </div>
            <div class="fieldDescription">${SubtitleAppearanceSettingsDisclaimer}</div>
        </div>

        <div class="selectContainer fieldset-field">
            <select is="emby-select" class="selectTextSize autoSetting autoSave" label="${LabelTextSize}" data-settingfield="textSize" data-settingowner="subtitleappearancesettings" data-triggerchange="true">
                <option value="smaller">${Smaller}</option>
                <option value="small">${Small}</option>
                <option value="">${Normal}</option>
                <option value="large">${Large}</option>
                <option value="larger">${Larger}</option>
                <option value="extralarge">${ExtraLarge}</option>
            </select>
        </div>

        <div class="selectContainer hide fieldset-field">
            <select is="emby-select" class="selectVerticalPosition autoSetting autoSave" label="${LabelVerticalPositionFromBottom}" data-settingfield="verticalPosition" data-settingowner="subtitleappearancesettings">
            </select>
        </div>

        <div class="selectContainer fieldset-field">
            <select is="emby-select" class="inputTextColor autoSetting autoSave" label="${LabelTextColor}" data-settingfield="textColor" data-settingowner="subtitleappearancesettings">
                <option value="#000000">${Black}</option>
                <option value="#0000FF">${Blue}</option>
                <option value="#00FFFF">${Cyan}</option>
                <option value="#808080">${DarkGray}</option>
                <option value="#696969">${DimGray}</option>
                <option value="#A9A9A9">${Gray}</option>
                <option value="#008000">${Green}</option>
                <option value="#D3D3D3">${LightGray}</option>
                <option value="#00FF00">${Lime}</option>
                <option value="#FF00FF">${Magenta}</option>
                <option value="#FFA500">${Orange}</option>
                <option value="#FFC0CB">${Pink}</option>
                <option value="#FF0000">${Red}</option>
                <option value="#C0C0C0">${Silver}</option>
                <option value="#FFFF00">${Yellow}</option>
                <option value="#ffffff">${White}</option>
            </select>
        </div>

        <div class="selectContainer fieldset-field">
            <select is="emby-select" class="selectDropShadow autoSetting autoSave" label="${LabelDropShadow}" data-settingfield="dropShadow" data-settingowner="subtitleappearancesettings">
                <option value="none">${None}</option>
                <option value="raised">${Raised}</option>
                <option value="depressed">${Depressed}</option>
                <option value="uniform">${Uniform}</option>
                <option value="dropshadow">${DropShadow}</option>
            </select>
        </div>

        <div class="selectContainer fieldset-field">
            <select is="emby-select" class="selectBackgroundColor autoSetting autoSave" label="${LabelBackgroundColor}" data-settingfield="textBackground" data-settingowner="subtitleappearancesettings" data-triggerchange="true">
                <option value="#000000">${Black}</option>
                <option value="#0000FF">${Blue}</option>
                <option value="#00FFFF">${Cyan}</option>
                <option value="#808080">${DarkGray}</option>
                <option value="#696969">${DimGray}</option>
                <option value="#A9A9A9">${Gray}</option>
                <option value="#008000">${Green}</option>
                <option value="#D3D3D3">${LightGray}</option>
                <option value="#00FF00">${Lime}</option>
                <option value="#FF00FF">${Magenta}</option>
                <option value="#FFA500">${Orange}</option>
                <option value="#FFC0CB">${Pink}</option>
                <option value="#FF0000">${Red}</option>
                <option value="#C0C0C0">${Silver}</option>
                <option value="transparent">${Transparent}</option>
                <option value="#FFFF00">${Yellow}</option>
                <option value="#ffffff">${White}</option>
            </select>
        </div>

        <div class="selectContainer fldBackgroundOpacity hide fieldset-field">
            <select is="emby-select" class="selectBackgroundOpacity autoSetting autoSave" label="${LabelBackgroundOpacity}" data-settingfield="textBackgroundOpacity" data-settingowner="subtitleappearancesettings">
                <option value=".1">10%</option>
                <option value=".2">20%</option>
                <option value=".25">25%</option>
                <option value=".3">30%</option>
                <option value=".4">40%</option>
                <option value=".50">50%</option>
                <option value=".6">60%</option>
                <option value=".7">70%</option>
                <option value=".75">75%</option>
                <option value=".8">80%</option>
                <option value=".9">90%</option>
                <option value="1">100%</option>
            </select>
        </div>
    </div>
</fieldset>

<fieldset class="autoSetting-autohide hide" data-cssfeatures="cssvars" data-childfieldsvisible="true">
    <legend>${HeaderSubtitlePosition}</legend>

    <div class="fieldset-fields">

        <div class="selectContainer autoSetting-autohide hide fieldset-field" data-cssfeatures="cssvars" data-apphostsupports="subtitlepositionbottom">
            <select is="emby-select" class="autoSetting autoSave" label="${BottomEdgePosition}" data-settingfield="positionBottom" data-settingowner="subtitleappearancesettings">
                <option value="0">0%</option>
                <option value="5">5%</option>
                <option value="10">10%</option>
                <option value="15">15%</option>
                <option value="20">20%</option>
                <option value="25">25%</option>
                <option value="30">30%</option>
                <option value="35">35%</option>
                <option value="40">40%</option>
                <option value="45">45%</option>
                <option value="50">50%</option>
                <option value="55">55%</option>
                <option value="60">60%</option>
            </select>
            <div class="fieldDescription">${VerticalPositionFromBottomScreen}</div>
        </div>
        <div class="selectContainer autoSetting-autohide hide fieldset-field" data-cssfeatures="cssvars" data-apphostsupports="subtitlepositiontop">
            <select is="emby-select" class="autoSetting autoSave" label="${TopEdgePosition}" data-settingfield="positionTop" data-settingowner="subtitleappearancesettings">
                <option value="0">0%</option>
                <option value="5">5%</option>
                <option value="10">10%</option>
                <option value="15">15%</option>
                <option value="20">20%</option>
                <option value="25">25%</option>
                <option value="30">30%</option>
            </select>
            <div class="fieldDescription">${TopEdgePositionHelp}</div>
        </div>
    </div>
</fieldset>