background titles for easy searching

public/script.js

@@ -823,13 +823,17 @@ async function getBackgrounds() {
         for (const bg of getData) {
             const thumbPath = getThumbnailUrl('bg', 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 fa-solid fa-circle-xmark"></div>
-            </div>`
+                `<div class="bg_example flex-container" bgfile="${bg}" class="bg_example_img" title="${bg}" style="background-image: url('${thumbPath}');">
+                    <div bgfile="${bg}" class="bg_example_cross fa-solid fa-circle-xmark"></div>
+                    <div class="BGSampleTitle">
+                        ${bg
+                    .replace('.png', '')
+                    .replace('.jpg', '')
+                    .replace('.webp', '')}
+                </div>
+                </div>`
             );
         }
-        //var aa = JSON.parse(getData[0]);
-        //const load_ch_coint = Object.getOwnPropertyNames(getData);
     }
 }
 async function isColab() {

public/style.css

@@ -1312,13 +1312,27 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin: 5px;
     cursor: pointer;
     aspect-ratio: 16/9;
+    justify-content: flex-end;
+}
+
+.BGSampleTitle {
+    display: flex;
+    width: 100%;
+    height: min-content;
+    text-align: center;
+    justify-content: center;
+    align-self: flex-end;
+    bottom: 0;
+    position: relative;
+    background-color: var(--black50a);
+    font-size: calc(var(--fontScale) * 0.9em);
 }
 
 .bg_example_cross {
     width: 15px;
     height: 15px;
     position: relative;
-    float: right;
+    /* float: right; */
     right: 10px;
     top: 5px;
     cursor: pointer;
@@ -3631,7 +3645,6 @@ label[for="extensions_autoconnect"] {
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     z-index: 9999 !important;
-    border: 1px solid var(--white30a);
 }
 
 .fillRight,