From f86ee7e1322117ae9f13f053fba460713179265d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 2 Jul 2024 15:06:01 +0800
Subject: [PATCH] refactor: use `--bew-skeleton` to represent the skeleton
 color

---
 src/components/BangumiCard/BangumiCard.vue    |  2 +-
 .../BangumiCard/BangumiCardSkeleton.vue       | 10 +++----
 .../TopBar/components/FavoritesPop.vue        |  2 +-
 .../TopBar/components/HistoryPop.vue          |  2 +-
 .../TopBar/components/MomentsPop.vue          | 11 +++++---
 .../TopBar/components/WatchLaterPop.vue       |  2 +-
 src/components/VideoCard/VideoCard.vue        |  6 ++---
 .../VideoCard/VideoCardSkeleton.vue           | 26 +++++++++----------
 .../views/Favorites/Favorites.vue             |  2 +-
 src/contentScripts/views/History/History.vue  |  2 +-
 .../views/WatchLater/WatchLater.vue           |  4 +--
 .../adaptedStyles/notificationsPage.scss      |  7 +++--
 src/styles/variables.scss                     |  3 +++
 13 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/src/components/BangumiCard/BangumiCard.vue b/src/components/BangumiCard/BangumiCard.vue
index e7fd7c08..6421805e 100644
--- a/src/components/BangumiCard/BangumiCard.vue
+++ b/src/components/BangumiCard/BangumiCard.vue
@@ -51,7 +51,7 @@ const { isDark } = useDark()
       <div
         :style="{ width: horizontal ? '170px' : '100%' }"
         tabindex="-1" block
-        rounded="$bew-radius" w-full bg="$bew-fill-4" relative shrink-0
+        rounded="$bew-radius" w-full bg="$bew-skeleton" relative shrink-0
       >
         <div aspect="12/16" overflow-hidden rounded="$bew-radius">
           <!-- badge -->
