From df7f6c01684366dd267f46fe95d9110621180ec0 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Thu, 27 Apr 2023 02:02:25 +0900
Subject: [PATCH 1/7] Textshadow color and width are now customizable.
---
public/index.html | 15 ++++++++++
public/scripts/power-user.js | 49 +++++++++++++++++++++++++++++--
public/style.css | 20 ++++++++-----
public/themes/Aqua Blue.json | 4 ++-
public/themes/Default (Dark).json | 4 ++-
public/themes/Megumin Red.json | 4 ++-
6 files changed, 83 insertions(+), 13 deletions(-)
diff --git a/public/index.html b/public/index.html
index ddf0e88a7..206e6b47b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1183,6 +1183,17 @@
select
+
+
+ Text Shadow Width
+
+
+
+
+
+ select
+
+
@@ -1251,6 +1262,10 @@
Quote Text
+
+
+ Shadow Color
+
FastUI BG
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 156d85e16..314d04c30 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -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');
@@ -318,7 +346,7 @@ function sortCharactersList(selector = '.character_select') {
const compareFunc = (first, second) => {
switch (power_user.sort_rule) {
case 'boolean':
- return Number(first[power_user.sort_field] == "true") - Number(second[power_user.sort_field] == "true");
+ return Number(first[power_user.sort_field] == "true") - Number(second[power_user.sort_field] == "true");
default:
return typeof first[power_user.sort_field] == "string"
? first[power_user.sort_field].localeCompare(second[power_user.sort_field])
@@ -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');
@@ -485,7 +520,7 @@ $(document).ready(() => {
applyThemeColor('italics');
saveSettingsDebounced();
});
-
+
$("#quote-color-picker").on('change', (evt) => {
power_user.quote_text_color = evt.detail.rgba;
applyThemeColor('quote');
@@ -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', {
@@ -595,7 +638,7 @@ $(document).ready(() => {
const value = $(this).find(':selected').val();
power_user.tokenizer = Number(value);
saveSettingsDebounced();
-
+
// Trigger character editor re-tokenize
$("#rm_ch_create_block").trigger('input');
$("#character_popup").trigger('input');
diff --git a/public/style.css b/public/style.css
index b1111687a..2a907d9c1 100644
--- a/public/style.css
+++ b/public/style.css
@@ -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 {
diff --git a/public/themes/Aqua Blue.json b/public/themes/Aqua Blue.json
index 1cd4f5880..ed830e50e 100644
--- a/public/themes/Aqua Blue.json
+++ b/public/themes/Aqua Blue.json
@@ -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
}
\ No newline at end of file
diff --git a/public/themes/Default (Dark).json b/public/themes/Default (Dark).json
index 1997cd35e..bd33e6610 100644
--- a/public/themes/Default (Dark).json
+++ b/public/themes/Default (Dark).json
@@ -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
}
\ No newline at end of file
diff --git a/public/themes/Megumin Red.json b/public/themes/Megumin Red.json
index c403a950b..c5fbbfd91 100644
--- a/public/themes/Megumin Red.json
+++ b/public/themes/Megumin Red.json
@@ -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
}
\ No newline at end of file
From e78a2e8b4e972e01e9de8fe9084e12ba807ec03a Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Thu, 27 Apr 2023 02:27:03 +0900
Subject: [PATCH 2/7] added toggle to turn off shadows completely
---
public/index.html | 5 +++++
public/scripts/power-user.js | 23 +++++++++++++++++++++--
public/style.css | 7 +++++++
3 files changed, 33 insertions(+), 2 deletions(-)
diff --git a/public/index.html b/public/index.html
index 206e6b47b..a1699199c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1238,10 +1238,15 @@
♡ Waifu Mode ♡
+
+
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 314d04c30..2abf23b7c 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -83,6 +83,7 @@ let power_user = {
waifuMode: false,
movingUI: false,
+ noShadows: false,
theme: 'Default (Dark)',
};
@@ -107,6 +108,7 @@ const storage_keys = {
waifuMode: "TavernAI_waifuMode",
movingUI: "TavernAI_movingUI",
+ noShadows: "TavernAI_noShadows",
};
let browser_has_focus = true;
@@ -151,6 +153,13 @@ function switchMovingUI() {
scrollChatToBottom();
}
+function noShadows() {
+ const noShadows = localStorage.getItem(storage_keys.noShadows);
+ power_user.noShadows = noShadows === null ? false : noShadows == "true";
+ $("body").toggleClass("noShadows", power_user.noShadows);
+ scrollChatToBottom();
+}
+
function applyAvatarStyle() {
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);
@@ -203,11 +212,10 @@ 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);
+ $("#shadow_width_counter").text(power_user.shadow_width);
}
-
async function applyFontScale() {
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
document.documentElement.style.setProperty('--fontScale', power_user.font_scale);
@@ -262,9 +270,11 @@ applyThemeColor();
applySheldWidth();
applyAvatarStyle();
applyBlurStrength();
+applyShadowWidth();
applyChatDisplay();
switchWaifuMode()
switchMovingUI();
+noShadows();
function loadPowerUserSettings(settings, data) {
// Load from settings.json
@@ -280,9 +290,11 @@ function loadPowerUserSettings(settings, data) {
const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
const waifuMode = localStorage.getItem(storage_keys.waifuMode);
const movingUI = localStorage.getItem(storage_keys.movingUI);
+ const noShadows = localStorage.getItem(storage_keys.noShadows);
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
power_user.waifuMode = waifuMode === null ? false : waifuMode == "true";
power_user.movingUI = movingUI === null ? false : movingUI == "true";
+ power_user.noShadows = noShadows === null ? false : noShadows == "true";
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.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
@@ -303,6 +315,7 @@ function loadPowerUserSettings(settings, data) {
$("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
$("#waifuMode").prop("checked", power_user.waifuMode);
$("#movingUImode").prop("checked", power_user.movingUI);
+ $("#noShadowsmode").prop("checked", power_user.noShadows);
$("#multigen").prop("checked", power_user.multigen);
$("#multigen_first_chunk").val(power_user.multigen_first_chunk);
$("#multigen_next_chunks").val(power_user.multigen_next_chunks);
@@ -442,6 +455,12 @@ $(document).ready(() => {
switchMovingUI();
});
+ $("#noShadowsmode").change(function () {
+ power_user.noShadows = $(this).prop("checked");
+ localStorage.setItem(storage_keys.noShadows, power_user.noShadows);
+ noShadows();
+ });
+
$("#movingUIreset").on('click', function () {
document.getElementById("sheld").style.top = '';
diff --git a/public/style.css b/public/style.css
index 2a907d9c1..821cc0b10 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3425,6 +3425,8 @@ body.waifuMode .expression-holder {
z-index: 2;
}
+/* movingUI*/
+
body.movingUI .drag-grabber {
display: inline;
}
@@ -3435,6 +3437,11 @@ body.movingUI #expression-holder {
resize: both;
}
+/*No Text Shadows Mode*/
+body.noShadows * {
+ text-shadow: none !important;
+}
+
/* ---------- @media queries must always go at the bottom ------------*/
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
From 56cfc76ab2db8ffd22e2e8bbe3294d6c30604a6b Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Thu, 27 Apr 2023 03:34:54 +0900
Subject: [PATCH 3/7] nicer colors for disconnected API icon
---
public/style.css | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/public/style.css b/public/style.css
index 821cc0b10..6c055308a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3083,8 +3083,9 @@ label[for="extensions_autoconnect"] {
}
.redOverlayGlow {
- color: #ad0000;
+ color: rgba(100, 0, 0, 0.5);
opacity: 0.8 !important;
+ text-shadow: none !important;
filter: drop-shadow(0px 0px 2px red) !important;
}
From 0ea1d037e671e9e5f7b41e4db501877bb5bc1550 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Thu, 27 Apr 2023 04:49:43 +0900
Subject: [PATCH 4/7] reword and reorder text shadows toggle
---
public/index.html | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/public/index.html b/public/index.html
index a1699199c..c7bf45094 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1234,14 +1234,15 @@
No Blur Effect
+
-
+
-
+
API url
Example: http://127.0.0.1:5000/api
@@ -846,6 +839,14 @@