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

Textshadow color and width are now customizable.

Browse Source
This commit is contained in:
RossAscends
2023-04-27 02:02:25 +09:00
parent c354f8ee30
commit df7f6c0168
6 changed files with 83 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/index.html
View File

@ -1183,6 +1183,17 @@
<span id="blur_strength_counter">select</span>
</div>
</div>
<div id="shadow-width-block" class="range-block">
<div class="range-block-title">
Text Shadow Width
</div>
<div class="range-block-range">
<input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
</div>
<div class="range-block-counter">
<span id="shadow_width_counter">select</span>
</div>
</div>
</div>
<div>
@ -1251,6 +1262,10 @@
<toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
Quote Text
</div>
<div class="flex-container">
<toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
Shadow Color
</div>
<div class="flex-container">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
FastUI BG

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

@ -72,12 +72,14 @@ let power_user = {
sort_rule: null,
font_scale: 1,
blur_strength: 10,
shadow_width: 2,
main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`,
fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`,
blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
shadow_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeShadowColor').trim()}`,
waifuMode: false,
movingUI: false,
@ -99,6 +101,9 @@ const storage_keys = {
fastui_bg_color: "TavernAI_fastui_bg_color",
blur_tint_color: "TavernAI_blur_tint_color",
blur_strength: "TavernAI_blur_strength",
shadow_color: "TavernAI_shadow_color",
shadow_width: "TavernAI_shadow_width",
waifuMode: "TavernAI_waifuMode",
movingUI: "TavernAI_movingUI",
@ -183,6 +188,9 @@ async function applyThemeColor(type) {
if (type === 'blurTint') {
document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color);
}
if (type === 'shadow') {
document.documentElement.style.setProperty('--SmartThemeShadowColor', power_user.shadow_color);
}
}
async function applyBlurStrength() {
@ -192,6 +200,13 @@ async function applyBlurStrength() {
}
async function applyShadowWidth() {
power_user.shadow_width = Number(localStorage.getItem(storage_keys.shadow_width) ?? 2);
document.documentElement.style.setProperty('--shadowWidth', power_user.shadow_width);
$("#blur_strength_counter").text(power_user.shadow_width);
}
async function applyFontScale() {
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
@ -212,12 +227,20 @@ async function applyTheme(name) {
{ key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' },
{ key: 'fastui_bg_color', selector: '#fastui-bg-color-picker', type: 'fastUIBG' },
{ key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' },
{ key: 'shadow_color', selector: '#shadow-color-picker', type: 'shadow' },
{
key: 'blur_strength',
action: async () => {
localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
await applyBlurStrength();
}
},
{
key: 'shadow_width',
action: async () => {
localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
await applyShadowWidth();
}
}
];
@ -289,17 +312,22 @@ function loadPowerUserSettings(settings, data) {
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
$(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
$(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
$("#font_scale").val(power_user.font_scale);
$("#font_scale_counter").text(power_user.font_scale);
$("#blur_strength").val(power_user.blur_strength);
$("#blur_strength_counter").text(power_user.blur_strength);
$("#shadow_width").val(power_user.shadow_width);
$("#shadow_width_counter").text(power_user.shadow_width);
$("#main-text-color-picker").attr('color', power_user.main_text_color);
$("#italics-color-picker").attr('color', power_user.italics_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);
$("#shadow-color-picker").attr('color', power_user.shadow_color);
for (const theme of themes) {
const option = document.createElement('option');
@ -474,6 +502,13 @@ $(document).ready(() => {
await applyBlurStrength();
});
$(`input[name="shadow_width"]`).on('input', async function (e) {
power_user.shadow_width = Number(e.target.value);
$("#shadow_width_counter").text(power_user.shadow_width);
localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
await applyShadowWidth();
});
$("#main-text-color-picker").on('change', (evt) => {
power_user.main_text_color = evt.detail.rgba;
applyThemeColor('main');
@ -504,6 +539,12 @@ $(document).ready(() => {
saveSettingsDebounced();
});
$("#shadow-color-picker").on('change', (evt) => {
power_user.shadow_color = evt.detail.rgba;
applyThemeColor('shadow');
saveSettingsDebounced();
});
$("#themes").on('change', function () {
const themeSelected = $(this).find(':selected').val();
power_user.theme = themeSelected;
@ -526,6 +567,8 @@ $(document).ready(() => {
quote_text_color: power_user.quote_text_color,
fastui_bg_color: power_user.fastui_bg_color,
blur_tint_color: power_user.blur_tint_color,
shadow_color: power_user.shadow_color,
shadow_width: power_user.shadow_width,
};
const response = await fetch('/savetheme', {

20
public/style.css
View File

@ -43,6 +43,8 @@
--SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9);
--SmartThemeBlurTintColor: rgba(0, 0, 0, 0.5);
--SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
--SmartThemeShadowColor: rgba(0, 0, 0, 0.5);
--sheldWidth: 800px;
/*base variable calculated in rems*/
@ -51,6 +53,10 @@
/* base variable for blur strength slider calculations */
--blurStrength: 10;
/* base variable for shadow width slider calculations */
--shadowWidth: 2;
color-scheme: only light;
@ -63,7 +69,7 @@
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 0px 0px 3px black;
text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
}
html {
@ -276,7 +282,7 @@ code {
backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--SmartThemeBlurTintColor);
-webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
text-shadow: #000 0 0 3px;
text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
scrollbar-width: thin;
/* transition: all 1s ease-in-out; */
flex-direction: column;
@ -390,7 +396,7 @@ code {
border: 1px solid var(--white30a);
border-radius: 15px;
box-shadow: 0 0 5px black;
text-shadow: 0 0 3px black;
text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
/* min-width: 200px; */
z-index: 2000;
@ -654,7 +660,7 @@ select {
padding: 6px;
font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
margin: 0;
text-shadow: #000 0 0 3px;
text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
flex: 1;
}
@ -1844,7 +1850,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
width: max-content;
margin-left: 5px;
font-size: calc(var(--mainFontSize) - 0.2rem);
color: var(--white50a);
color: var(--SmartThemeBodyColor);
}
.range-block-range {
@ -2539,7 +2545,7 @@ h5 {
bottom: 10px;
margin: 10px;
opacity: 0.85;
text-shadow: 2px 2px 2px var(--black60a);
text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
}
.missing-avatar {
@ -2820,7 +2826,7 @@ a {
border: 1px solid var(--white30a);
border-radius: 15px;
box-shadow: 0 0 5px black;
text-shadow: 0 0 3px black;
text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
}
.list-group-item:hover {

4
public/themes/Aqua Blue.json
View File

@ -4,5 +4,7 @@
"main_text_color": "rgba(160, 190, 190, 1)",
"italics_text_color": "rgba(170, 200, 200, 1)",
"fastui_bg_color": "rgba(7, 54, 66, 0.9)",
"blur_tint_color": "rgba(0, 43, 54, 0.8)"
"blur_tint_color": "rgba(0, 43, 54, 0.8)",
"shadow_color": "rgba(0, 0, 0, 0.5)",
"shadow_width": 2
}

4
public/themes/Default (Dark).json
View File

@ -4,5 +4,7 @@
"main_text_color": "rgb(220, 220, 210)",
"italics_text_color": "rgb(175, 175, 175)",
"fastui_bg_color": "rgba(0, 0, 0, 0.9)",
"blur_tint_color": "rgba(0, 0, 0, 0.5)"
"blur_tint_color": "rgba(0, 0, 0, 0.5)",
"shadow_color": "rgba(0, 0, 0, 0.5)",
"shadow_width": 2
}

4
public/themes/Megumin Red.json
View File

@ -4,5 +4,7 @@
"main_text_color": "rgba(230, 230, 230, 1)",
"italics_text_color": "rgba(200, 200, 200, 1)",
"fastui_bg_color": "rgba(70, 5, 5, 0.9)",
"blur_tint_color": "rgba(50, 10, 10, 0.75)"
"blur_tint_color": "rgba(50, 10, 10, 0.75)",
"shadow_color": "rgba(0, 0, 0, 0.5)",
"shadow_width": 2
}