background titles for easy searching

This commit is contained in:
RossAscends
2023-05-18 14:47:26 +09:00
parent 8f6101f567
commit b32887a5b1
2 changed files with 24 additions and 7 deletions

View File

@ -823,13 +823,17 @@ async function getBackgrounds() {
for (const bg of getData) { for (const bg of getData) {
const thumbPath = getThumbnailUrl('bg', bg); const thumbPath = getThumbnailUrl('bg', bg);
$("#bg_menu_content").append( $("#bg_menu_content").append(
`<div class="bg_example" bgfile="${bg}" class="bg_example_img" title="${bg}" style="background-image: url('${thumbPath}');"> `<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 bgfile="${bg}" class="bg_example_cross fa-solid fa-circle-xmark"></div>
</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() { async function isColab() {

View File

@ -1312,13 +1312,27 @@ input[type=search]:focus::-webkit-search-cancel-button {
margin: 5px; margin: 5px;
cursor: pointer; cursor: pointer;
aspect-ratio: 16/9; 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 { .bg_example_cross {
width: 15px; width: 15px;
height: 15px; height: 15px;
position: relative; position: relative;
float: right; /* float: right; */
right: 10px; right: 10px;
top: 5px; top: 5px;
cursor: pointer; cursor: pointer;
@ -3631,7 +3645,6 @@ label[for="extensions_autoconnect"] {
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength))); -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
z-index: 9999 !important; z-index: 9999 !important;
border: 1px solid var(--white30a);
} }
.fillRight, .fillRight,