CSS tweaks:

- resized addbg3.png from 1600x1600 to 160x90
- added trans grey border to right nav, to match chat and send_form
- reduced opacity of chat/sendform >> 70% to 50%
- reduced blur on chat/sendform >> 20px to 10px
- added 1px gap between chat and right nav to match chat/sendform
- fixed add_bg button being too tall and skewing top bg row on mobile
- 2 new utility classes no-border and no-shadow
- made drawer heights match chat+sendform height on mobile

/img cleanup:
- removed unused files from /img
- resized large UI-only PNG files to 100px x 100px
- replaced fluffy.png with a custom PNG 'ai4.png'
- total /img footprint is now 615kb  (compared to 3.5MB in main tai 1.3)
-- /default-expressions 509kb
-- everything else 106kb

public/index.html

@@ -71,10 +71,10 @@
             <div class="drawer-content closedDrawer">
                 <div class="flex-container">
                     <div id="bg_menu_content">
-                        <form id="form_bg_download" action="javascript:void(null);" method="post" enctype="multipart/form-data">
+                        <form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             <label class="input-file">
                                 <input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
-                                <span class="bg_example_but_load"><img src='img/addbg3.png'></span>
+                                <div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
                             </label>
                         </form>
                     </div>
@@ -828,7 +828,7 @@
                             </div>
                             <div id="avatar_div" class="avatar_div">
                                 <div id="avatar_div_div" class="avatar">
-                                    <img id="avatar_load_preview" src="img/fluffy.png" alt="avatar">
+                                    <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                 </div>
                                 <label for="add_avatar_button" class="menu_button" title="Click to select a new avatar for this character">
                                     <input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">

public/script.js

@@ -148,7 +148,7 @@ let characters = [];
 let this_chid;
 let active_character;
 let backgrounds = [];
-const default_avatar = "img/fluffy.png";
+const default_avatar = "img/ai4.png";
 const system_avatar = "img/five.png";
 let is_colab = false;
 let is_checked_colab = false;
