From dd523921470e0759c45e014e6a4ed1b5deaa25a9 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 10 Mar 2024 13:17:21 -0300
Subject: [PATCH] refactor: remove the "backdrop-glass" shortcut

---
 src/components/BackToTopAndRefreshButtons.vue             | 2 +-
 src/components/Dock/Dock.vue                              | 2 +-
 src/components/RightSideButtons/RightSideButtons.vue      | 8 ++++++--
 src/components/Select.vue                                 | 3 ++-
 src/components/Settings/Settings.vue                      | 5 +++--
 .../Settings/components/ChildSettingsDialog.vue           | 3 ++-
 src/components/TopBar/TopBar.vue                          | 3 ++-
 src/components/TopBar/components/ChannelsPop.vue          | 3 ++-
 src/components/TopBar/components/FavoritesPop.vue         | 2 +-
 src/components/TopBar/components/HistoryPop.vue           | 2 +-
 src/components/TopBar/components/MomentsPop.vue           | 2 +-
 src/components/TopBar/components/WatchLaterPop.vue        | 2 +-
 src/contentScripts/views/Home/Home.vue                    | 5 +++--
 unocss.config.ts                                          | 3 ---
 14 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/BackToTopAndRefreshButtons.vue b/src/components/BackToTopAndRefreshButtons.vue
index 8deb2948..91c3bed9 100644
--- a/src/components/BackToTopAndRefreshButtons.vue
+++ b/src/components/BackToTopAndRefreshButtons.vue
@@ -9,7 +9,6 @@ const emit = defineEmits(['refresh', 'back-to-top'])
   >
     <Button
       size="small"
-      backdrop-glass
       center
       style="
         --b-button-width: 45px;
@@ -20,6 +19,7 @@ const emit = defineEmits(['refresh', 'back-to-top'])
         --b-button-shadow: var(--bew-shadow-1);
         --b-button-shadow-hover: var(--bew-shadow-2);
         --b-button-shadow-active: var(--bew-shadow-1);
+        backdrop-filter: var(--bew-filter-glass);
       "
       @click="showRefreshButton ? emit('refresh') : emit('back-to-top')"
     >
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 3e7a8dbe..28df5073 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -179,11 +179,11 @@ function toggleDockHide(hide: boolean) {
         bottom: settings.dockPosition === 'bottom',
         hide: hideDock,
       }"
+      style="backdrop-filter: var(--bew-filter-glass);"
       absolute duration-300 ease-in-out
       p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
       rounded="$bew-radius" border="1px $bew-border-color"
       shadow="$bew-shadow-2"
