⚡ Perf(custom): remove backdrop-filter for better performance

src/main/server/webServer/index.ts

@@ -522,7 +522,6 @@ function generateErrorPage(errorCode: number, _e: string): string {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 15px;
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(10px);
             padding: 60px 40px;
             text-align: center;
             max-width: 500px;

src/renderer/components/InputBoxDialog.vue

@@ -5,7 +5,7 @@
         <Transition name="inputbox-scale">
           <div v-if="showInputBoxVisible" class="inputbox-container" @click.stop>
             <button class="inputbox-close" @click="handleInputBoxCancel">
-              <X :size="20" />
+              <XIcon :size="20" />
             </button>
 
             <div class="inputbox-body">
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { X } from 'lucide-vue-next'
+import { XIcon } from 'lucide-vue-next'
 import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -165,7 +165,6 @@ export default {
   align-items: center;
   padding: 1rem;
   background: rgb(0 0 0 / 40%);
-  backdrop-filter: blur(4px);
 }
 
 /* Container */
@@ -224,7 +223,7 @@ export default {
 
 /* Body */
 .inputbox-body {
-  padding: 2rem 2rem 1.5rem;
+  padding: 1rem 1rem 0.5rem;
 }
 
 .inputbox-title {

src/renderer/components/css/ImageProcessSetting.css

@@ -856,4 +856,4 @@ small {
 :root.dark small,
 :root.auto.dark small {
   background: var(--color-surface);
-}
+}

src/renderer/components/ui/ConfirmMessageBox.vue

@@ -147,7 +147,6 @@ export default {
   align-items: center;
   padding: 1rem;
   background: rgb(0 0 0 / 40%);
-  backdrop-filter: blur(4px);
 }
 
 /* Container */

src/renderer/pages/picbeds/Picbeds.css

@@ -66,7 +66,6 @@
     0 4px 24px rgb(0 0 0 / 8%),
     0 1px 2px rgb(0 0 0 / 4%),
     inset 0 1px 0 rgb(255 255 255 / 5%);
-  backdrop-filter: blur(10px);
   flex-wrap: wrap;
   gap: 1.5rem;
 }
@@ -442,7 +441,6 @@
   justify-content: center;
   align-items: center;
   background: rgb(0 0 0 / 60%);
-  backdrop-filter: blur(8px);
 }
 
 .loading-content {
@@ -583,4 +581,4 @@
 .dropdown-item:focus-visible {
   outline: 1px solid var(--color-accent);
   outline-offset: 2px;
-}
+}