:art: fix https://github.com/siyuan-note/siyuan/issues/10297

app/src/assets/scss/business/_config.scss

@@ -239,81 +239,100 @@
     }
   }
 
-  &-bazaar__readme {
-    position: absolute;
-    transition: transform .2s cubic-bezier(0, 0, .2, 1) 0ms, opacity .3s cubic-bezier(0, 0, .2, 1) 0ms;
-    right: -100%;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--b3-theme-background);
-    display: flex;
-    padding: 16px 16px 16px 0;
-    box-sizing: border-box;
-    opacity: 0;
-    z-index: 1;
-    border-radius: var(--b3-border-radius-b);
+  &-bazaar {
+    &__panel {
+      height: 100%;
+      overflow: auto;
+    }
 
-    &--show {
-      opacity: 1;
-      transform: translateX(-100%);
+    &__title {
+      padding: 16px;
+      backdrop-filter: blur(8px);
+      position: sticky;
+      top: 0;
+      z-index: 1;
     }
 
-    .item {
-      &__side {
-        text-align: center;
-        width: 260px;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: auto;
-        padding: 0 16px;
-      }
+    &__content {
+      margin-top: -15px;
+    }
 
-      &__readme {
-        margin-top: 24px;
-        position: relative;
-      }
+    &__readme {
+      position: absolute;
+      transition: transform .2s cubic-bezier(0, 0, .2, 1) 0ms, opacity .3s cubic-bezier(0, 0, .2, 1) 0ms;
+      right: -100%;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--b3-theme-background);
+      display: flex;
+      padding: 16px 16px 16px 0;
+      box-sizing: border-box;
+      opacity: 0;
+      z-index: 1;
+      border-radius: var(--b3-border-radius-b);
 
-      &__main {
-        flex: 1;
-        margin-left: 16px;
-        overflow: auto;
+      &--show {
+        opacity: 1;
+        transform: translateX(-100%);
       }
 
-      &__title {
-        font-size: 24px;
-        word-break: break-all;
-        color: var(--b3-theme-on-background);
-      }
+      .item {
+        &__side {
+          text-align: center;
+          width: 260px;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          overflow: auto;
+          padding: 0 16px;
+        }
 
-      &__img {
-        height: 96px;
-        width: 96px;
-        margin: 32px auto 32px;
-        border-radius: var(--b3-border-radius);
-        flex-shrink: 0;
-      }
+        &__readme {
+          margin-top: 24px;
+          position: relative;
+        }
 
-      &__preview {
-        width: 100%;
-        height: 50%;
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        border-radius: var(--b3-border-radius);
-        margin-bottom: 32px;
-        cursor: pointer;
-        left: 0;
-        top: 0;
-        transition: var(--b3-transition);
-
-        &--fullscreen {
-          position: absolute;
-          z-index: 1;
-          height: 100%;
-          background-size: contain;
-          background-color: var(--b3-mask-background);
+        &__main {
+          flex: 1;
+          margin-left: 16px;
+          overflow: auto;
+        }
+
+        &__title {
+          font-size: 24px;
+          word-break: break-all;
+          color: var(--b3-theme-on-background);
+        }
+
+        &__img {
+          height: 96px;
+          width: 96px;
+          margin: 32px auto 32px;
+          border-radius: var(--b3-border-radius);
+          flex-shrink: 0;
+        }
+
+        &__preview {
+          width: 100%;
+          height: 50%;
+          background-position: center center;
+          background-repeat: no-repeat;
+          background-size: cover;
+          border-radius: var(--b3-border-radius);
+          margin-bottom: 32px;
+          cursor: pointer;
+          left: 0;
+          top: 0;
+          transition: var(--b3-transition);
+
+          &--fullscreen {
+            position: absolute;
+            z-index: 1;
+            height: 100%;
+            background-size: contain;
+            background-color: var(--b3-mask-background);
+          }
         }
       }
     }

app/src/assets/scss/component/_card.scss

@@ -16,9 +16,9 @@
   }
 
   &:hover {
-    background-color: var(--b3-theme-surface-lighter);
-    transform: translate(0px, -4px);
-    box-shadow: var(--b3-dialog-shadow);
+    background-color: var(--b3-list-hover);
+    transform: translate(0px, -2px);
+    box-shadow: var(--b3-button-shadow);
   }
 
   &s {

app/src/config/bazaar.ts

@@ -82,11 +82,8 @@ export const bazaar = {
     <div data-type="widget" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.widget}</span><span class="fn__flex-1"></span></div>
 </div>
 <div class="fn__flex-1">
-    <div class="bazaarPanel" data-type="downloaded" data-init="true">
-        <div class="fn__hr--b"></div>
-        <div class="fn__flex">
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
+    <div class="config-bazaar__panel" data-type="downloaded" data-init="true">
+        <div class="fn__flex config-bazaar__title">
             <button data-type="myPlugin" class="b3-button">${window.siyuan.languages.plugin}</button>
             <div class="fn__space"></div>
             <button data-type="myTheme" class="b3-button b3-button--outline">${window.siyuan.languages.theme}</button>
@@ -103,19 +100,15 @@ export const bazaar = {
             </div>
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
+            <input ${window.siyuan.config.bazaar.petalDisabled ? "" : " checked"} data-type="plugins-enable" type="checkbox" class="b3-switch" style="margin: 8px 16px">
             <div class="counter fn__none fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
         </div>
-        <div id="configBazaarDownloaded">
+        <div id="configBazaarDownloaded" class="config-bazaar__content">
             ${loadingHTML}
         </div>
     </div>
-    <div data-type="theme" class="bazaarPanel fn__none">
-        <div class="fn__hr--b"></div>
-        <div class="fn__flex">
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
+    <div data-type="theme" class="config-bazaar__panel fn__none">
+        <div class="fn__flex config-bazaar__title">
             <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
             <div class="fn__space"></div>
             <select class="b3-select">
@@ -138,18 +131,13 @@ export const bazaar = {
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
             <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
         </div>
-        <div id="configBazaarTheme">
+        <div id="configBazaarTheme" class="config-bazaar__content">
             ${loadingHTML}
         </div>
     </div>
-    <div class="fn__none bazaarPanel" data-type="template">
-        <div class="fn__hr--b"></div>
-        <div class="fn__flex">
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
+    <div class="fn__none config-bazaar__panel" data-type="template">
+        <div class="fn__flex config-bazaar__title">
             <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
             <div class="fn__space"></div>
             <select class="b3-select">
@@ -166,18 +154,13 @@ export const bazaar = {
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
             <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
         </div>
-        <div id="configBazaarTemplate">
+        <div id="configBazaarTemplate" class="config-bazaar__content">
             ${loadingHTML}
         </div>
     </div>
-    <div class="fn__none bazaarPanel" data-type="plugin">
-        <div class="fn__hr--b"></div>
-        <div class="fn__flex">
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
+    <div class="fn__none config-bazaar__panel" data-type="plugin">
+        <div class="fn__flex config-bazaar__title">
             <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
             <div class="fn__space"></div>
             <select class="b3-select">
@@ -194,18 +177,13 @@ export const bazaar = {
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
             <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
         </div>
-        <div id="configBazaarPlugin">
+        <div id="configBazaarPlugin" class="config-bazaar__content">
             ${loadingHTML}
         </div>
     </div>
-    <div class="fn__none bazaarPanel" data-type="icon">
-        <div class="fn__hr--b"></div>
-        <div class="fn__flex">
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
+    <div class="fn__none config-bazaar__panel" data-type="icon">
+        <div class="fn__flex config-bazaar__title">
             <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
             <div class="fn__space"></div>
             <select class="b3-select">
@@ -222,18 +200,13 @@ export const bazaar = {
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
             <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
         </div>
-        <div id="configBazaarIcon">
+        <div id="configBazaarIcon" class="config-bazaar__content">
             ${loadingHTML}
         </div>
     </div>
-    <div class="fn__none bazaarPanel" data-type="widget">
-        <div class="fn__hr--b"></div>
-        <div class="fn__flex">
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
+    <div class="fn__none config-bazaar__panel" data-type="widget">
+        <div class="fn__flex config-bazaar__title">
             <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
             <div class="fn__space"></div>
             <select class="b3-select">
@@ -250,10 +223,8 @@ export const bazaar = {
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
             <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
-            <div class="fn__space"></div>
-            <div class="fn__space"></div>
         </div>
-        <div id="configBazaarWidget">
+        <div id="configBazaarWidget" class="config-bazaar__content">
             ${loadingHTML}
         </div>
     </div>
@@ -408,11 +379,11 @@ export const bazaar = {
                 });
             }
             bazaar._data.downloaded = response.data.packages;
+            const checkElement = contentElement.parentElement.querySelector(".b3-switch")
             if (bazaarType === "plugins") {
-                html = `<div class="fn__flex">
-    <div class="fn__flex-1"></div>
-    <input ${window.siyuan.config.bazaar.petalDisabled ? "" : " checked"} data-type="plugins-enable" type="checkbox" class="b3-switch" style="margin: 8px 32px">
-</div>${html}`;
+                checkElement.classList.remove("fn__none");
+            } else {
+                checkElement.classList.add("fn__none");
             }
             contentElement.innerHTML = html ? html : `<div class="fn__hr"></div><ul class="b3-list b3-list--background"><li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li></ul>`;
         });
@@ -897,7 +868,7 @@ export const bazaar = {
                     // switch tab
                     bazaar.element.querySelector(".layout-tab-bar .item--focus").classList.remove("item--focus");
                     target.classList.add("item--focus");
-                    bazaar.element.querySelectorAll(".bazaarPanel").forEach(item => {
+                    bazaar.element.querySelectorAll(".config-bazaar__panel").forEach(item => {
                         if (type === item.getAttribute("data-type")) {
                             item.classList.remove("fn__none");
                             if (!item.getAttribute("data-init")) {
@@ -948,14 +919,14 @@ export const bazaar = {
             }
         });
 
-        bazaar.element.querySelectorAll(".bazaarPanel .b3-form__icon > .b3-text-field").forEach((inputElement: HTMLInputElement) => {
+        bazaar.element.querySelectorAll(".config-bazaar__panel .b3-form__icon > .b3-text-field").forEach((inputElement: HTMLInputElement) => {
             inputElement.addEventListener("keydown", (event) => {
                 if (event.isComposing) {
                     return;
                 }
                 if (event.key === "Enter") {
                     const keyword = inputElement.value.trim();
-                    const type = (hasClosestByClassName(inputElement, "bazaarPanel") as HTMLElement).getAttribute("data-type");
+                    const type = (hasClosestByClassName(inputElement, "config-bazaar__panel") as HTMLElement).getAttribute("data-type");
                     if (type === "template") {
                         fetchPost("/api/bazaar/getBazaarTemplate", {keyword}, response => {
                             bazaar._onBazaar(response, "templates", false);

app/src/protyle/header/Background.ts

@@ -253,11 +253,11 @@ export class Background {
                 } else if (type === "show-random") {
                     let html = "";
                     bgs.forEach((item: string, index: number) => {
-                        html += `<div data-index="${index}" style="height: 148px;width: 148px;${item}" class="b3-card"></div>`;
+                        html += `<div data-index="${index}" style="${item}" class="b3-card b3-card--wrap"></div>`;
                     });
                     const dialog = new Dialog({
                         title: window.siyuan.languages.random,
-                        content: `<div class="b3-cards" style="margin-right: 0">${html}</div>`,
+                        content: `<div class="b3-cards">${html}</div>`,
                         width: isMobile() ? "92vw" : "912px",
                         height: isMobile() ? "80vh" : "70vh",
                     });