-      backdrop-glass
       @mouseenter="toggleDockHide(false)"
       @mouseleave="toggleDockHide(true)"
     >
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 871af575..a71c1f93 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -102,7 +102,9 @@ function toggleDark(e: MouseEvent) {
     <div flex="~ gap-2 col" pointer-events-auto>
       <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
         <Button
-          class="ctrl-btn" center size="small" round backdrop-glass
+          class="ctrl-btn"
+          style="backdrop-filter: var(--bew-filter-glass);"
+          center size="small" round
           @click="toggleDark"
           @mouseenter="hoveringDockItem.themeMode = true"
           @mouseleave="hoveringDockItem.themeMode = false"
@@ -123,7 +125,9 @@ function toggleDark(e: MouseEvent) {
       </Tooltip>
       <Tooltip :content="$t('dock.settings')" placement="left">
         <Button
-          class="ctrl-btn" center size="small" round backdrop-glass
+          class="ctrl-btn"
+          style="backdrop-filter: var(--bew-filter-glass);"
+          center size="small" round
           @click="emit('settings-visibility-change')"
         >
           <mingcute:settings-3-line />
diff --git a/src/components/Select.vue b/src/components/Select.vue
index c7a9b26b..c71d1f81 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -86,7 +86,8 @@ function onMouseEnter() {
     <transition>
       <div
         v-if="showOptions"
-        pos="absolute" bg="$bew-elevated-2" backdrop-glass shadow="$bew-shadow-2" p="2"
+        style="backdrop-filter: var(--bew-filter-glass)"
+        pos="absolute" bg="$bew-elevated-2" shadow="$bew-shadow-2" p="2"
         m="t-2"
         rounded="$bew-radius" z="1" flex="~ col gap-1"
         w="full" max-h-300px overflow-y-scroll will-change-transform
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 955726e3..0781df59 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -124,10 +124,10 @@ function setCurrentTitle() {
         shrink-0 p="x-4" pos="absolute left--84px" z-2
       >
         <ul
+          style="backdrop-filter: var(--bew-filter-glass)"
           flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-1 hover:$bew-elevated-2" p-2 shadow="$bew-shadow-3"
           scale="group-hover:105" duration-300 overflow-hidden antialiased
           border="1 $bew-border-color"
-          backdrop-glass
         >
           <!-- mask -->
           <div v-if="preventCloseSettings" pos="absolute top-0 left-0" w-full h-full bg="black opacity-20 dark:opacity-40" />
@@ -181,8 +181,9 @@ function setCurrentTitle() {
               {{ title }}
             </div>
             <div
+              style="backdrop-filter: var(--bew-filter-glass)"
               text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px"
-              p="1" rounded-8 cursor="pointer" backdrop-glass
+              p="1" rounded-8 cursor="pointer"
               hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
               @click="handleClose"
             >
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index 0059e94d..ae70bc8c 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -52,8 +52,9 @@ function handleClose() {
         </div>
 
         <div
+          style="backdrop-filter: var(--bew-filter-glass)"
           text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px"
-          ml-auto p="1" rounded-8 cursor="pointer" backdrop-glass
+          ml-auto p="1" rounded-8 cursor="pointer"
           hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
           @click="handleClose"
         >
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 7dc385dd..486f63ee 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -307,7 +307,8 @@ defineExpose({
               v-if="showLogo"
               ref="logo" href="//www.bilibili.com"
               class="group logo"
-              flex items-center backdrop-glass border="1 $bew-border-color"
+              style="backdrop-filter: var(--bew-filter-glass)"
+              flex items-center border="1 $bew-border-color"
               rounded="50px" p="x-4" shadow="$bew-shadow-2" duration-300
               bg="$bew-elevated-1 hover:$bew-theme-color dark-hover:white"
               w-auto h-50px
diff --git a/src/components/TopBar/components/ChannelsPop.vue b/src/components/TopBar/components/ChannelsPop.vue
index 8d4e05b6..e5ee5bd8 100644
--- a/src/components/TopBar/components/ChannelsPop.vue
+++ b/src/components/TopBar/components/ChannelsPop.vue
@@ -44,7 +44,8 @@ const genres = [
 
 <template>
   <div
-    backdrop-glass shadow="$bew-shadow-3"
+    style="backdrop-filter: var(--bew-filter-glass);"
+    shadow="$bew-shadow-3"
     flex="~"
     p="4"
     bg="$bew-elevated-1"
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 97992d07..1d0e1c47 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -134,6 +134,7 @@ defineExpose({
   >
     <!-- top bar -->
     <header
+      style="backdrop-filter: var(--bew-filter-glass)"
       flex="~" items-center justify-between
       p="x-6"
       pos="fixed top-0 left-0"
@@ -142,7 +143,6 @@ defineExpose({
       bg="$bew-content-1"
       z="2"
       un-border="!rounded-t-$bew-radius"
-      backdrop-glass
     >
       <h3 cursor="pointer" font-600 @click="smoothScrollToTop(favoriteVideosWrap, 300)">
         {{ activatedFavoriteTitle }}
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 37caf46c..2d64c12e 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -175,6 +175,7 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
   >
     <!-- top bar -->
     <header
+      style="backdrop-filter: var(--bew-filter-glass);"
       flex="~"
       justify="between"
       p="y-4 x-6"
@@ -183,7 +184,6 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
       bg="$bew-elevated-1"
       z="2"
       border="!rounded-t-$bew-radius"
-      backdrop-glass
     >
       <div flex="~">
         <div
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index fc2922bd..e46a76c4 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -283,6 +283,7 @@ function toggleWatchLater(aid: number) {
   >
     <!-- top bar -->
     <header
+      style="backdrop-filter: var(--bew-filter-glass)"
       flex="~"
       justify="between"
       items-center
@@ -292,7 +293,6 @@ function toggleWatchLater(aid: number) {
       bg="$bew-elevated-1"
       z="1"
       border="!rounded-t-$bew-radius"
-      backdrop-glass
     >
       <div flex="~">
         <div
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 96450ed5..5a338bec 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -50,6 +50,7 @@ function getAllWatchLaterList() {
   >
     <!-- top bar -->
     <header
+      style="backdrop-filter: var(--bew-filter-glass);"
       flex="~"
       justify="between"
       p="y-4 x-6"
@@ -58,7 +59,6 @@ function getAllWatchLaterList() {
       bg="$bew-elevated-1"
       z="2"
       border="!rounded-t-$bew-radius"
-      backdrop-glass
     >
       <div flex="~">
         <div>
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 22715443..5171c902 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -178,10 +178,11 @@ function toggleTabContentLoading(loading: boolean) {
         <ul flex="~ items-center gap-3 wrap">
           <li
             v-for="tab in currentTabs" :key="tab.page"
-            px-4 lh-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" backdrop-glass rounded="$bew-radius"
+            :class="{ 'tab-activated': activatedPage === tab.page }"
+            style="backdrop-filter: var(--bew-filter-glass)"
+            px-4 lh-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
             flex="~ gap-2 items-center"
-            :class="{ 'tab-activated': activatedPage === tab.page }"
             @click="handleChangeTab(tab)"
           >
             <span class="text-center">{{ $t(tab.i18nKey) }}</span>
diff --git a/unocss.config.ts b/unocss.config.ts
index d6886dc4..4137a49a 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -11,7 +11,4 @@ export default defineConfig({
   transformers: [
     transformerDirectives(),
   ],
-  shortcuts: {
-    'backdrop-glass': 'backdrop-blur-20px backdrop-saturate-180%',
-  },
 })