rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix themes application, refactor user settings

This commit is contained in:
RossAscends 2023-09-22 22:16:24 +09:00
parent b1ab1451ec
commit 54c37e945b
5 changed files with 364 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/st-tailwind.css
View File

@ -262,6 +262,10 @@
flex-flow: column; flex-flow: column;
} }
.flexFlowRow {
flex-flow: row;
}
.wideMinContent { .wideMinContent {
width: min-content; width: min-content;
} }

548
public/index.html
View File

@ -2687,24 +2687,66 @@
<div class="drawer-icon fa-solid fa-user-cog closedIcon" title="User Settings" data-i18n="[title]User Settings"></div> <div class="drawer-icon fa-solid fa-user-cog closedIcon" title="User Settings" data-i18n="[title]User Settings"></div>
</div> </div>
<div id="user-settings-block" class="drawer-content closedDrawer"> <div id="user-settings-block" class="drawer-content closedDrawer">
<div class="flex-container wide100p alignitemscenter spaceBetween"> <div class="flex-container flexFlowColumn">
<h3><span data-i18n="User Settings">User Settings</span></h3> <div name="userSettingsRowOne" class="flex-container flexFlowRow alignitemscenter spaceBetween">
<div id="version_display"></div> <div class="flex-container">
</div> <div class="flex-container flexnowrap alignitemscenter">
<div id="user-settings-block-content" class="flex-container spaceEvenly"> <h3><span data-i18n="User Settings">User Settings</span></h3>
<div id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p"> <select id="ui_mode_select" class="margin0 widthNatural">
<div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
<div id="UI-Mode-Block">
<h4 data-i18n="UI Mode">
UI Mode
</h4>
<select id="ui_mode_select" class="margin0 margin-r5">
<option value="0" data-i18n="Simple">Simple</option> <option value="0" data-i18n="Simple">Simple</option>
<option value="1" data-i18n="Advanced">Advanced</option> <option value="1" data-i18n="Advanced">Advanced</option>
</select> </select>
</div> </div>
<div data-newbie-hidden> </div>
<h4><span data-i18n="UI Colors">UI Colors</span></h4> <div id="UI-language-block" class="flex-container">
<span data-i18n="UI Language">Language</span>
<select id="ui_language_select" class="widthNatural flex1 margin0">
<option value="" data-i18n="Default">Default</option>
<option value="en">en</option>
</select>
</div>
<small id="version_display"></small>
</div>
<div name="UserSettingsRowTwo" class="flex-container flexFlowRow">
<textarea id="settingsSearch" class="textarea_compact wide100p" rows="1" placeholder="Search Settings"></textarea>
</div>
</div>
<div id="user-settings-block-content" class="flex-container spaceEvenly">
<div name="UserSettingsFirstColumn" id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
<div id="UI-presets-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="UI Theme Preset">Theme Preset</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="themes" class="margin0">
</select>
<div id="ui-preset-save-button" title="Save changes to a new theme file" data-i18n="[title]Save changes to a new theme file" class="menu_button margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</div>
<div name="themeElements" data-newbie-hidden class="flex-container flexFlowColumn flexNoGap">
<h4><span data-i18n="UI Colors">Theme Settings</span></h4>
<div name="AvatarAndChatDisplay" class="flex-container flexFlowColumn">
<div class="flex-container">
<span data-i18n="Avatar Style">Avatars:</span>
<select id="avatar_style" class="widthNatural flex1 margin0">
<option value="0" data-i18n="Circle">Circle</option>
<option value="1" data-i18n="Rectangle">Rectangle</option>
</select>
</div>
<div class="flex-container">
<span data-i18n="Chat Style:">Chat Style:</span><br>
<select id="chat_display" class="widthNatural flex1 margin0">
<option value="0" data-i18n="Default">Flat</span>
<option value="1" data-i18n="Bubbles">Bubbles</option>
<option value="2" data-i18n="Document">Document</option>
</select>
</div>
</div>
<div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
<div class="flex-container"> <div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker> <toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<span data-i18n="Main Text">Main Text</span> <span data-i18n="Main Text">Main Text</span>
@ -2742,7 +2784,23 @@
<span data-i18n="AI Message Blur Tint">AI Message</span> <span data-i18n="AI Message Blur Tint">AI Message</span>
</div> </div>
</div> </div>
<div data-newbie-hidden id="font-blur-UIpresets-block" class="flex-container flexFlowColumn flexNoGap">
<div data-newbie-hidden name="FontBlurChatWidthBlock" class="flex-container flexFlowColumn flexNoGap">
<div data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="Chat Width (PC)">
Chat Width (PC)
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input id="chat_width_slider" class="wide100p" type="range" min="25" max="75" step="1" value="50">
<div class="slider_hint">
<span>25%</span>
<span>50%</span>
<span>75%</span>
</div>
</div>
</div>
</div>
<div id="font-scale-block" class="range-block"> <div id="font-scale-block" class="range-block">
<div class="range-block-title" data-i18n="Font Scale"> <div class="range-block-title" data-i18n="Font Scale">
Font Scale Font Scale
@ -2789,289 +2847,233 @@
</div> </div>
</div> </div>
</div> </div>
<div id="UI-language-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="UI Language">UI Language</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="ui_language_select" class="margin0 margin-r5">
<option value="" data-i18n="Browser default">
Browser default
</option>
<option value="en">en</option>
</select>
</div>
</div>
<div id="UI-presets-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="UI Theme Preset">UI Theme Preset</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="themes" class="margin0 margin-r5">
</select>
<div id="ui-preset-save-button" title="Save changes to a new theme file" data-i18n="[title]Save changes to a new theme file" class="menu_button padding5 margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</div>
<div data-newbie-hidden id="MovingUI-presets-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="MovingUI Preset">MovingUI Preset</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="movingUIPresets" class="margin0 margin-r5">
</select>
<div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file" data-i18n="[title]Save movingUI changes to a new file" class="menu_button padding5 margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
<div id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
Reset MovingUI
</div>
</div>
</div> </div>
</div> </div>
<div id="UI-Customization" class="flex-container wide100p"> <div name="UserSettingsSecondColumn" id="UI-Customization" class="flex-container flexFlowColumn wide100p">
<div class="ui-settings"> <div name="themeToggles">
<h4><span data-i18n="UI Customization">UI Customization</span></h4> <h4 data-i18n="Theme Toggles">Theme Toggles</h4>
<div data-newbie-hidden class="range-block"> <label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="removes blur from window backgrounds" data-i18n="[title]removes blur from window backgrounds">
<div class="range-block-title" data-i18n="Chat Width (PC)"> <input id="fast_ui_mode" type="checkbox" />
Chat Width (PC) <span data-i18n="No Blur Effect">No Blur Effect</span>
</div> </label>
<div class="range-block-range-and-counter"> <label data-newbie-hidden for="noShadowsmode" class="checkbox_label">
<div class="range-block-range"> <input id="noShadowsmode" type="checkbox" />
<input id="chat_width_slider" class="wide100p" type="range" min="25" max="75" step="1" value="50"> <span data-i18n="No Text Shadows">No Text Shadows</span>
<div class="slider_hint"> </label>
<span>25%</span> <label for="waifuMode" class="checkbox_label">
<span>50%</span> <input id="waifuMode" type="checkbox" />
<span>75%</span> <span data-i18n="Waifu Mode">Visual Novel Mode</span>
</label>
<label data-newbie-hidden for="expandMessageActions" class="checkbox_label">
<input id="expandMessageActions" type="checkbox" />
<span data-i18n="Auto-Expand Message Actions">Expand Message Actions</span>
</label>
<label data-newbie-hidden for="messageTimerEnabled" class="checkbox_label">
<input id="messageTimerEnabled" type="checkbox" />
<span data-i18n="Message Timer">Message Timer</span>
</label>
<label data-newbie-hidden for="messageTimestampsEnabled" class="checkbox_label">
<input id="messageTimestampsEnabled" type="checkbox" />
<span data-i18n="Chat Timestamps">Chat Timestamps</span>
</label>
<label data-newbie-hidden for="messageModelIconEnabled" class="checkbox_label">
<input id="messageModelIconEnabled" type="checkbox" />
<span data-i18n="Model Icon">Model Icons</span>
</label>
<label data-newbie-hidden for="mesIDDisplayEnabled" class="checkbox_label">
<input id="mesIDDisplayEnabled" type="checkbox" />
<span data-i18n="Message IDs">Message IDs</span>
</label>
<label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label">
<input id="messageTokensEnabled" type="checkbox" />
<span data-i18n="Show Message Token Count">Message Token Count</span>
</label>
<label data-newbie-hidden for="hotswapEnabled" class="checkbox_label">
<input id="hotswapEnabled" type="checkbox" />
<span data-i18n="Characters Hotswap">Characters Hotswap</span>
</label>
</div>
<h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
<div>
<label for="play_message_sound" class="checkbox_label">
<input id="play_message_sound" type="checkbox" />
<audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
<span>
<span data-i18n="Message Sound">Message Sound</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</span>
</label>
<label for="play_sound_unfocused" class="checkbox_label">
<input id="play_sound_unfocused" type="checkbox" />
<span data-i18n="Background Sound Only">Background Sound Only</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="relaxed_api_urls" title="Reduce the formatting requirements on API URLS">
<input id="relaxed_api_urls" type="checkbox" />
<span data-i18n="Relaxed API URLS">Relaxed API URLs</span>
</label>
<label data-newbie-hidden id="movingUIModeCheckBlock" for="movingUImode" class="checkbox_label">
<input id="movingUImode" type="checkbox" />
<span data-i18n="Movable UI Panels">MovingUI</span>
</label>
<div data-newbie-hidden id="MovingUI-presets-block" class="flex-container alignitemscenter">
<div class="flex-container alignitemscenter">
<span>MUI Preset:</span>
<div class="flex-container flexnowrap">
<select id="movingUIPresets" class="widthNatural flex1 margin0">
</select>
<div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file" data-i18n="[title]Save movingUI changes to a new file" class="menu_button margin0">
<i class="fa-solid fa-save"></i>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div> <div id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
<span data-i18n="Avatar Style">Avatar Style:</span><br> Reset MovingUI
<label> </div>
<input name="avatar_style" type="radio" value="0" /> </div>
<span data-i18n="Circle">Circle</span> </div>
<div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">
<div id="power-user-option-checkboxes">
<div data-newbie-hidden name="CharacterHandlingToggles">
<h4>Character Handling</h4>
<label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox">
<input id="fuzzy_search_checkbox" type="checkbox" />
<span data-i18n="Advanced Character Search">Advanced Character Search</span>
</label> </label>
<label> <label data-newbie-hidden for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[title]If checked and the character card contains a prompt override (System Prompt), use that instead." class="checkbox_label">
<input name="avatar_style" type="radio" value="1" /> <input id="prefer_character_prompt" type="checkbox" />
<span data-i18n="Rectangle">Rectangle</span> <span data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</span>
</label>
<label data-newbie-hidden for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." data-i18n="[title]If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." class="checkbox_label">
<input id="prefer_character_jailbreak" type="checkbox" />
<span data-i18n="Prefer Character Card Jailbreak">Prefer Char. JB</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="never_resize_avatars">
<input id="never_resize_avatars" type="checkbox" />
<span data-i18n="Never resize avatars">Never resize avatars</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="show_card_avatar_urls">
<input id="show_card_avatar_urls" type="checkbox" />
<span data-i18n="Show avatar filenames">Show avatar filenames</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="import_card_tags">
<input id="import_card_tags" type="checkbox" />
<span data-i18n="Import Card Tags">Import Card Tags</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode">
<input id="spoiler_free_mode" type="checkbox" />
<span data-i18n="Spoiler Free Mode">Spoiler Free Mode</span>
</label> </label>
</div> </div>
<div>
<span data-i18n="Chat Style:">Message Style:</span><br> <div name="ChatMessageHandlingToggles">
<select id="chat_display"> <h4>Chat/Message Handling</h4>
<option value="0" data-i18n="Default">Flat Chat</span> <div data-newbie-hidden class="flex-container alignitemscenter">
<option value="1" data-i18n="Bubbles">Bubble Chat</option> <span data-i18n="Send on Enter">
<option value="2" data-i18n="Document">Single Document</option> Enter to Send:
</select> </span>
</div> <select id="send_on_enter" class="widthNatural flex1 margin0">
<div> <option value="-1" data-i18n="Disabled">Disabled</option>
<label for="play_message_sound" class="checkbox_label"> <option value="0" data-i18n="Automatic (PC)">Automatic (PC)</option>
<input id="play_message_sound" type="checkbox" /> <option value="1" data-i18n="Enabled">Enabled</option>
<audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio> </select>
<span> </div>
<span data-i18n="Message Sound">Message Sound</span> <label data-newbie-hidden class="checkbox_label" for="continue_on_send">
<a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank"> <input id="continue_on_send" type="checkbox" />
<span class="note-link-span">?</span> <span data-i18n="Press Send to continue">
</a> "Send" to Continue
</span> </span>
</label> </label>
<label for="play_sound_unfocused" class="checkbox_label"> <label class="checkbox_label" for="quick_continue">
<input id="play_sound_unfocused" type="checkbox" /> <input id="quick_continue" type="checkbox" />
<span data-i18n="Background Sound Only">Background Sound Only</span> <span data-i18n="Press Send to continue">
Quick "Continue" button
</span>
</label> </label>
<label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="removes blur from window backgrounds" data-i18n="[title]removes blur from window backgrounds"> <label data-newbie-hidden class="checkbox_label" for="swipes-checkbox">
<input id="fast_ui_mode" type="checkbox" /> <input id="swipes-checkbox" type="checkbox" />
<span data-i18n="No Blur Effect">No Blur Effect</span> <span data-i18n="Swipes">Swipes</span>
</label> </label>
<label data-newbie-hidden for="noShadowsmode" class="checkbox_label"> <label class="checkbox_label" for="auto-load-chat-checkbox">
<input id="noShadowsmode" type="checkbox" /> <input id="auto-load-chat-checkbox" type="checkbox" />
<span data-i18n="No Text Shadows">No Text Shadows</span> <span data-i18n="Auto-load Last Chat">Auto-load Last Chat</span>
</label> </label>
<label for="waifuMode" class="checkbox_label">
<input id="waifuMode" type="checkbox" />
<span data-i18n="Waifu Mode">Visual Novel Mode</span>
</label>
<label for="expandMessageActions" class="checkbox_label">
<input id="expandMessageActions" type="checkbox" />
<span data-i18n="Auto-Expand Message Actions">Auto-Expand Message Actions</span>
</label>
<label for="messageTimerEnabled" class="checkbox_label">
<input id="messageTimerEnabled" type="checkbox" />
<span data-i18n="Message Timer">Message Timer</span>
</label>
<label data-newbie-hidden for="messageTimestampsEnabled" class="checkbox_label">
<input id="messageTimestampsEnabled" type="checkbox" />
<span data-i18n="Chat Timestamps">Chat Timestamps</span>
</label>
<label data-newbie-hidden for="messageModelIconEnabled" class="checkbox_label">
<input id="messageModelIconEnabled" type="checkbox" />
<span data-i18n="Model Icon">Show Model Icons</span>
</label>
<label data-newbie-hidden for="mesIDDisplayEnabled" class="checkbox_label">
<input id="mesIDDisplayEnabled" type="checkbox" />
<span data-i18n="Message IDs">Show Message IDs</span>
</label>
<label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label">
<input id="messageTokensEnabled" type="checkbox" />
<span data-i18n="Show Message Token Count">Show Message Token Count</span>
</label>
<label data-newbie-hidden for="auto_scroll_chat_to_bottom" class="checkbox_label"> <label data-newbie-hidden for="auto_scroll_chat_to_bottom" class="checkbox_label">
<input id="auto_scroll_chat_to_bottom" type="checkbox" /> <input id="auto_scroll_chat_to_bottom" type="checkbox" />
<span data-i18n="Auto-scroll Chat">Auto-scroll Chat</span> <span data-i18n="Auto-scroll Chat">Auto-scroll Chat</span>
</label> </label>
<label data-newbie-hidden for="hotswapEnabled" class="checkbox_label"> <label data-newbie-hidden class="checkbox_label" for="auto_save_msg_edits">
<input id="hotswapEnabled" type="checkbox" /> <input id="auto_save_msg_edits" type="checkbox" />
<span data-i18n="Characters Hotswap">Characters Hotswap</span> <span data-i18n="Auto-save Message Edits">Auto-save Message Edits</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="confirm_message_delete">
<input id="confirm_message_delete" type="checkbox" />
<span data-i18n="Confirm message deletion">Confirm message deletion</span>
</label>
<label class="checkbox_label" for="auto_fix_generated_markdown">
<input id="auto_fix_generated_markdown" type="checkbox" />
<span data-i18n="Auto-fix Markdown">Auto-fix Markdown</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="render_formulas">
<input id="render_formulas" type="checkbox" />
<span data-i18n="Render Formulas">Render Formulas</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</label>
<label data-newbie-hidden class="checkbox_label" for="allow_name2_display">
<input id="allow_name2_display" type="checkbox" />
<span data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="allow_name1_display">
<input id="allow_name1_display" type="checkbox" />
<span data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</span>
</label>
<label class="checkbox_label" for="encode_tags">
<input id="encode_tags" type="checkbox" />
<span data-i18n="Show tags in responses">Show &lt;tags&gt; in responses</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="disable_group_trimming" title="Allow AI messages in groups to contain lines spoken by other group members.">
<input id="disable_group_trimming" type="checkbox" />
<span data-i18n="Relax message trim in Groups">Relax message trim in Groups</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="console_log_prompts">
<input id="console_log_prompts" type="checkbox" />
<span data-i18n="Log prompts to console">Log prompts to console</span>
</label> </label>
<label data-newbie-hidden id="movingUIModeCheckBlock" for="movingUImode" class="checkbox_label"> <div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
<input id="movingUImode" type="checkbox" /> <div class="inline-drawer-toggle inline-drawer-header">
<span data-i18n="Movable UI Panels">Movable UI Panels</span> <b><span data-i18n="Auto-swipe">Auto-swipe</span></b>
</label> <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div data-newbie-hidden class="flex-container flexFlowColumn"> <div class="inline-drawer-content">
<h4 data-i18n="Send on Enter"> <label class="checkbox_label" for="auto_swipe">
Send on Enter <input id="auto_swipe" type="checkbox" />
</h4> <span data-i18n="Enabled">Enabled</span>
<select id="send_on_enter"> </label>
<option value="-1" data-i18n="Always disabled">Always disabled</option> <div data-i18n="Minimum generated message length">Minimum generated message length</div>
<option value="0" data-i18n="Automatic (desktop)">Automatic (desktop)</option> <input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
<option value="1" data-i18n="Always enabled">Always enabled</option> <div data-i18n="Blacklisted words">Blacklisted words</div>
</select> <div class="auto_swipe">
</div> <textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" data-i18n="[placeholder]words you dont want generated separated by comma ','" placeholder="words you dont want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
</div> <div data-i18n="Blacklisted word count to swipe">Blacklisted word count to swipe</div>
</div> <input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
</div>
</div>
<div id="power-user-options-block" class="flex-container wide100p">
<div id="power-user-option-checkboxes">
<h4 data-i18n="Power User Options">Power User Options</h4>
<label data-newbie-hidden class="checkbox_label" for="swipes-checkbox">
<input id="swipes-checkbox" type="checkbox" />
<span data-i18n="Swipes">Swipes</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox">
<input id="fuzzy_search_checkbox" type="checkbox" />
<span data-i18n="Advanced Character Search">Advanced Character Search</span>
</label>
<label data-newbie-hidden for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[title]If checked and the character card contains a prompt override (System Prompt), use that instead." class="checkbox_label">
<input id="prefer_character_prompt" type="checkbox" />
<span data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</span>
</label>
<label data-newbie-hidden for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." data-i18n="[title]If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." class="checkbox_label">
<input id="prefer_character_jailbreak" type="checkbox" />
<span data-i18n="Prefer Character Card Jailbreak">Prefer Char. JB</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="continue_on_send">
<input id="continue_on_send" type="checkbox" />
<span data-i18n="Press Send to continue">
Press "Send" to continue
</span>
</label>
<label class="checkbox_label" for="quick_continue">
<input id="quick_continue" type="checkbox" />
<span data-i18n="Press Send to continue">
Show quick "Continue" button
</span>
</label>
<label class="checkbox_label" for="auto-load-chat-checkbox">
<input id="auto-load-chat-checkbox" type="checkbox" />
<span data-i18n="Auto-load Last Chat">Auto-load Last Chat</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="auto_save_msg_edits">
<input id="auto_save_msg_edits" type="checkbox" />
<span data-i18n="Auto-save Message Edits">Auto-save Message Edits</span>
</label>
<label class="checkbox_label" for="auto_fix_generated_markdown">
<input id="auto_fix_generated_markdown" type="checkbox" />
<span data-i18n="Auto-fix Markdown">Auto-fix Markdown</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="allow_name2_display">
<input id="allow_name2_display" type="checkbox" />
<span data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="allow_name1_display">
<input id="allow_name1_display" type="checkbox" />
<span data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</span>
</label>
<label class="checkbox_label" for="encode_tags">
<input id="encode_tags" type="checkbox" />
<span data-i18n="Show tags in responses">Show &lt;tags&gt; in responses</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="disable_group_trimming" title="Allow AI messages in groups to contain lines spoken by other group members.">
<input id="disable_group_trimming" type="checkbox" />
<span data-i18n="Show impersonated replies in groups">Show impersonated replies in groups</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="console_log_prompts">
<input id="console_log_prompts" type="checkbox" />
<span data-i18n="Log prompts to console">Log prompts to console</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="render_formulas">
<input id="render_formulas" type="checkbox" />
<span data-i18n="Render Formulas">Render Formulas</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</label>
<label data-newbie-hidden class="checkbox_label" for="never_resize_avatars">
<input id="never_resize_avatars" type="checkbox" />
<span data-i18n="Never resize avatars">Never resize avatars</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="show_card_avatar_urls">
<input id="show_card_avatar_urls" type="checkbox" />
<span data-i18n="Show avatar filenames">Show avatar filenames</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="import_card_tags">
<input id="import_card_tags" type="checkbox" />
<span data-i18n="Import Card Tags">Import Card Tags</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="confirm_message_delete">
<input id="confirm_message_delete" type="checkbox" />
<span data-i18n="Confirm message deletion">Confirm message deletion</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode">
<input id="spoiler_free_mode" type="checkbox" />
<span data-i18n="Spoiler Free Mode">Spoiler Free Mode</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="relaxed_api_urls" title="Reduce the formatting requirements on API URLS">
<input id="relaxed_api_urls" type="checkbox" />
<span data-i18n="Relaxed API URLS">Relaxed API URLS</span>
</label>
<div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
<div class="inline-drawer-toggle inline-drawer-header">
<b><span data-i18n="Auto-swipe">Auto-swipe</span></b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<label class="checkbox_label" for="auto_swipe">
<input id="auto_swipe" type="checkbox" />
<span data-i18n="Enabled">Enabled</span>
</label>
<div data-i18n="Minimum generated message length">Minimum generated message length</div>
<input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
<div data-i18n="Blacklisted words">Blacklisted words</div>
<div class="auto_swipe">
<textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" data-i18n="[placeholder]words you dont want generated separated by comma ','" placeholder="words you dont want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
<div data-i18n="Blacklisted word count to swipe">Blacklisted word count to swipe</div>
<input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
</div> </div>
</div> </div>
</div> </div>
<div data-newbie-hidden class="flex-container"> <div data-newbie-hidden class="flex-container">
<div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat"> <div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat">
Reload Chat Reload Chat

