rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

- fixed options menu blur

Browse Source 
- added list-group blur and styling
- stronger blur on large popups
- fullscreen shadows darker
This commit is contained in:
RossAscends
2023-04-16 11:36:49 +09:00
parent 62929301fa
commit 1932d17666
4 changed files with 114 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
public/index.html
View File

@@ -967,51 +967,51 @@
<a href="/notes/advanced_formatting" class="notes-link" target="_blank"> <a href="/notes/advanced_formatting" class="notes-link" target="_blank">
<span class="note-link-span">?</span> <span class="note-link-span">?</span>
</a> </a>
</h3> </h3>
<div class="flex-container"> <div class="flex-container">
<div name="PygOverrides"> <div name="PygOverrides">
<h4>AutoFormat Overrides</h4> <h4>AutoFormat Overrides</h4>
<label class="checkbox_label" for="disable-description-formatting-checkbox"> <label class="checkbox_label" for="disable-description-formatting-checkbox">
<input id="disable-description-formatting-checkbox" type="checkbox" /> <input id="disable-description-formatting-checkbox" type="checkbox" />
Disable description formatting Disable description formatting
</label> </label>
<label class="checkbox_label" for="disable-scenario-formatting-checkbox"> <label class="checkbox_label" for="disable-scenario-formatting-checkbox">
<input id="disable-scenario-formatting-checkbox" type="checkbox" /> <input id="disable-scenario-formatting-checkbox" type="checkbox" />
Disable scenario formatting Disable scenario formatting
</label> </label>
<label class="checkbox_label" for="disable-personality-formatting-checkbox"> <label class="checkbox_label" for="disable-personality-formatting-checkbox">
<input id="disable-personality-formatting-checkbox" type="checkbox" /> <input id="disable-personality-formatting-checkbox" type="checkbox" />
Disable personality formatting Disable personality formatting
</label> </label>
<div>
<h4>
Custom Chat Separator
</h4>
<div> <div>
<h4> <input id="custom_chat_separator" class="text_pole" type="text" placeholder="&lt;START&gt;" />
Custom Chat Separator
</h4>
<div>
<input id="custom_chat_separator" class="text_pole" type="text" placeholder="&lt;START&gt;" />
</div>
</div>
<div id="anchors-block">
<h4>
Anchors Order
<a href="/notes/9" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<select id="anchor_order">
<option value="0">Character then Style</option>
<option value="1">Style then Character</option>
</select>
<div id="anchor_checkbox">
<label for="character_anchor"><input id="character_anchor" type="checkbox" />
Character Anchor
</label>
<label for="style_anchor"><input id="style_anchor" type="checkbox" />
Style Anchor
</label>
</div>
</div> </div>
</div> </div>
<div id="anchors-block">
<h4>
Anchors Order
<a href="/notes/9" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<select id="anchor_order">
<option value="0">Character then Style</option>
<option value="1">Style then Character</option>
</select>
<div id="anchor_checkbox">
<label for="character_anchor"><input id="character_anchor" type="checkbox" />
Character Anchor
</label>
<label for="style_anchor"><input id="style_anchor" type="checkbox" />
Style Anchor
</label>
</div>
</div>
</div>
<div name="ContextFormatting"> <div name="ContextFormatting">
<h4>Context Formatting</h4> <h4>Context Formatting</h4>
<label class="checkbox_label" for="always-force-name2-checkbox"> <label class="checkbox_label" for="always-force-name2-checkbox">
@@ -1035,7 +1035,7 @@
</div> </div>
<div> <div>
<h4> <h4>
Multigen Multigen
<a href="/notes/multigen" class="notes-link" target="_blank"> <a href="/notes/multigen" class="notes-link" target="_blank">
<span class="note-link-span">?</span> <span class="note-link-span">?</span>
</a> </a>
@@ -1814,41 +1814,7 @@
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div> <div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div> </div>
<form id="send_form" class="no-connection"> <form id="send_form" class="no-connection">
<div id="options_button" class="fa-solid fa-bars"> <div id="options_button" class="fa-solid fa-bars"></div>
<div id="options" class="font-family-reset">
<div class="options-content">
<a id="option_back_to_main">
<div class="fa-lg fa-solid fa-left-long"></div>
<span>Back to parent chat</span>
</a>
<a id="option_new_bookmark">
<div class="fa-lg fa-solid fa-bookmark"></div>
<span>Save bookmark</span>
</a>
<a id="option_start_new_chat">
<div class="fa-lg fa-solid fa-comment-dots"></div>
<span>Start new chat</span>
</a>
<a id="option_select_chat">
<div class="fa-lg fa-solid fa-address-book"></div>
<span>View past chats</span>
</a>
<hr>
<a id="option_delete_mes">
<div class="fa-lg fa-solid fa-trash-can"></div>
<span>Delete messages</span>
</a>
<a id="option_impersonate" title="Ask AI to write your message for you">
<div class="fa-lg fa-solid fa-user-secret"></div>
<span>Impersonate</span>
</a>
<a id="option_regenerate">
<div class="fa-lg fa-solid fa-repeat "></div>
<span>Regenerate</span>
</a>
</div>
</div>
</div>
<textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea> <textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea>
<div id="send_but_sheld"> <div id="send_but_sheld">
<div id="loading_mes"> <div id="loading_mes">
@@ -1859,6 +1825,40 @@
</form> </form>
</div> </div>
</div> </div>
<div id="options" class="font-family-reset">
<div class="options-content">
<a id="option_back_to_main">
<div class="fa-lg fa-solid fa-left-long"></div>
<span>Back to parent chat</span>
</a>
<a id="option_new_bookmark">
<div class="fa-lg fa-solid fa-bookmark"></div>
<span>Save bookmark</span>
</a>
<a id="option_start_new_chat">
<div class="fa-lg fa-solid fa-comment-dots"></div>
<span>Start new chat</span>
</a>
<a id="option_select_chat">
<div class="fa-lg fa-solid fa-address-book"></div>
<span>View past chats</span>
</a>
<hr>
<a id="option_delete_mes">
<div class="fa-lg fa-solid fa-trash-can"></div>
<span>Delete messages</span>
</a>
<a id="option_impersonate" title="Ask AI to write your message for you">
<div class="fa-lg fa-solid fa-user-secret"></div>
<span>Impersonate</span>
</a>
<a id="option_regenerate">
<div class="fa-lg fa-solid fa-repeat "></div>
<span>Regenerate</span>
</a>
</div>
</div>
</body> </body>
</html> </html>