diff --git a/src/components/BangumiCard/BangumiCardSkeleton.vue b/src/components/BangumiCard/BangumiCardSkeleton.vue
index 8ea0c5a4..e9f28ac3 100644
--- a/src/components/BangumiCard/BangumiCardSkeleton.vue
+++ b/src/components/BangumiCard/BangumiCardSkeleton.vue
@@ -13,20 +13,20 @@ defineProps<{
     mb-6
   >
     <div
-      rounded="$bew-radius" aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-4"
+      rounded="$bew-radius" aspect="12/16" overflow-hidden mb-4 bg="$bew-skeleton"
       shrink-0
       :style="{ width: horizontal ? '170px' : '100%' }"
     />
     <div w-full>
-      <p w-full h-5 my-2 my-4 bg="$bew-fill-3" />
-      <div text="$bew-fill-2" mb-10 flex items-center>
+      <p w-full h-5 my-2 my-4 bg="$bew-skeleton" />
+      <div text="$bew-skeleton" mb-10 flex items-center>
         <div
-          text="transparent" bg="$bew-fill-2" p="x-3 y-1" mr-2 h-27px
+          text="transparent" bg="$bew-skeleton" p="x-3 y-1" mr-2 h-27px
           rounded-4
         >
           0.0
         </div>
-        <div w="60%" h-4 bg="$bew-fill-2" />
+        <div w="60%" h-4 bg="$bew-skeleton" />
       </div>
     </div>
   </div>
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 9d340e06..6524c052 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -243,7 +243,7 @@ defineExpose({
           >
             <section flex="~ gap-4" item-start>
               <div
-                bg="$bew-fill-1"
+                bg="$bew-skeleton"
                 w="120px"
                 flex="shrink-0"
                 rounded="$bew-radius-half"
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index c14b063d..1e1b75d4 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -249,7 +249,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
             <section flex="~ gap-4 item-start">
               <!-- Video cover, live cover, ariticle cover -->
               <div
-                bg="$bew-fill-1"
+                bg="$bew-skeleton"
                 w="150px"
                 flex="shrink-0"
                 border="rounded-$bew-radius-half"
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index 11412aaf..75b4539f 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -368,13 +368,14 @@ defineExpose({
             <a
               :href="moment.link"
               :target="isHomePage() ? '_blank' : '_self'" rel="noopener noreferrer"
+              rounded="1/2"
+              w="40px" h="40px" m="r-4"
+              bg="$bew-skeleton"
             >
               <img
                 :src="`${moment.authorFace}@50w_50h_1c`"
                 rounded="1/2"
-                w="40px"
-                h="40px"
-                m="r-4"
+                w="40px" h="40px"
               >
             </a>
 
@@ -409,9 +410,11 @@ defineExpose({
                 </div>
               </div>
               <div
+                class="group"
                 flex="~ items-center justify-center" w="82px"
                 h="46px" m="l-4"
-                class="group"
+                rounded="$bew-radius-half"
+                bg="$bew-skeleton"
               >
                 <img
                   :src="`${moment.cover}@128w_72h_1c`"
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index a460a31f..733ed698 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -133,7 +133,7 @@ function getAllWatchLaterList() {
             <section flex="~ gap-4 item-start">
               <!-- Video cover, live cover, ariticle cover -->
               <div
-                bg="$bew-fill-1"
+                bg="$bew-skeleton"
                 w="150px"
                 flex="shrink-0"
                 border="rounded-$bew-radius-half"
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index f13de249..638b2c27 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -243,7 +243,7 @@ function handleUndo() {
           <div
             class="group/cover"
             shrink-0
-            :w="wValue" h-fit relative bg="$bew-fill-4" rounded="$bew-radius"
+            :w="wValue" h-fit relative bg="$bew-skeleton" rounded="$bew-radius"
             cursor-pointer
             group-hover:z-2
             transform="~ translate-z-0"
@@ -382,7 +382,7 @@ function handleUndo() {
                 v-if="video.authorFace"
                 :href="authorJumpUrl" target="_blank" rel="noopener noreferrer"
                 m="r-4" w="36px" h="36px" rounded="1/2"
-                object="center cover" bg="$bew-fill-4" cursor="pointer"
+                object="center cover" bg="$bew-skeleton" cursor="pointer"
                 position-relative
                 @click.stop=""
               >
@@ -441,7 +441,7 @@ function handleUndo() {
                       v-if="video.authorFace"
                       :href="authorJumpUrl" target="_blank" rel="noopener noreferrer"
                       m="r-2" w="30px" h="30px" rounded="1/2"
-                      object="center cover" bg="$bew-fill-4" cursor="pointer" relative
+                      object="center cover" bg="$bew-skeleton" cursor="pointer" relative
                       @click.stop=""
                     >
                       <img
diff --git a/src/components/VideoCard/VideoCardSkeleton.vue b/src/components/VideoCard/VideoCardSkeleton.vue
index 3c4634ce..1a821a8a 100644
--- a/src/components/VideoCard/VideoCardSkeleton.vue
+++ b/src/components/VideoCard/VideoCardSkeleton.vue
@@ -17,24 +17,24 @@ const wValue = computed((): string => {
     v-if="!horizontal"
     mb-4 pointer-events-none select-none
   >
-    <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
+    <div aspect-video bg="$bew-skeleton" rounded="$bew-radius" />
     <div flex mt-5>
       <div
-        m="r-4" w="36px" h="36px" rounded="1/2" bg="$bew-fill-4"
+        m="r-4" w="36px" h="36px" rounded="1/2" bg="$bew-skeleton"
         shrink-0
       />
       <div w="[calc(100%-30px)]">
         <div flex="~ col gap-3" mb-4 w-inherit>
-          <div w-full h-5 bg="$bew-fill-3" rounded-4px />
-          <div w="3/4" h-5 bg="$bew-fill-3" rounded-4px />
+          <div w-full h-5 bg="$bew-skeleton" rounded-4px />
+          <div w="3/4" h-5 bg="$bew-skeleton" rounded-4px />
         </div>
         <div flex="~ col gap-2" mb-2>
-          <div w="40%" h-4 bg="$bew-fill-2" rounded-4px />
-          <div w="60%" h-4 bg="$bew-fill-2" rounded-4px />
+          <div w="40%" h-4 bg="$bew-skeleton" rounded-4px />
+          <div w="60%" h-4 bg="$bew-skeleton" rounded-4px />
         </div>
         <div
           text="transparent sm" inline-block p="x-2" lh-6
-          bg="$bew-fill-1" rounded-4
+          bg="$bew-skeleton" rounded-4
         >
           hello world
         </div>
@@ -53,7 +53,7 @@ const wValue = computed((): string => {
 
     <!-- Cover -->
     <div
-      :w="wValue" shrink-0 aspect-video h-fit bg="$bew-fill-4"
+      :w="wValue" shrink-0 aspect-video h-fit bg="$bew-skeleton"
       rounded="$bew-radius"
     />
     <!-- Other Information -->
@@ -63,23 +63,23 @@ const wValue = computed((): string => {
     >
       <div w="[calc(100%-30px)]">
         <div grid gap-2>
-          <div w-full h-5 bg="$bew-fill-3" rounded-4px />
+          <div w-full h-5 bg="$bew-skeleton" rounded-4px />
         </div>
 
         <div mt-4 flex="~ col gap-2">
           <div flex="~ items-center justify-start" w-inherit>
             <div
-              m="r-2" w="30px" h="30px" rounded="1/2" bg="$bew-fill-4"
+              m="r-2" w="30px" h="30px" rounded="1/2" bg="$bew-skeleton"
               shrink-0
             />
 
-            <div w="40%" h-5 bg="$bew-fill-2" rounded-4px />
+            <div w="40%" h-5 bg="$bew-skeleton" rounded-4px />
           </div>
-          <div w="60%" h-5 bg="$bew-fill-2" rounded-4px />
+          <div w="60%" h-5 bg="$bew-skeleton" rounded-4px />
           <div
             text="transparent sm" inline-block w-fit
             lh-6 p="x-2" mt-1
-            bg="$bew-fill-1" rounded-4
+            bg="$bew-skeleton" rounded-4
           >
             hello world
           </div>
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index efe39d42..de7bf73f 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -305,7 +305,7 @@ function isMusic(item: FavoriteResource) {
         >
           <picture
             rounded="$bew-radius" style="box-shadow: 0 16px 24px -12px rgba(0, 0, 0, .36)"
-            aspect-video mb-4 bg="$bew-fill-2"
+            aspect-video mb-4 bg="$bew-skeleton"
           >
             <img
               v-if="activatedCategoryCover" :src="removeHttpFromUrl(`${activatedCategoryCover}@480w_270h_1c`)"
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 7ad8981e..30456c63 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -296,7 +296,7 @@ function jumpToLoginPage() {
             <!-- Cover -->
             <div
               pos="relative"
-              bg="$bew-fill-4"
+              bg="$bew-skeleton"
               w="full md:full lg:250px"
               flex="shrink-0"
               rounded="$bew-radius"
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index f6b06f6f..029e9df4 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -171,7 +171,7 @@ function jumpToLoginPage() {
               <!-- Cover -->
               <div
                 pos="relative"
-                bg="$bew-fill-4"
+                bg="$bew-skeleton"
                 w="full md:full lg:250px"
                 flex="shrink-0"
                 rounded="$bew-radius"
@@ -331,7 +331,7 @@ function jumpToLoginPage() {
         >
           <picture
             rounded="$bew-radius" style="box-shadow: 0 16px 24px -12px rgba(0, 0, 0, .36)"
-            aspect-video mb-4 bg="$bew-fill-2"
+            aspect-video mb-4 bg="$bew-skeleton"
           >
             <img
               v-if="currentWatchLaterList[0]" :src="removeHttpFromUrl(`${currentWatchLaterList[0].pic}@480w_270h_1c`)"
diff --git a/src/styles/adaptedStyles/notificationsPage.scss b/src/styles/adaptedStyles/notificationsPage.scss
index b34f7be2..5f61c8f4 100644
--- a/src/styles/adaptedStyles/notificationsPage.scss
+++ b/src/styles/adaptedStyles/notificationsPage.scss
@@ -326,8 +326,7 @@
     .cs-self-service .cs-self-service-list .cs-self-service-item,
     .cs-order-notice,
     .cs-rich-text-answer .rich-answer-evaluate .ev-thumb,
-    .cs-q-tab-area ul.cs-q-tabs li.cs-q-tab-item.active,
-    .bili-im .name.name-loading {
+    .cs-q-tab-area ul.cs-q-tabs li.cs-q-tab-item.active {
       background-color: var(--bew-fill-1);
     }
 
@@ -346,6 +345,10 @@
       background-color: var(--bew-fill-3);
     }
 
+    .bili-im .name.name-loading {
+      background-color: var(--bew-skeleton);
+    }
+
     .space-left,
     .space-right,
     .emoji-list .emoji {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ce00c2ff..d3c8375d 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -180,6 +180,9 @@
   --bew-fill-4: rgb(131 131 145 / 43%);
 
   --bew-fill-alt: rgb(255 255 255 / 43%);
+
+  // This color is used in skeleton screens
+  --bew-skeleton: var(--bew-fill-2);
   // #endregion
 
   --bew-border-color: rgb(131 131 145 / 18%);