Merge branch 'dev' of https://github.com/SillyLossy/TavernAI into dev

public/index.html

@@ -1083,6 +1083,10 @@
                         <label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
                             Auto-load Last Chat
                         </label>
+
+                        <label for="waifuMode"><input id="waifuMode" type="checkbox" />
+                            ♡ Waifu Mode ♡
+                        </label>
                     </div>
                 </div>
                 <hr>

public/scripts/extensions/expressions/style.css

@@ -27,6 +27,7 @@ img.expression {
 
 img.expression.default {
     vertical-align: middle;
+    margin-bottom: 50px;
 }
 
 .debug-image {

public/scripts/power-user.js

@@ -50,6 +50,8 @@ let power_user = {
     italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
     fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`,
     blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
+
+    waifuMode: false,
 };
 
 const storage_keys = {
@@ -73,6 +75,8 @@ const storage_keys = {
     fastui_bg_color: "TavernAI_fastui_bg_color",
     blur_tint_color: "TavernAI_blur_tint_color",
     blur_strength: "TavernAI_blur_strength",
+
+    waifuMode: "TavernAI_waifuMode",
 };
 
 const chat = document.getElementById('chat');
@@ -108,6 +112,12 @@ function switchUiMode() {
     $("#send_form").toggleClass("no-blur-sendtextarea", power_user.fast_ui_mode);
 }
 
+function switchWaifuMode() {
+    const waifuMode = localStorage.getItem(storage_keys.waifuMode);
+    power_user.waifuMode = waifuMode === null ? true : waifuMode == "true";
+    $("body").toggleClass("waifuMode", power_user.waifuMode);
+}
+
 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);
@@ -204,6 +214,7 @@ applySheldWidth();
 applyFontScale();
 applyBlurStrength();
 applyThemeColor();
+switchWaifuMode()
 
 // TODO delete in next release
 function loadFromLocalStorage() {
@@ -229,7 +240,9 @@ function loadPowerUserSettings(settings) {
 
     // These are still local storage
     const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
+    const waifuMode = localStorage.getItem(storage_keys.waifuMode);
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
+    power_user.waifuMode = waifuMode === null ? true : waifuMode == "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);
@@ -245,6 +258,7 @@ function loadPowerUserSettings(settings) {
     $("#always-force-name2-checkbox").prop("checked", power_user.always_force_name2);
     $("#custom_chat_separator").val(power_user.custom_chat_separator);
     $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
+    $("#waifuMode").prop("checked", power_user.waifuMode);
     $("#multigen").prop("checked", power_user.multigen);
     $("#play_message_sound").prop("checked", power_user.play_message_sound);
     $("#play_sound_unfocused").prop("checked", power_user.play_sound_unfocused);
@@ -338,6 +352,12 @@ $(document).ready(() => {
         switchUiMode();
     });
 
+    $("#waifuMode").change(function () {
+        power_user.waifuMode = $(this).prop("checked");
+        localStorage.setItem(storage_keys.waifuMode, power_user.waifuMode);
+        switchWaifuMode();
+    });
+
     $(`input[name="avatar_style"]`).on('input', function (e) {
         power_user.avatar_style = Number(e.target.value);
         localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style);

public/style.css

@@ -69,6 +69,10 @@
 
 html {
     scroll-behavior: smooth;
+    /*fix for chrome flickering on blurred divs*/
+    -webkit-transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    -webkit-perspective: 1000;
 }
 
 body {
@@ -181,8 +185,7 @@ code {
     display: inline-block;
     height: 40px;
     position: fixed;
-    color: var(--black30a);
-    border-bottom: 1px solid var(--black70a);
+    border-bottom: 1px solid var(--grey30a);
     box-shadow: 0 2px 20px 0 var(--black70a);
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
@@ -588,7 +591,8 @@ select {
     text-shadow: #000 0 0 3px;
 }
 
-#send_textarea::placeholder {
+#send_textarea::placeholder,
+.text_pole::placeholder {
     color: var(--white70a)
 }
 
@@ -3224,6 +3228,7 @@ toolcool-color-picker {
     #world_popup,
     #send_form {
         border: 1px solid var(--grey30);
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
     }
 
     #chat {
@@ -3255,6 +3260,7 @@ toolcool-color-picker {
         border-bottom: 1px solid var(--grey30);
         border-radius: 0 0 20px 20px;
         top: 40px;
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
     }
 
     #right-nav-panel h4 {
@@ -3365,6 +3371,92 @@ body.no-blur #select_chat_popup {
     background-color: var(--SmartThemeFastUIBGColor) !important;
 }
 
+/* wAIfu mode*/
+
+
+body.waifuMode #top-bar {
+    border-radius: 0 0 20px 20px;
+    /* color: var(--grey30a); */
+    border: 1px solid var(--grey30a);
+}
+
+body.waifuMode #sheld {
+    display: grid;
+    grid-template-rows: 30vh min-content;
+    height: calc(100svh - 42px);
+    overflow-x: hidden;
+    max-width: 800px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 41px;
+    margin: 0 auto;
+    z-index: 2;
+    align-content: end;
+}
+
+body.waifuMode #chat {
+    border-top: 1px solid var(--grey30a);
+    border-radius: 20px 20px 0 0;
+}
+
+body.waifuMode .expression-holder {
+    max-height: 90vh;
+    max-width: unset;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-align: center;
+    filter: drop-shadow(2px 2px 2px #51515199);
+    transition: 500ms;
+    z-index: 1;
+}
+
+body.waifuMode img.expression {
+    height: 90vh;
+    max-width: 100%;
+    max-height: 90vh;
+    vertical-align: bottom;
+}
+
+/*styles for potential variant of WaifuMode sheld 50% waifu, 50% chat*/
+/*
+body.waifuMode2 #sheld {
+    display: grid;
+    grid-template-rows: auto min-content;
+    height: calc(100svh - 42px);
+    overflow-x: hidden;
+    max-width: calc(var(--sheldWidth) /2);
+    position: absolute;
+    right: calc((100vw - var(--sheldWidth))/2);
+    top: 41px;
+    margin: 0 auto;
+    z-index: 2;
+}
+
+body.waifuMode2 .expression-holder {
+    max-height: 90vh;
+    max-width: calc(var(--sheldWidth)/2);
+    position: fixed;
+    left: calc((100vw - var(--sheldWidth))/2);
+    right: auto;
+    bottom: 0;
+    filter: drop-shadow(2px 2px 2px #51515199);
+    transition: 500ms;
+    z-index: 1;
+}
+
+body.waifuMode2 img.expression {
+    max-width: 100%;
+    max-height: 90vh;
+    vertical-align: bottom;
+}
+*/
+
 /*this part only only applies to iOS devices*/
 @supports (-webkit-touch-callout: none) {
     body {
@@ -3403,7 +3495,7 @@ body.no-blur #select_chat_popup {
         max-width: unset;
         min-height: unset;
         max-height: unset;
-
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
         left: 0;
         right: 0;
         top: 0;