waifuMode backported from korean modder PepperTaco

https://github.com/peppertaco/Tavern/tree/main

public/index.html

@@ -1094,6 +1094,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/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

@@ -3224,6 +3224,7 @@ toolcool-color-picker {
     #world_popup,
     #send_form {
         border: 1px solid var(--grey30);
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
     }
 
     #chat {
@@ -3255,6 +3256,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 +3367,51 @@ body.no-blur #select_chat_popup {
     background-color: var(--SmartThemeFastUIBGColor) !important;
 }
 
+/* wAIfu mode*/
+
+body.waifuMode .expression-holder {
+    max-height: 90vh;
+    max-width: unset;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 100px;
+    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: 70vh;
+    max-width: 100%;
+    max-height: 90vh;
+    vertical-align: bottom;
+}
+
+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;
+    /* bottom: 0; */
+    top: 41px;
+    margin: 0 auto;
+    z-index: 2;
+    align-content: end;
+}
+
+body.waifuMode #chat {
+    flex-direction: column-reverse;
+}
+
 /*this part only only applies to iOS devices*/
 @supports (-webkit-touch-callout: none) {
     body {
@@ -3403,7 +3450,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;