- bg delete buttons are now webfonts

- all large popup panel close buttons are webfonts
- moved cross.png to disused folder
- moved swipes to disused folder

public/index.html

@@ -1493,7 +1493,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>
@@ -1536,7 +1536,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">
@@ -1660,7 +1660,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>`
             );
         }
@@ -2825,7 +2825,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>'
 
 
@@ -3177,8 +3177,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)}');">
-                            <img class=bg_example_cross src="img/cross.png">
+                        `<div class="bg_example" bgfile="${html}" style="background-image: url('/thumbnail?type=bg&file=${encodeURIComponent(html)}');">
+                            <div class="bg_example_cross fa-solid fa-circle-xmark"></div>
                         </div>`
                     );
                 },

public/style.css

@@ -614,6 +614,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;
 }
@@ -1007,16 +1020,16 @@ input[type=search]:focus::-webkit-search-cancel-button {
     position: relative;
     float: right;
     right: 10px;
-    top: 10px;
+    top: 5px;
     cursor: pointer;
-    opacity: 0.4;
-    background-color: var(--black100);
+    opacity: 0.7;
     border-radius: 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    box-shadow: 0 0 0 2pt black;
-    background-image: url(img/cross.png);
+    font-size: 20px;
+    color: var(--black70a);
+    text-shadow: none;
+    padding: 0;
+    margin: 0;
+    filter: drop-shadow(0px 0px 3px white);
 }
 
 .no-border {
@@ -2149,18 +2162,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);
-    box-shadow: 0 0 0 2pt red;
+    color: red;
+    filter: drop-shadow(0 0 2px red);
 }
 
 #advanced_book_logo {