4
public/scripts/extensions/settingsearch/index.js
View File

@ -6,7 +6,7 @@ async function addSettingsSearchHTML() {
const html = ` const html = `
<div class="wide100p"> <div class="wide100p">
<div class="justifyLeft"> <div class="justifyLeft">
<textarea id="settingsSearch" class="wide100p textarea_compact margin-bot-10px" rows="1" placeholder="Search Settings"></textarea> <textarea id="settingsSearch" class="wide100p textarea_compact" rows="1" placeholder="Search Settings"></textarea>
</div> </div>
</div>` </div>`
@ -45,7 +45,7 @@ function removeHighlighting() {
$(".highlighted").removeClass("highlighted"); // Remove CSS class from previously highlighted elements $(".highlighted").removeClass("highlighted"); // Remove CSS class from previously highlighted elements
} }
jQuery(() => { jQuery(() => {
addSettingsSearchHTML(); //addSettingsSearchHTML();
$('#settingsSearch').on('input change', searchSettings); $('#settingsSearch').on('input change', searchSettings);
}); });

117
public/scripts/power-user.js
View File

@ -149,7 +149,6 @@ let power_user = {
render_formulas: false, render_formulas: false,
allow_name1_display: false, allow_name1_display: false,
allow_name2_display: false, allow_name2_display: false,
//removeXML: false,
hotswap_enabled: true, hotswap_enabled: true,
timer_enabled: true, timer_enabled: true,
timestamps_enabled: true, timestamps_enabled: true,
@ -378,6 +377,18 @@ function switchTokenCount() {
$("#messageTokensEnabled").prop("checked", power_user.message_token_count_enabled); $("#messageTokensEnabled").prop("checked", power_user.message_token_count_enabled);
} }
function switchMesIDDisplay() {
const value = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
let before = power_user.mesIDDisplay_enabled;
power_user.mesIDDisplay_enabled = value === null ? true : value == "true";
/* console.log(`
localstorage value:${value},
poweruser before:${before},
poweruser after:${power_user.mesIDDisplay_enabled}`) */
$("body").toggleClass("no-mesIDDisplay", !power_user.mesIDDisplay_enabled);
$("#mesIDDisplayEnabled").prop("checked", power_user.mesIDDisplay_enabled);
}
function switchMessageActions() { function switchMessageActions() {
const value = localStorage.getItem(storage_keys.expand_message_actions); const value = localStorage.getItem(storage_keys.expand_message_actions);
power_user.expand_message_actions = value === null ? false : value == "true"; power_user.expand_message_actions = value === null ? false : value == "true";
@ -385,18 +396,15 @@ function switchMessageActions() {
$("#expandMessageActions").prop("checked", power_user.expand_message_actions); $("#expandMessageActions").prop("checked", power_user.expand_message_actions);
} }
function switchMesIDDisplay() {
const value = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
power_user.mesIDDisplay_enabled = value === null ? true : value == "true";
$("body").toggleClass("no-mesIDDisplay", !power_user.mesIDDisplay_enabled);
$("#MesIDDisplayEnabled").prop("checked", power_user.mesIDDisplay_enabled);
}
function switchUiMode() { function switchUiMode() {
const fastUi = localStorage.getItem(storage_keys.fast_ui_mode); const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true"; power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
$("body").toggleClass("no-blur", power_user.fast_ui_mode); $("body").toggleClass("no-blur", power_user.fast_ui_mode);
$("#fast_ui_mode").prop("checked", power_user.fast_ui_mode); $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
if (power_user.fast_ui_mode) {
$("#blur-strength-block").css('opacity', '0.2')
$("#blur_strength").prop('disabled', true)
} else { $("#blur-strength-block").css('opacity', '1') }
} }
function toggleWaifu() { function toggleWaifu() {
@ -452,13 +460,18 @@ function noShadows() {
power_user.noShadows = noShadows === null ? false : noShadows == "true"; power_user.noShadows = noShadows === null ? false : noShadows == "true";
$("body").toggleClass("noShadows", power_user.noShadows); $("body").toggleClass("noShadows", power_user.noShadows);
$("#noShadowsmode").prop("checked", power_user.noShadows); $("#noShadowsmode").prop("checked", power_user.noShadows);
if (power_user.noShadows) {
$("#shadow-width-block").css('opacity', '0.2')
$("#shadow_width").prop('disabled', true)
} else { $("#shadow-width-block").css('opacity', '1') }
scrollChatToBottom(); scrollChatToBottom();
} }
function applyAvatarStyle() { function applyAvatarStyle() {
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
$("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR); $("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR);
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true); $("#avatar_style").val(power_user.avatar_style).prop("selected", true);
//$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
} }
@ -468,9 +481,8 @@ function applyChatDisplay() {
console.debug('applyChatDisplay: saw no chat display type defined') console.debug('applyChatDisplay: saw no chat display type defined')
return return
} }
console.debug(`applyChatDisplay: applying ${power_user.chat_display}`) console.debug(`poweruser.chat_display ${power_user.chat_display}`)
$("#chat_display").val(power_user.chat_display).prop("selected", true);
$(`#chat_display option[value=${power_user.chat_display}]`).attr("selected", true)
switch (power_user.chat_display) { switch (power_user.chat_display) {
case 0: { case 0: {
@ -494,11 +506,20 @@ function applyChatDisplay() {
} }
} }
function applyChatWidth() { function applyChatWidth(type) {
power_user.chat_width = Number(localStorage.getItem(storage_keys.chat_width) ?? 50); power_user.chat_width = Number(localStorage.getItem(storage_keys.chat_width) ?? 50);
let r = document.documentElement;
r.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`); if (type === 'forced') {
$('#chat_width_slider').val(power_user.chat_width); let r = document.documentElement;
r.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`);
$('#chat_width_slider').val(power_user.chat_width);
//document.documentElement.style.setProperty('--sheldWidth', power_user.chat_width);
} else {
//this is to prevent the slider from updating page in real time
$("#chat_width_slider").off('mouseup touchend').on('mouseup touchend', () => {
document.documentElement.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`);
})
}
} }
async function applyThemeColor(type) { async function applyThemeColor(type) {
@ -540,6 +561,7 @@ async function applyBlurStrength() {
$("#blur_strength_counter").text(power_user.blur_strength); $("#blur_strength_counter").text(power_user.blur_strength);
$("#blur_strength").val(power_user.blur_strength); $("#blur_strength").val(power_user.blur_strength);
} }
async function applyShadowWidth() { async function applyShadowWidth() {
@ -649,55 +671,55 @@ async function applyTheme(name) {
} }
localStorage.setItem(storage_keys.chat_width, String(power_user.chat_width)); localStorage.setItem(storage_keys.chat_width, String(power_user.chat_width));
applyChatWidth(); applyChatWidth('forced');
} }
}, },
{ {
key: 'timer_enabled', key: 'timer_enabled',
action: async () => { action: async () => {
localStorage.setItem(storage_keys.timer_enabled, String(power_user.timer_enabled)); localStorage.setItem(storage_keys.timer_enabled, Boolean(power_user.timer_enabled));
switchTimer(); switchTimer();
} }
}, },
{ {
key: 'timestamps_enabled', key: 'timestamps_enabled',
action: async () => { action: async () => {
localStorage.setItem(storage_keys.timestamps_enabled, String(power_user.timestamps_enabled)); localStorage.setItem(storage_keys.timestamps_enabled, Boolean(power_user.timestamps_enabled));
switchTimestamps(); switchTimestamps();
} }
}, },
{ {
key: 'timestamp_model_icon', key: 'timestamp_model_icon',
action: async () => { action: async () => {
localStorage.setItem(storage_keys.timestamp_model_icon, String(power_user.timestamp_model_icon)); localStorage.setItem(storage_keys.timestamp_model_icon, Boolean(power_user.timestamp_model_icon));
switchIcons(); switchIcons();
} }
}, },
{ {
key: 'message_token_count', key: 'message_token_count_enabled',
action: async () => { action: async () => {
localStorage.setItem(storage_keys.message_token_count_enabled, String(power_user.message_token_count_enabled)); localStorage.setItem(storage_keys.message_token_count_enabled, Boolean(power_user.message_token_count_enabled));
switchTokenCount(); switchTokenCount();
} }
}, },
{ {
key: 'mesIDDisplay_enabled', key: 'mesIDDisplay_enabled',
action: async () => { action: async () => {
localStorage.setItem(storage_keys.mesIDDisplay_enabled, String(power_user.mesIDDisplay_enabled)); localStorage.setItem(storage_keys.mesIDDisplay_enabled, Boolean(power_user.mesIDDisplay_enabled));
switchMesIDDisplay(); switchMesIDDisplay();
} }
}, },
{ {
key: 'expand_message_actions', key: 'expand_message_actions',
action: async () => { action: async () => {
localStorage.setItem(storage_keys.expand_message_actions, String(power_user.expand_message_actions)); localStorage.setItem(storage_keys.expand_message_actions, Boolean(power_user.expand_message_actions));
switchMessageActions(); switchMessageActions();
} }
}, },
{ {
key: 'hotswap_enabled', key: 'hotswap_enabled',
action: async () => { action: async () => {
localStorage.setItem(storage_keys.hotswap_enabled, String(power_user.hotswap_enabled)); localStorage.setItem(storage_keys.hotswap_enabled, Boolean(power_user.hotswap_enabled));
switchHotswap(); switchHotswap();
} }
} }
@ -753,7 +775,7 @@ function showDebugMenu() {
switchUiMode(); switchUiMode();
applyFontScale('forced'); applyFontScale('forced');
applyThemeColor(); applyThemeColor();
applyChatWidth(); applyChatWidth('forced');
applyAvatarStyle(); applyAvatarStyle();
applyBlurStrength(); applyBlurStrength();
applyShadowWidth(); applyShadowWidth();
@ -794,6 +816,8 @@ function loadPowerUserSettings(settings, data) {
const timer = localStorage.getItem(storage_keys.timer_enabled); const timer = localStorage.getItem(storage_keys.timer_enabled);
const timestamps = localStorage.getItem(storage_keys.timestamps_enabled); const timestamps = localStorage.getItem(storage_keys.timestamps_enabled);
const mesIDDisplay = localStorage.getItem(storage_keys.mesIDDisplay_enabled); const mesIDDisplay = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
const expandMessageActions = localStorage.getItem(storage_keys.expand_message_actions);
console.log(expandMessageActions)
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true"; power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
power_user.movingUI = movingUI === null ? false : movingUI == "true"; power_user.movingUI = movingUI === null ? false : movingUI == "true";
power_user.noShadows = noShadows === null ? false : noShadows == "true"; power_user.noShadows = noShadows === null ? false : noShadows == "true";
@ -801,6 +825,8 @@ function loadPowerUserSettings(settings, data) {
power_user.timer_enabled = timer === null ? true : timer == "true"; power_user.timer_enabled = timer === null ? true : timer == "true";
power_user.timestamps_enabled = timestamps === null ? true : timestamps == "true"; power_user.timestamps_enabled = timestamps === null ? true : timestamps == "true";
power_user.mesIDDisplay_enabled = mesIDDisplay === null ? true : mesIDDisplay == "true"; power_user.mesIDDisplay_enabled = mesIDDisplay === null ? true : mesIDDisplay == "true";
power_user.expand_message_actions = expandMessageActions === null ? true : expandMessageActions == "true";
console.log(power_user.expand_message_actions)
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
//power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT); //power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
power_user.chat_width = Number(localStorage.getItem(storage_keys.chat_width) ?? 50); power_user.chat_width = Number(localStorage.getItem(storage_keys.chat_width) ?? 50);
@ -896,7 +922,6 @@ function loadPowerUserSettings(settings, data) {
$("#main-text-color-picker").attr('color', power_user.main_text_color); $("#main-text-color-picker").attr('color', power_user.main_text_color);
$("#italics-color-picker").attr('color', power_user.italics_text_color); $("#italics-color-picker").attr('color', power_user.italics_text_color);
$("#quote-color-picker").attr('color', power_user.quote_text_color); $("#quote-color-picker").attr('color', power_user.quote_text_color);
//$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
$("#blur-tint-color-picker").attr('color', power_user.blur_tint_color); $("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
$("#chat-tint-color-picker").attr('color', power_user.chat_tint_color); $("#chat-tint-color-picker").attr('color', power_user.chat_tint_color);
$("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color); $("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color);
@ -1234,7 +1259,6 @@ async function saveTheme() {
main_text_color: power_user.main_text_color, main_text_color: power_user.main_text_color,
italics_text_color: power_user.italics_text_color, italics_text_color: power_user.italics_text_color,
quote_text_color: power_user.quote_text_color, quote_text_color: power_user.quote_text_color,
//fastui_bg_color: power_user.fastui_bg_color,
blur_tint_color: power_user.blur_tint_color, blur_tint_color: power_user.blur_tint_color,
chat_tint_color: power_user.chat_tint_color, chat_tint_color: power_user.chat_tint_color,
user_mes_blur_tint_color: power_user.user_mes_blur_tint_color, user_mes_blur_tint_color: power_user.user_mes_blur_tint_color,
@ -1252,9 +1276,14 @@ async function saveTheme() {
timer_enabled: power_user.timer_enabled, timer_enabled: power_user.timer_enabled,
timestamps_enabled: power_user.timestamps_enabled, timestamps_enabled: power_user.timestamps_enabled,
timestamp_model_icon: power_user.timestamp_model_icon, timestamp_model_icon: power_user.timestamp_model_icon,
mesIDDisplay_enabled: power_user.mesIDDisplay_enabled, mesIDDisplay_enabled: power_user.mesIDDisplay_enabled,
message_token_count_enabled: power_user.message_token_count_enabled,
expand_message_actions: power_user.expand_message_actions,
hotswap_enabled: power_user.hotswap_enabled, hotswap_enabled: power_user.hotswap_enabled,
}; };
const response = await fetch('/savetheme', { const response = await fetch('/savetheme', {
@ -1853,40 +1882,45 @@ $(document).ready(() => {
power_user.fast_ui_mode = $(this).prop("checked"); power_user.fast_ui_mode = $(this).prop("checked");
localStorage.setItem(storage_keys.fast_ui_mode, power_user.fast_ui_mode); localStorage.setItem(storage_keys.fast_ui_mode, power_user.fast_ui_mode);
switchUiMode(); switchUiMode();
saveSettingsDebounced();
}); });
$("#waifuMode").on('change', () => { $("#waifuMode").on('change', () => {
power_user.waifuMode = $('#waifuMode').prop("checked"); power_user.waifuMode = $('#waifuMode').prop("checked");
saveSettingsDebounced();
switchWaifuMode(); switchWaifuMode();
saveSettingsDebounced();
}); });
$("#movingUImode").change(function () { $("#movingUImode").change(function () {
power_user.movingUI = $(this).prop("checked"); power_user.movingUI = $(this).prop("checked");
localStorage.setItem(storage_keys.movingUI, power_user.movingUI); localStorage.setItem(storage_keys.movingUI, power_user.movingUI);
switchMovingUI(); switchMovingUI();
saveSettingsDebounced();
}); });
$("#noShadowsmode").change(function () { $("#noShadowsmode").change(function () {
power_user.noShadows = $(this).prop("checked"); power_user.noShadows = $(this).prop("checked");
localStorage.setItem(storage_keys.noShadows, power_user.noShadows); localStorage.setItem(storage_keys.noShadows, power_user.noShadows);
noShadows(); noShadows();
saveSettingsDebounced();
}); });
$("#movingUIreset").on('click', resetMovablePanels); $("#movingUIreset").on('click', resetMovablePanels);
$(`input[name="avatar_style"]`).on('input', function (e) { $("#avatar_style").on('change', function () {
power_user.avatar_style = Number(e.target.value); const value = $(this).find(':selected').val();
power_user.avatar_style = Number(value);
localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style); localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style);
applyAvatarStyle(); applyAvatarStyle();
saveSettingsDebounced();
}); });
$("#chat_display").on('change', function () { $("#chat_display").on('change', function () {
console.debug('###CHAT DISPLAY SELECTOR CHANGE###')
const value = $(this).find(':selected').val(); const value = $(this).find(':selected').val();
power_user.chat_display = Number(value); power_user.chat_display = Number(value);
saveSettingsDebounced(); localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
applyChatDisplay(); applyChatDisplay();
saveSettingsDebounced();
}); });
@ -1902,6 +1936,7 @@ $(document).ready(() => {
$("#font_scale_counter").text(power_user.font_scale); $("#font_scale_counter").text(power_user.font_scale);
localStorage.setItem(storage_keys.font_scale, power_user.font_scale); localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
await applyFontScale(); await applyFontScale();
saveSettingsDebounced();
}); });
$(`input[name="blur_strength"]`).on('input', async function (e) { $(`input[name="blur_strength"]`).on('input', async function (e) {
@ -1909,6 +1944,7 @@ $(document).ready(() => {
$("#blur_strength_counter").text(power_user.blur_strength); $("#blur_strength_counter").text(power_user.blur_strength);
localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength); localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
await applyBlurStrength(); await applyBlurStrength();
saveSettingsDebounced();
}); });
$(`input[name="shadow_width"]`).on('input', async function (e) { $(`input[name="shadow_width"]`).on('input', async function (e) {
@ -1916,6 +1952,7 @@ $(document).ready(() => {
$("#shadow_width_counter").text(power_user.shadow_width); $("#shadow_width_counter").text(power_user.shadow_width);
localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width); localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
await applyShadowWidth(); await applyShadowWidth();
saveSettingsDebounced();
}); });
$("#main-text-color-picker").on('change', (evt) => { $("#main-text-color-picker").on('change', (evt) => {
@ -2132,49 +2169,49 @@ $(document).ready(() => {
$("#messageTimerEnabled").on("input", function () { $("#messageTimerEnabled").on("input", function () {
const value = !!$(this).prop('checked'); const value = !!$(this).prop('checked');
power_user.timer_enabled = value; power_user.timer_enabled = value;
localStorage.setItem(storage_keys.timer_enabled, String(power_user.timer_enabled)); localStorage.setItem(storage_keys.timer_enabled, Boolean(power_user.timer_enabled));
switchTimer(); switchTimer();
}); });
$("#messageTimestampsEnabled").on("input", function () { $("#messageTimestampsEnabled").on("input", function () {
const value = !!$(this).prop('checked'); const value = !!$(this).prop('checked');
power_user.timestamps_enabled = value; power_user.timestamps_enabled = value;
localStorage.setItem(storage_keys.timestamps_enabled, String(power_user.timestamps_enabled)); localStorage.setItem(storage_keys.timestamps_enabled, Boolean(power_user.timestamps_enabled));
switchTimestamps(); switchTimestamps();
}); });
$("#messageModelIconEnabled").on("input", function () { $("#messageModelIconEnabled").on("input", function () {
const value = !!$(this).prop('checked'); const value = !!$(this).prop('checked');
power_user.timestamp_model_icon = value; power_user.timestamp_model_icon = value;
localStorage.setItem(storage_keys.timestamp_model_icon, String(power_user.timestamp_model_icon)); localStorage.setItem(storage_keys.timestamp_model_icon, Boolean(power_user.timestamp_model_icon));
switchIcons(); switchIcons();
}); });
$("#messageTokensEnabled").on("input", function () { $("#messageTokensEnabled").on("input", function () {
const value = !!$(this).prop('checked'); const value = !!$(this).prop('checked');
power_user.message_token_count_enabled = value; power_user.message_token_count_enabled = value;
localStorage.setItem(storage_keys.message_token_count_enabled, String(power_user.message_token_count_enabled)); localStorage.setItem(storage_keys.message_token_count_enabled, Boolean(power_user.message_token_count_enabled));
switchTokenCount(); switchTokenCount();
}); });
$("#expandMessageActions").on("input", function () { $("#expandMessageActions").on("input", function () {
const value = !!$(this).prop('checked'); const value = !!$(this).prop('checked');
power_user.expand_message_actions = value; power_user.expand_message_actions = value;
localStorage.setItem(storage_keys.expand_message_actions, String(power_user.expand_message_actions)); localStorage.setItem(storage_keys.expand_message_actions, Boolean(power_user.expand_message_actions));
switchMessageActions(); switchMessageActions();
}); });
$("#mesIDDisplayEnabled").on("input", function () { $("#mesIDDisplayEnabled").on("input", function () {
const value = !!$(this).prop('checked'); const value = !!$(this).prop('checked');
power_user.mesIDDisplay_enabled = value; power_user.mesIDDisplay_enabled = value;
localStorage.setItem(storage_keys.mesIDDisplay_enabled, String(power_user.mesIDDisplay_enabled)); localStorage.setItem(storage_keys.mesIDDisplay_enabled, Boolean(power_user.mesIDDisplay_enabled));
switchMesIDDisplay(); switchMesIDDisplay();
}); });
$("#hotswapEnabled").on("input", function () { $("#hotswapEnabled").on("input", function () {
const value = !!$(this).prop('checked'); const value = !!$(this).prop('checked');
power_user.hotswap_enabled = value; power_user.hotswap_enabled = value;
localStorage.setItem(storage_keys.hotswap_enabled, String(power_user.hotswap_enabled)); localStorage.setItem(storage_keys.hotswap_enabled, Boolean(power_user.hotswap_enabled));
switchHotswap(); switchHotswap();
}); });

9
public/style.css
View File

@ -2206,7 +2206,8 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
.range-block-counter { .range-block-counter {
margin-left: 5px; margin-left: 5px;
margin-right: 15px; /*previously needed to avoid firefox scrollbar overlap, no longer necessary?*/
/* margin-right: 15px; */
font-size: calc(var(--mainFontSize) * 0.95); font-size: calc(var(--mainFontSize) * 0.95);
color: var(--SmartThemeBodyColor); color: var(--SmartThemeBodyColor);
flex: 1; flex: 1;
@ -2251,6 +2252,7 @@ input[type="range"] {
background-size: 70% 100%; background-size: 70% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
box-shadow: inset 0 0 2px black; box-shadow: inset 0 0 2px black;
cursor: grab;
} }
input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
@ -3031,11 +3033,12 @@ a {
} }
#extensions_settings .inline-drawer-toggle.inline-drawer-header, #extensions_settings .inline-drawer-toggle.inline-drawer-header,
#extensions_settings2 .inline-drawer-toggle.inline-drawer-header { #extensions_settings2 .inline-drawer-toggle.inline-drawer-header,
#user-settings-block h4 {
background-image: linear-gradient(348deg, var(--white30a)2%, var(--grey30a)10%, var(--black70a)95%, var(--SmartThemeQuoteColor)100%); background-image: linear-gradient(348deg, var(--white30a)2%, var(--grey30a)10%, var(--black70a)95%, var(--SmartThemeQuoteColor)100%);
margin-bottom: 5px; margin-bottom: 5px;
border-radius: 10px; border-radius: 10px;
padding: 5px; padding: 2px 5px;
border: 1px solid var(--SmartThemeBorderColor); border: 1px solid var(--SmartThemeBorderColor);
transition: all 250ms; transition: all 250ms;
} }