@@ -1606,7 +1606,7 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs").
 
                             if (selected_group) {
                                 console.log('entering chat update for groups');
-                                let avatarImg = 'img/fluffy.png';
+                                let avatarImg = 'img/ai4.png';
                                 if (characters[this_chid].avatar != 'none') {
                                     avatarImg = `characters/${characters[this_chid].avatar}?${Date.now()}`;
                                 }

public/scripts/RossAscends-mods.js

@@ -191,14 +191,14 @@ function RestoreNavTab() {
 function RA_checkOnlineStatus() {
 	if (online_status == "no_connection") {
 		$("#send_textarea").attr("placeholder", "Not connected to API!"); //Input bar placeholder tells users they are not connected
-		$("#send_form").css("background-color", "rgba(100,0,0,0.7)"); //entire input form area is red when not connected
+		$("#send_form").css("background-color", "rgba(100,0,0,0.5)"); //entire input form area is red when not connected
 		$("#send_but").css("display", "none"); //send button is hidden when not connected;
 		$("#API-status-top").addClass("redOverlayGlow");
 		connection_made = false;
 	} else {
 		if (online_status !== undefined && online_status !== "no_connection") {
 			$("#send_textarea").attr("placeholder", "Type a message..."); //on connect, placeholder tells user to type message
-			$("#send_form").css("background-color", "rgba(0,0,0,0.7)"); //on connect, form BG changes to transprent black
+			$("#send_form").css("background-color", "rgba(0,0,0,0.5)"); //on connect, form BG changes to transprent black
 			$("#API-status-top").removeClass("redOverlayGlow");
 			connection_made = true;
 			retry_delay = 100;

public/style.css

@@ -196,8 +196,8 @@ margin-top:5px;
     border-bottom: 1px solid var(--grey30a);
     border-left: 1px solid var(--grey30a);
     border-right: 1px solid var(--grey30a);
-    backdrop-filter: blur(20px);
-    background-color: var(--black70a);
+    backdrop-filter: blur(10px);
+    background-color: var(--black50a);
     -webkit-backdrop-filter: blur(10px);
     text-shadow: #000 0 0 3px;
     scrollbar-width: thin;
@@ -238,7 +238,7 @@ margin-top:5px;
 
     border-radius: 0 0 20px 20px;
     background-color: var(--crimson70a);
-    backdrop-filter: blur(20px);
+    backdrop-filter: blur(10px);
 }
 
 #send_but_sheld {
@@ -949,28 +949,21 @@ input[type=search]:focus::-webkit-search-cancel-button {
     box-shadow: 0 0 0 2pt black;
 }
 
-#form_bg_download {
-    width: 23%;
-    margin: 5px;
-}
+.no-border {border:none !important;}
+.no-shadow {box-shadow: none !important;}
 
-.bg_example_but_load {
-}
-
-.bg_example_but_load img {
+.add_bg_but {
     cursor: pointer;
-    height: 100px;
-    object-fit: contain;
-    margin: auto auto;
-    border-radius: 10px;
     opacity: 0.1;
+    height: 100%;
+    width: 100%;
 }
 
-#add_bg_button {
-}
 .input-file {
     display: flex;
     justify-content: center;
+    align-items: center;
+    height: 100%;
 }
 
 
@@ -2514,7 +2507,7 @@ a {
 /* ############################################################# */
 
 #right-nav-panel {
-    width: calc((100vw - 800px) /2);
+    width: calc((100vw - 802px) / 2);
     min-width: 450px;
     height: calc(100vh - 55px);
     position: fixed;
@@ -2524,12 +2517,13 @@ a {
     left: auto;
     padding: 0 10px;
     backdrop-filter: blur(10px);
-    background-color: var(--black70a);
+    background-color: var(--black50a);
     -webkit-backdrop-filter: blur(10px);
     z-index: 3000;
     white-space: nowrap;
     border: 0;
-    border-left: 1px solid var(--black30a);
+    border-left: 1px solid var(--grey30a);
+    border-bottom: 1px solid var(--grey30a);
     max-height: 100vh;
     box-shadow: none;
     border-radius: 0 0 0 20px;
@@ -2794,11 +2788,11 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
     color: white;
     border-radius: 20px;
     padding: 10px;
-    border: 1px solid grey;
+    border: 1px solid var(--grey30a);
     box-shadow: 0 0 20px black;
     /* min-width:400px; */
     overflow-y: scroll;
-    max-height: 90vh;
+    max-height: calc(100vh - 70px);
     display: none;
     position: absolute;
     left:0;
@@ -2855,14 +2849,15 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
     .mes-text {padding-right: 25px;}
 
     #right-nav-panel {        
-        height: calc(100vh - 55px);
-        width: calc(100vw - 5px);
+        height: calc(100vh - 70px);
         min-width: 0px;
-        width: calc(100vw - 15px);
-        min-height: calc(100vh - 40px);
-        min-height: calc(100vh - 40px);
+        width: calc(100vw - 10px);
         left: 5px !important;
         overflow-y: hidden;
+        border-left: 1px solid var(--grey30a);
+        border-right: 1px solid var(--grey30a);
+        border-bottom: 1px solid var(--grey30a);
+        border-radius: 0 0 20px 20px;
         /* border: 0;*/
     }
 

server.js

@@ -572,7 +572,7 @@ app.post("/createcharacter", urlencodedParser, function (request, response) {
         var char = charaFormatData(request.body);//{"name": request.body.ch_name, "description": request.body.description, "personality": request.body.personality, "first_mes": request.body.first_mes, "avatar": 'none', "chat": Date.now(), "last_mes": '', "mes_example": ''};
         char = JSON.stringify(char);
         if (!filedata) {
-            charaWrite('./public/img/fluffy.png', char, request.body.ch_name, response);
+            charaWrite('./public/img/ai4.png', char, request.body.ch_name, response);
         } else {
 
             img_path = "./uploads/";
@@ -1244,14 +1244,14 @@ app.post("/importcharacter", urlencodedParser, async function (request, response
                     png_name = getPngName(jsonData.name);
                     let char = { "name": jsonData.name, "description": jsonData.description ?? '', "personality": jsonData.personality ?? '', "first_mes": jsonData.first_mes ?? '', "avatar": 'none', "chat": humanizedISO8601DateTime(), "mes_example": jsonData.mes_example ?? '', "scenario": jsonData.scenario ?? '', "create_date": humanizedISO8601DateTime(), "talkativeness": jsonData.talkativeness ?? 0.5 };
                     char = JSON.stringify(char);
-                    charaWrite('./public/img/fluffy.png', char, png_name, response, { file_name: png_name });
+                    charaWrite('./public/img/ai4.png', char, png_name, response, { file_name: png_name });
                 } else if (jsonData.char_name !== undefined) {//json Pygmalion notepad
                     jsonData.char_name = sanitize(jsonData.char_name);
 
                     png_name = getPngName(jsonData.char_name);
                     let char = { "name": jsonData.char_name, "description": jsonData.char_persona ?? '', "personality": '', "first_mes": jsonData.char_greeting ?? '', "avatar": 'none', "chat": humanizedISO8601DateTime(), "mes_example": jsonData.example_dialogue ?? '', "scenario": jsonData.world_scenario ?? '', "create_date": humanizedISO8601DateTime(), "talkativeness": jsonData.talkativeness ?? 0.5 };
                     char = JSON.stringify(char);
-                    charaWrite('./public/img/fluffy.png', char, png_name, response, { file_name: png_name });
+                    charaWrite('./public/img/ai4.png', char, png_name, response, { file_name: png_name });
                 } else {
                     console.log('Incorrect character format .json');
                     response.send({ error: true });
@@ -1892,7 +1892,7 @@ function convertStage2() {
         var char = JSON.parse(charactersB[key]);
         char.create_date = humanizedISO8601DateTime();
         charactersB[key] = JSON.stringify(char);
-        var avatar = 'public/img/fluffy.png';
+        var avatar = 'public/img/ai4.png';
         if (char.avatar !== 'none') {
             avatar = 'public/characters/' + char.name + '/avatars/' + char.avatar;
         }