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

public/index.html

@@ -1049,7 +1049,7 @@
 
         <div id="user-settings-button" class="drawer" style="z-index:3004;">
             <div class="drawer-toggle">
-                <div class="drawer-icon fa-regular fa-face-smile closedIcon" title="User Settings"></div>
+                <div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div>
             </div>
             <div id="user-settings-block" class="drawer-content closedDrawer">
                 <h3>User Settings</h3>
@@ -1276,7 +1276,7 @@
 
         <div id="rightNavHolder" class="drawer" style="z-index:3001;">
             <div id="unimportantYes" class="drawer-toggle drawer-header">
-                <div id="rightNavDrawerIcon" class="drawer-icon fa-regular fa-id-card  closedIcon" title="Character Management">
+                <div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-id-card  closedIcon" title="Character Management">
                 </div>
             </div>
             <nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
@@ -1502,7 +1502,7 @@
             </div>
 
         </div>
-        <img id="character_cross" src="img/cross.png" style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
+        <div id="character_cross" class="fa-solid fa-circle-xmark"></div>
 
         <div id="personality_div">
             <hr>
@@ -1545,7 +1545,7 @@
     </div>
     <div id="world_popup">
         <div id="world_popup_text">
-            <img id="world_cross" src="img/cross.png">
+            <div id="world_cross" class="fa-solid fa-circle-xmark"></div>
             <div id="world_popup_header">
                 <!-- Consider changing logo to something else -->
                 <div class="world_popup_logo_block">
@@ -1669,7 +1669,7 @@
                     <input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                     <input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                 </form>
-                <img id="select_chat_cross" src="img/cross.png" alt="Close Past Chat Popup">
+                <div id="select_chat_cross" class="fa-solid fa-circle-xmark" alt="Close Past Chat Popup"></div>
             </div>
 
             <div id="select_chat_div">

public/script.js

@@ -690,7 +690,7 @@ async function getBackgrounds() {
             const thumbPath = `/thumbnail?type=bg&file=${encodeURIComponent(bg)}`;
             $("#bg_menu_content").append(
                 `<div class="bg_example" bgfile="${bg}" class="bg_example_img" title="${bg}" style="background-image: url('${thumbPath}');">
-                <div bgfile="${bg}" class="bg_example_cross">
+                <div bgfile="${bg}" class="bg_example_cross fa-solid fa-circle-xmark"></div>
             </div>`
             );
         }
@@ -2827,7 +2827,7 @@ async function getAllCharaChats() {
                         mes +
                         "</div>" +
                         "</div >" +
-                        '<div file_name="' + data[key]["file_name"] + '" class="PastChat_cross"></div>' +
+                        '<div file_name="' + data[key]["file_name"] + '" class="PastChat_cross fa-solid fa-circle-xmark"></div>' +
                         '</div>'
 
 
@@ -3179,8 +3179,8 @@ function read_bg_load(input) {
                         "url(" + e.target.result + ")"
                     );
                     $("#form_bg_download").after(
-                        `<div class=bg_example bgfile="${html}" style="background-image: url('/thumbnail?type=bg&file=${encodeURIComponent(html)}');">
+                        `<div class="bg_example" bgfile="${html}" style="background-image: url('/thumbnail?type=bg&file=${encodeURIComponent(html)}');">
-                            <img class=bg_example_cross src="img/cross.png">
+                            <div class="bg_example_cross fa-solid fa-circle-xmark"></div>
                         </div>`
                     );
                 },

public/style.css

@@ -618,6 +618,19 @@ select {
     margin-bottom: 0;
 }
 
+#character_cross,
+#world_cross,
+#select_chat_cross {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0.6;
+    font-size: 24px;
+}
+
 #firstmessage_textarea {
     height: -webkit-fill-available;
 }
@@ -1011,16 +1024,16 @@ input[type=search]:focus::-webkit-search-cancel-button {
     position: relative;
     float: right;
     right: 10px;
-    top: 10px;
+    top: 5px;
     cursor: pointer;
-    opacity: 0.4;
+    opacity: 0.7;
-    background-color: var(--black100);
     border-radius: 50%;
-    background-repeat: no-repeat;
+    font-size: 20px;
-    background-size: cover;
+    color: var(--black70a);
-    background-position: center;
+    text-shadow: none;
-    box-shadow: 0 0 0 2pt black;
+    padding: 0;
-    background-image: url(img/cross.png);
+    margin: 0;
+    filter: drop-shadow(0px 0px 3px white);
 }
 
 .no-border {
@@ -2153,18 +2166,11 @@ h5 {
     height: 15px;
     cursor: pointer;
     opacity: 0.4;
-    background-image: url(img/cross.png);
-    background-size: contain;
-    background-color: var(--black100);
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 50%;
-    box-shadow: 0 0 0 2pt black;
 }
 
 .PastChat_cross:hover {
-    background-color: var(--fullred);
+    color: red;
-    box-shadow: 0 0 0 2pt red;
+    filter: drop-shadow(0 0 2px red);
 }
 
 #advanced_book_logo {