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

blur strength slider added

Browse Source
This commit is contained in:
RossAscends
2023-04-12 18:05:18 +09:00
parent 14aad34d11
commit 00dc7284cc
3 changed files with 70 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -1186,7 +1186,7 @@
Blur Strength
</div>
<div class="range-block-range">
<input type="range" id="blur_strength" name="blur_strength" min="0.8" max="1.2" step="0.05">
<input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
</div>
<div class="range-block-counter">
<span id="blur_strength_counter">WIP</span>

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

@ -44,6 +44,7 @@ let power_user = {
sort_field: 'name',
sort_order: 'asc',
font_scale: 1,
blur_strength: 10,
main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
@ -71,6 +72,7 @@ const storage_keys = {
italics_text_color: "TavernAI_italics_text_color",
fastui_bg_color: "TavernAI_fastui_bg_color",
blur_tint_color: "TavernAI_blur_tint_color",
blur_strength: "TavernAI_blur_strength",
};
const chat = document.getElementById('chat');
@ -162,6 +164,23 @@ async function applyThemeColor(type) {
chat.style.transition = chatTransition;
}
async function applyBlurStrength() {
power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 1);
// temporarily unset transition from chat to not make the browser calculate the animation
chat.style.transition = 'unset';
// now apply the blur strength to the document
document.documentElement.style.setProperty('--blurStrength', power_user.blur_strength);
$("#blur_strength_counter").text(power_user.blur_strength);
// a small delay to let the browser do the layout redraw
await delay(1);
// set transition back to chat
chat.style.transition = chatTransition;
}
async function applyFontScale() {
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
@ -183,6 +202,7 @@ switchUiMode();
applyChatDisplay();
applySheldWidth();
applyFontScale();
applyBlurStrength();
applyThemeColor();
// TODO delete in next release
@ -214,6 +234,7 @@ function loadPowerUserSettings(settings) {
power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 10);
$("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
$("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@ -233,11 +254,15 @@ function loadPowerUserSettings(settings) {
$("#font_scale").val(power_user.font_scale);
$("#font_scale_counter").html(power_user.font_scale);
$("#blur_strength").val(power_user.blur_strength);
$("#blur_strength_counter").html(power_user.blur_strength);
$("#main-text-color-picker").attr('color', power_user.main_text_color);
$("#italics-color-picker").attr('color', power_user.italics_text_color);
$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
$("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
$(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
sortCharactersList();
}
@ -339,6 +364,13 @@ $(document).ready(() => {
applyFontScale();
});
$(`input[name="blur_strength"]`).on('input', function (e) {
power_user.blur_strength = Number(e.target.value);
$("#blur_strength_counter").text(power_user.blur_strength);
localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
applyBlurStrength();
});
$("#main-text-color-picker").on('change', (evt) => {
power_user.main_text_color = evt.detail.rgba;
applyThemeColor('main');

66
public/style.css
View File

@ -41,12 +41,18 @@
--SmartThemeEmColor: rgb(175, 175, 175);
--SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9);
--SmartThemeBlurTintColor: rgba(0, 0, 0, 0.5);
--SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
--sheldWidth: 800px;
/*base variable calculated in rems*/
--fontScale: 1;
--mainFontSize: calc(var(--fontScale) * 1rem);
/* base variable for blur strength slider calculations */
--blurStrength: 10;
/*styles for the color picker*/
--tool-cool-color-picker-btn-bg: transparent;
--tool-cool-color-picker-btn-border-color: transparent;
@ -182,10 +188,10 @@ code {
color: var(--black30a);
border-bottom: 1px solid var(--black70a);
box-shadow: 0 2px 20px 0 var(--black70a);
backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--SmartThemeBlurTintColor);
/* border-radius: 0 0 20px 20px; */
-webkit-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
z-index: 3000;
}
@ -214,9 +220,9 @@ code {
border-bottom: 1px solid var(--grey30a);
border-left: 1px solid var(--grey30a);
border-right: 1px solid var(--grey30a);
backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--SmartThemeBlurTintColor);
-webkit-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
text-shadow: #000 0 0 3px;
scrollbar-width: thin;
transition: all 1s ease-in-out;
@ -241,7 +247,7 @@ code {
border-radius: 0 0 20px 20px;
background-color: var(--crimson70a);
backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
}
#send_but_sheld {
@ -1145,9 +1151,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
margin-top: 36svh;
box-shadow: 0 0 2px var(--black50a);
padding: 4px;
backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
border-radius: 10px;
}
@ -1254,8 +1260,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
}
#shadow_popup {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
display: none;
opacity: 0.0;
position: absolute;
@ -1267,8 +1273,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
#colab_shadow_popup {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
display: none;
opacity: 1.0;
position: absolute;
@ -1377,8 +1383,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
#world_popup {
display: none;
background-color: var(--black30a);
backdrop-filter: blur(50px);
background-color: var(--SmartThemeBlurTintColor);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
max-width: var(--sheldWidth);
height: calc(100% - 40px);
position: absolute;
@ -1803,9 +1809,9 @@ input[type="range"]::-webkit-slider-thumb {
margin-top: 15vh;
box-shadow: 5px 5px var(--black30a);
padding: 4px;
backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
border-radius: 10px;
padding-top: 30px;
}
@ -1913,9 +1919,9 @@ input[type="range"]::-webkit-slider-thumb {
}
#shadow_character_popup {
backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
display: none;
opacity: 1.0;
position: absolute;
@ -1927,8 +1933,8 @@ input[type="range"]::-webkit-slider-thumb {
#character_popup {
display: none;
background-color: var(--black30a);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
grid-template-rows: 50px 1fr 1fr 1fr 5fr;
grid-gap: 10px;
max-width: var(--sheldWidth);
@ -2007,9 +2013,9 @@ h5 {
height: 40px;
margin-top: 15px;
margin-left: 36px;
backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
width: 110px;
text-align: center;
}
@ -2022,8 +2028,8 @@ h5 {
height: 100svh;
z-index: 3001;
top: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(var(--SmartThemeBlurStrength));
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
}
#select_chat_popup {
@ -2692,9 +2698,9 @@ a {
left: auto;
padding: 0;
margin-bottom: 5px;
backdrop-filter: blur(10px);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
background-color: var(--SmartThemeBlurTintColor);
-webkit-backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
z-index: 3000;
border: 0;
border-left: 1px solid var(--grey30a);
@ -2895,7 +2901,8 @@ label[for="extensions_autoconnect"] {
.drawer-icon.openIcon {
/* background-image: url('img/circle-chevron-up-solid.svg'); */
filter: invert(1) brightness(200%);
filter: invert(1) brightness(200%) drop-shadow(0px 0px 2px black);
;
transition: all 0.275s;
}
@ -2905,7 +2912,8 @@ label[for="extensions_autoconnect"] {
.drawer-icon.closedIcon {
/* background-image: url('img/circle-chevron-down-solid.svg'); */
filter: invert(1);
filter: invert(1) drop-shadow(0px 0px 2px black);
;
opacity: 0.3;
transition: all 0.275s;
}
@ -2965,8 +2973,8 @@ label[for="extensions_autoconnect"] {
width: min-content;
max-width: var(--sheldWidth);
margin: 35px auto 0 auto;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
}
.fillRight,