32
public/script.js
View File

@@ -509,7 +509,7 @@ async function getStatus() {
online_status = "no_connection"; online_status = "no_connection";
} }
if ((online_status.toLowerCase().indexOf("pygmalion") != -1 && power_user.pygmalion_formatting == pygmalion_options.AUTO) if ((online_status.toLowerCase().indexOf("pygmalion") != -1 && power_user.pygmalion_formatting == pygmalion_options.AUTO)
|| (online_status !== "no_connection" && power_user.pygmalion_formatting == pygmalion_options.ENABLED)) { || (online_status !== "no_connection" && power_user.pygmalion_formatting == pygmalion_options.ENABLED)) {
is_pygmalion = true; is_pygmalion = true;
online_status += " (Pyg. formatting on)"; online_status += " (Pyg. formatting on)";
} else { } else {
@@ -1192,7 +1192,7 @@ class StreamingProcessor {
messageId = count_view_mes - 1; messageId = count_view_mes - 1;
this.showStopButton(messageId); this.showStopButton(messageId);
} }
hideSwipeButtons(); hideSwipeButtons();
scrollChatToBottom(); scrollChatToBottom();
return messageId; return messageId;
@@ -1722,7 +1722,7 @@ async function Generate(type, automatic_trigger, force_name2) {
for (let j = 0; j < mesSend.length; j++) { for (let j = 0; j < mesSend.length; j++) {
mesSendString += mesSend[j]; mesSendString += mesSend[j];
if (isImpersonate && j === mesSend.length -1 && tokens_already_generated === 0) { if (isImpersonate && j === mesSend.length - 1 && tokens_already_generated === 0) {
const name = is_pygmalion ? 'You' : name1; const name = is_pygmalion ? 'You' : name1;
if (!mesSendString.endsWith('\n')) { if (!mesSendString.endsWith('\n')) {
mesSendString += '\n'; mesSendString += '\n';
@@ -1811,28 +1811,28 @@ async function Generate(type, automatic_trigger, force_name2) {
let this_settings = koboldai_settings[koboldai_setting_names[preset_settings]]; let this_settings = koboldai_settings[koboldai_setting_names[preset_settings]];
if (isMultigenEnabled()) { if (isMultigenEnabled()) {
// if nothing has been generated yet.. // if nothing has been generated yet..
if (tokens_already_generated === 0) { if (tokens_already_generated === 0) {
// if the max gen setting is > 50...( // if the max gen setting is > 50...(
if (parseInt(amount_gen) >= power_user.multigen_first_chunk) { if (parseInt(amount_gen) >= power_user.multigen_first_chunk) {
// then only try to make 50 this cycle.. // then only try to make 50 this cycle..
this_amount_gen = power_user.multigen_first_chunk; this_amount_gen = power_user.multigen_first_chunk;
} }
else { else {
// otherwise, make as much as the max amount request. // otherwise, make as much as the max amount request.
this_amount_gen = parseInt(amount_gen); this_amount_gen = parseInt(amount_gen);
} }
} }
// if we already received some generated text... // if we already received some generated text...
else { else {
// if the remaining tokens to be made is less than next potential cycle count // if the remaining tokens to be made is less than next potential cycle count
if (parseInt(amount_gen) - tokens_already_generated < power_user.multigen_next_chunks) { if (parseInt(amount_gen) - tokens_already_generated < power_user.multigen_next_chunks) {
// subtract already generated amount from the desired max gen amount // subtract already generated amount from the desired max gen amount
this_amount_gen = parseInt(amount_gen) - tokens_already_generated; this_amount_gen = parseInt(amount_gen) - tokens_already_generated;
} }
else { else {
// otherwise make the standard cycle amount (first 50, and 30 after that) // otherwise make the standard cycle amount (first 50, and 30 after that)
this_amount_gen = power_user.multigen_next_chunks; this_amount_gen = power_user.multigen_next_chunks;
} }
} }
} }
@@ -2039,7 +2039,7 @@ async function Generate(type, automatic_trigger, force_name2) {
setTimeout(() => { setTimeout(() => {
let newType = type == "swipe" ? "swipe" : "force_name2"; let newType = type == "swipe" ? "swipe" : "force_name2";
newType = isImpersonate ? type : newType; newType = isImpersonate ? type : newType;
Generate(newType, automatic_trigger = false, force_name2 = true); Generate(newType, automatic_trigger = false, force_name2 = true);
}, generate_loop_counter * 1000); }, generate_loop_counter * 1000);
} }
@@ -4319,7 +4319,7 @@ $(document).ready(function () {
///////////// OPTIMIZED LISTENERS FOR LEFT SIDE OPTIONS POPUP MENU ////////////////////// ///////////// OPTIMIZED LISTENERS FOR LEFT SIDE OPTIONS POPUP MENU //////////////////////
$("#options_button [id]").on("click", function () { $("#options [id]").on("click", function () {
var id = $(this).attr("id"); var id = $(this).attr("id");
if (id == "option_select_chat") { if (id == "option_select_chat") {
@@ -4818,13 +4818,13 @@ $(document).ready(function () {
) { ) {
continue; continue;
} }
var format = ext[1].toLowerCase(); var format = ext[1].toLowerCase();
$("#character_import_file_type").val(format); $("#character_import_file_type").val(format);
var formData = new FormData(); var formData = new FormData();
formData.append('avatar', file); formData.append('avatar', file);
formData.append('file_type', format); formData.append('file_type', format);
jQuery.ajax({ jQuery.ajax({
type: "POST", type: "POST",
url: "/importcharacter", url: "/importcharacter",
@@ -4843,12 +4843,12 @@ $(document).ready(function () {
.children("img") .children("img")
.attr("src", "characters/" + data.file_name + ".png"); .attr("src", "characters/" + data.file_name + ".png");
$("#rm_info_avatar").append($prev_img); $("#rm_info_avatar").append($prev_img);
let oldSelectedChar = null; let oldSelectedChar = null;
if (this_chid != undefined && this_chid != "invalid-safety-id") { if (this_chid != undefined && this_chid != "invalid-safety-id") {
oldSelectedChar = characters[this_chid].name; oldSelectedChar = characters[this_chid].name;
} }
names.push(data.file_name); names.push(data.file_name);
let nameString = DOMPurify.sanitize(names.join(', ')); let nameString = DOMPurify.sanitize(names.join(', '));
await getCharacters(); await getCharacters();

2
public/scripts/extensions/dice/style.css
View File

@@ -12,6 +12,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#roll_dice:hover { #roll_dice:hover {
@@ -20,4 +21,5 @@
#dice_dropdown { #dice_dropdown {
z-index: 100; z-index: 100;
backdrop-filter: blur(--SmartThemeBlurStrength);
} }

27
public/style.css
View File

@@ -335,11 +335,12 @@ code {
.options-content { .options-content {
overflow: hidden; overflow: hidden;
display: block; display: block;
background-color: var(--SmartThemeFastUIBGColor); background-color: var(--SmartThemeBlurTintColor);
border: 1px solid var(--white30a); border: 1px solid var(--white30a);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 0 5px black; box-shadow: 0 0 5px black;
text-shadow: 0 0 3px black; text-shadow: 0 0 3px black;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
/* min-width: 200px; */ /* min-width: 200px; */
z-index: 2000; z-index: 2000;
margin-bottom: 3px; margin-bottom: 3px;
@@ -383,7 +384,7 @@ code {
} }
.options-content a:hover { .options-content a:hover {
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeEmColor);
} }
@@ -1117,8 +1118,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
flex-wrap: wrap; flex-wrap: wrap;
} }
.form_create_bottom_buttons_block .menu_button .form_create_bottom_buttons_block .menu_button {
{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -1289,6 +1289,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
#shadow_popup { #shadow_popup {
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
background-color: var(--black70a);
display: none; display: none;
opacity: 0.0; opacity: 0.0;
position: absolute; position: absolute;
@@ -1302,6 +1303,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
backdrop-filter: blur(var(--SmartThemeBlurStrength)); backdrop-filter: blur(var(--SmartThemeBlurStrength));
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength)); -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--black30a);
display: none; display: none;
opacity: 1.0; opacity: 1.0;
position: absolute; position: absolute;
@@ -1841,6 +1843,8 @@ input[type="range"]::-webkit-slider-thumb {
height: 100svh; height: 100svh;
z-index: 2055; z-index: 2055;
background-color: var(--black70a); background-color: var(--black70a);
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
backdrop-filter: blur(var(--SmartThemeBlurStrength));
} }
.mes_stop { .mes_stop {
@@ -1966,8 +1970,8 @@ input[type="range"]::-webkit-slider-thumb {
#character_popup { #character_popup {
display: none; display: none;
background-color: var(--black30a); background-color: var(--black30a);
backdrop-filter: blur(var(--SmartThemeBlurStrength)); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength)); -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
grid-template-rows: 50px 1fr 1fr 1fr 5fr; grid-template-rows: 50px 1fr 1fr 1fr 5fr;
grid-gap: 10px; grid-gap: 10px;
max-width: var(--sheldWidth); max-width: var(--sheldWidth);
@@ -2058,6 +2062,7 @@ h5 {
height: 100svh; height: 100svh;
z-index: 3001; z-index: 3001;
top: 0; top: 0;
background-color: var(--black70a);
backdrop-filter: blur(var(--SmartThemeBlurStrength)); backdrop-filter: blur(var(--SmartThemeBlurStrength));
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength)); -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
} }
@@ -2690,7 +2695,8 @@ a {
margin-top: 0; margin-top: 0;
margin-bottom: 3px; margin-bottom: 3px;
overflow: hidden; overflow: hidden;
background-color: var(--SmartThemeFastUIBGColor); background-color: var(--SmartThemeBlurTintColor);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
border: 1px solid var(--white30a); border: 1px solid var(--white30a);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 0 5px black; box-shadow: 0 0 5px black;
@@ -2698,7 +2704,7 @@ a {
} }
.list-group-item:hover { .list-group-item:hover {
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeEmColor);
} }
.list-group-item { .list-group-item {
@@ -3381,6 +3387,7 @@ body.no-blur #send_form.no-connection {
body.no-blur #bg1, body.no-blur #bg1,
body.no-blur #bg2 { body.no-blur #bg2 {
filter: unset; filter: unset;
} }
body.no-blur .drawer-content, body.no-blur .drawer-content,
@@ -3393,7 +3400,9 @@ body.no-blur #character_popup,
body.no-blur #world_popup, body.no-blur #world_popup,
body.no-blur #dialogue_popup, body.no-blur #dialogue_popup,
body.no-blur #select_chat_popup, body.no-blur #select_chat_popup,
body.no-blur #send_form { body.no-blur .options-content,
body.no-blur #send_form,
body.no-blur .list-group {
background-color: var(--SmartThemeFastUIBGColor) !important; background-color: var(--SmartThemeFastUIBGColor) !important;
} }