style: fix scroll bar overflowing inside the popup

- style: change the background color in light mode

src/components/Topbar/Topbar.vue

@@ -261,7 +261,7 @@ function getNewMomentsCount() {
             class="avatar-shadow"
             pos="absolute top-0"
             bg="cover center"
-            filter="blur-sm"
+            blur-sm
             opacity="80"
             rounded-full
             z-0

src/components/Topbar/TopbarFavoritesPop.vue

@@ -158,7 +158,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
     style="box-shadow: var(--bew-shadow-2)"
   >
     <!-- top bar -->
-    <div
+    <header
       flex="~"
       justify="between"
       p="y-4 x-6"
@@ -176,9 +176,9 @@ function scrollToTop(element: HTMLElement, duration: number) {
       <a :href="favoritesPageUrl" target="_blank" flex="~" items="center">
         <span text="sm">{{ $t('common.view_all') }}</span>
       </a>
-    </div>
+    </header>
 
-    <main flex="~">
+    <main flex="~" overflow-hidden rounded="$bew-radius">
       <aside
         w="120px"
         h="430px"

src/components/Topbar/TopbarHistoryPop.vue

@@ -189,7 +189,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
     style="box-shadow: var(--bew-shadow-2)"
   >
     <!-- top bar -->
-    <div
+    <header
       flex="~"
       justify="between"
       p="y-4 x-6"
@@ -217,188 +217,190 @@ function scrollToTop(element: HTMLElement, duration: number) {
       <a href="https://t.bilibili.com/" target="_blank" flex="~" items="center">
         <span text="sm">{{ $t('common.view_all') }}</span>
       </a>
-    </div>
+    </header>
 
     <!-- historys wrapper -->
-    <div
-      ref="historysWrap"
-      flex="~ col gap-4"
-      h="430px"
-      overflow="y-scroll"
-      p="x-4"
-    >
-      <!-- loading -->
-      <Loading
-        v-if="isLoading && historys.length === 0"
-        pos="absolute left-0"
-        bg="$bew-content-1"
-        z="1"
-        w="full"
-        h="full"
-        flex="~"
-        items="center"
-        border="rounded-$bew-radius"
-      />
+    <main overflow-hidden rounded="$bew-radius">
+      <div
+        ref="historysWrap"
+        flex="~ col gap-4"
+        h="430px"
+        overflow="y-scroll"
+        p="x-4"
+      >
+        <!-- loading -->
+        <Loading
+          v-if="isLoading && historys.length === 0"
+          pos="absolute left-0"
+          bg="$bew-content-1"
+          z="1"
+          w="full"
+          h="full"
+          flex="~"
+          items="center"
+          border="rounded-$bew-radius"
+        />
 
-      <!-- empty -->
-      <Empty v-if="!isLoading && historys.length === 0" w="full" h="full" />
+        <!-- empty -->
+        <Empty v-if="!isLoading && historys.length === 0" w="full" h="full" />
 
-      <!-- historys -->
-      <transition-group name="list">
-        <a
-          v-for="historyItem in historys"
-          :key="historyItem.kid"
-          :href="getHistoryUrl(historyItem)"
-          target="_blank"
-          hover:bg="$bew-fill-2"
-          rounded="$bew-radius"
-          p="2"
-          m="first:t-50px last:b-4"
-          class="group"
-          transition="duration"
-          duration-300
-          block
-        >
-          <section flex="~ gap-4" item-start>
-            <!-- Video cover, live cover, ariticle cover -->
-            <div
-              bg="$bew-fill-1"
-              w="150px"
-              flex="shrink-0"
-              border="rounded-$bew-radius-half"
-              overflow="hidden"
-            >
-              <!-- Video -->
-              <template v-if="activatedTab === 0">
-                <div pos="relative">
-                  <img
-                    w="150px"
-                    class="aspect-video"
-                    :src="`${removeHttpFromUrl(
-                      historyItem.cover,
-                    )}@256w_144h_1c`"
-                    :alt="historyItem.title"
-                    bg="contain"
-                  >
-                  <div
-                    pos="absolute bottom-0 right-0"
-                    bg="black opacity-60"
-                    m="1"
-                    p="x-2 y-1"
-                    text="white xs"
-                    border="rounded-full"
-                  >
-                    <!--  When progress = -1 means that the user watched the full video -->
-                    {{
-                      `${
-                        historyItem.progress === -1
-                          ? calcCurrentTime(historyItem.duration)
-                          : calcCurrentTime(historyItem.progress)
-                      } /
-                    ${calcCurrentTime(historyItem.duration)}`
-                    }}
-                  </div>
-                </div>
-                <Progress
-                  :percentage="
-                    (historyItem.progress / historyItem.duration) * 100
-                  "
-                />
-              </template>
-
-              <!-- Live -->
-              <template v-else-if="activatedTab === 1">
-                <div pos="relative">
-                  <img
-                    w="150px"
-                    class="aspect-video"
-                    :src="`${removeHttpFromUrl(
-                      historyItem.cover,
-                    )}@256w_144h_1c`"
-                    :alt="historyItem.title"
-                    bg="contain"
-                  >
-                  <div
-                    v-if="historyItem.live_status === 1"
-                    pos="absolute top-0 left-0"
-                    bg="$bew-error-color"
-                    text="xs white"
-                    p="x-2 y-1"
-                    m="1"
-                    rounded="$bew-radius-half"
-                    font="semibold"
-                  >
-                    LIVE
-                  </div>
-                  <div
-                    v-else
-                    pos="absolute top-0 left-0"
-                    bg="black opacity-60"
-                    text="xs white"
-                    p="x-2 y-1"
-                    m="1"
-                    rounded="$bew-radius-half"
-                  >
-                    Offline
-                  </div>
-                </div>
-              </template>
-
-              <!-- Article -->
-              <div v-else-if="activatedTab === 2">
-                <img
-                  w="150px"
-                  class="aspect-video"
-                  :src="`${
-                    Array.isArray(historyItem.covers)
-                      ? historyItem.covers[0]
-                      : ''
-                  }@256w_144h_1c`"
-                  object-cover
-                  :alt="historyItem.title"
-                  bg="contain"
-                >
-              </div>
-            </div>
-
-            <!-- Description -->
-            <div>
-              <h3
-                class="keep-two-lines"
+        <!-- historys -->
+        <transition-group name="list">
+          <a
+            v-for="historyItem in historys"
+            :key="historyItem.kid"
+            :href="getHistoryUrl(historyItem)"
+            target="_blank"
+            hover:bg="$bew-fill-2"
+            rounded="$bew-radius"
+            p="2"
+            m="first:t-50px last:b-4"
+            class="group"
+            transition="duration"
+            duration-300
+            block
+          >
+            <section flex="~ gap-4" item-start>
+              <!-- Video cover, live cover, ariticle cover -->
+              <div
+                bg="$bew-fill-1"
+                w="150px"
+                flex="shrink-0"
+                border="rounded-$bew-radius-half"
                 overflow="hidden"
-                text="overflow-ellipsis"
               >
-                {{ historyItem.title }}
-              </h3>
-              <div text="$bew-text-2 sm" m="t-4" flex="~" align="items-center">
-                {{ historyItem.author_name }}
-                <span
-                  v-if="historyItem.live_status === 1"
-                  text="$bew-theme-color"
-                  flex
-                  items-center
-                  gap-1
-                  m="l-2"
-                ><tabler:live-photo />
-                  Live
-                </span>
-              </div>
-              <p text="$bew-text-2 sm">
-                {{
-                  useDateFormat(
-                    historyItem.view_at * 1000,
-                    'YYYY-MM-DD HH:mm:ss',
-                  ).value
-                }}
-              </p>
-            </div>
-          </section>
-        </a>
-      </transition-group>
+                <!-- Video -->
+                <template v-if="activatedTab === 0">
+                  <div pos="relative">
+                    <img
+                      w="150px"
+                      class="aspect-video"
+                      :src="`${removeHttpFromUrl(
+                        historyItem.cover,
+                      )}@256w_144h_1c`"
+                      :alt="historyItem.title"
+                      bg="contain"
+                    >
+                    <div
+                      pos="absolute bottom-0 right-0"
+                      bg="black opacity-60"
+                      m="1"
+                      p="x-2 y-1"
+                      text="white xs"
+                      border="rounded-full"
+                    >
+                      <!--  When progress = -1 means that the user watched the full video -->
+                      {{
+                        `${
+                          historyItem.progress === -1
+                            ? calcCurrentTime(historyItem.duration)
+                            : calcCurrentTime(historyItem.progress)
+                        } /
+                    ${calcCurrentTime(historyItem.duration)}`
+                      }}
+                    </div>
+                  </div>
+                  <Progress
+                    :percentage="
+                      (historyItem.progress / historyItem.duration) * 100
+                    "
+                  />
+                </template>
 
-      <!-- loading -->
-      <loading v-if="isLoading && historys.length !== 0" m="-t-4" />
-    </div>
+                <!-- Live -->
+                <template v-else-if="activatedTab === 1">
+                  <div pos="relative">
+                    <img
+                      w="150px"
+                      class="aspect-video"
+                      :src="`${removeHttpFromUrl(
+                        historyItem.cover,
+                      )}@256w_144h_1c`"
+                      :alt="historyItem.title"
+                      bg="contain"
+                    >
+                    <div
+                      v-if="historyItem.live_status === 1"
+                      pos="absolute top-0 left-0"
+                      bg="$bew-error-color"
+                      text="xs white"
+                      p="x-2 y-1"
+                      m="1"
+                      rounded="$bew-radius-half"
+                      font="semibold"
+                    >
+                      LIVE
+                    </div>
+                    <div
+                      v-else
+                      pos="absolute top-0 left-0"
+                      bg="black opacity-60"
+                      text="xs white"
+                      p="x-2 y-1"
+                      m="1"
+                      rounded="$bew-radius-half"
+                    >
+                      Offline
+                    </div>
+                  </div>
+                </template>
+
+                <!-- Article -->
+                <div v-else-if="activatedTab === 2">
+                  <img
+                    w="150px"
+                    class="aspect-video"
+                    :src="`${
+                      Array.isArray(historyItem.covers)
+                        ? historyItem.covers[0]
+                        : ''
+                    }@256w_144h_1c`"
+                    object-cover
+                    :alt="historyItem.title"
+                    bg="contain"
+                  >
+                </div>
+              </div>
+
+              <!-- Description -->
+              <div>
+                <h3
+                  class="keep-two-lines"
+                  overflow="hidden"
+                  text="overflow-ellipsis"
+                >
+                  {{ historyItem.title }}
+                </h3>
+                <div text="$bew-text-2 sm" m="t-4" flex="~" align="items-center">
+                  {{ historyItem.author_name }}
+                  <span
+                    v-if="historyItem.live_status === 1"
+                    text="$bew-theme-color"
+                    flex
+                    items-center
+                    gap-1
+                    m="l-2"
+                  ><tabler:live-photo />
+                    Live
+                  </span>
+                </div>
+                <p text="$bew-text-2 sm">
+                  {{
+                    useDateFormat(
+                      historyItem.view_at * 1000,
+                      'YYYY-MM-DD HH:mm:ss',
+                    ).value
+                  }}
+                </p>
+              </div>
+            </section>
+          </a>
+        </transition-group>
+
+        <!-- loading -->
+        <loading v-if="isLoading && historys.length !== 0" m="-t-4" />
+      </div>
+    </main>
   </div>
 </template>
 

src/components/Topbar/TopbarMomentsPop.vue

@@ -272,12 +272,13 @@ function scrollToTop(element: HTMLElement, duration: number) {
     w="380px"
     rounded="$bew-radius"
     pos="relative"
-    style="box-shadow: var(--bew-shadow-2)"
+    shadow="$bew-shadow-2"
   >
     <!-- top bar -->
-    <div
+    <header
       flex="~"
       justify="between"
+      items-center
       p="y-4 x-6"
       pos="fixed top-0 left-0"
       w="full"
@@ -303,129 +304,131 @@ function scrollToTop(element: HTMLElement, duration: number) {
       <a href="https://t.bilibili.com/" target="_blank" flex="~" items="center">
         <span text="sm">{{ $t('common.view_all') }}</span>
       </a>
-    </div>
+    </header>
 
     <!-- moments wrapper -->
-    <div ref="momentsWrap" h="430px" overflow="y-scroll" p="x-4">
-      <!-- loading -->
-      <loading
-        v-if="isLoading && moments.length === 0"
-        h="full"
-        flex="~"
-        items="center"
-      />
-
-      <!-- empty -->
-      <empty
-        v-if="!isLoading && moments.length === 0"
-        pos="absolute left-0"
-        bg="$bew-content-1"
-        z="1"
-        w="full"
-        h="full"
-        flex="~"
-        items="center"
-        border="rounded-$bew-radius"
-      />
-
-      <!-- moments -->
-      <transition-group name="list">
-        <a
-          v-for="(moment, index) in moments"
-          :key="index"
-          :href="moment.url"
-          target="_blank"
+    <main overflow-hidden rounded="$bew-radius">
+      <div ref="momentsWrap" h="430px" overflow="y-scroll" p="x-4">
+        <!-- loading -->
+        <loading
+          v-if="isLoading && moments.length === 0"
+          h="full"
           flex="~"
-          justify="between"
-          m="b-4"
-          first:m="t-16"
-          p="2"
-          rounded="$bew-radius"
-          hover:bg="$bew-fill-2"
-          transition="all duration-300"
-          cursor="pointer"
-          pos="relative"
-        >
-          <!-- new moment dot -->
-          <div
-            v-if="moment.isNew"
-            rounded="full"
-            w="8px"
-            h="8px"
-            m="t-2 l-2"
-            bg="$bew-theme-color"
-            pos="absolute -top-10px -left-10px"
-            style="box-shadow: 0 0 4px var(--bew-theme-color)"
-          />
+          items="center"
+        />
 
+        <!-- empty -->
+        <empty
+          v-if="!isLoading && moments.length === 0"
+          pos="absolute left-0"
+          bg="$bew-content-1"
+          z="1"
+          w="full"
+          h="full"
+          flex="~"
+          items="center"
+          border="rounded-$bew-radius"
+        />
+
+        <!-- moments -->
+        <transition-group name="list">
           <a
-            :href="
-              moment.type === MomentType.Video
-                ? `https://space.bilibili.com/${moment.uid}`
-                : moment.url
-            "
+            v-for="(moment, index) in moments"
+            :key="index"
+            :href="moment.url"
             target="_blank"
+            flex="~"
+            justify="between"
+            m="b-4"
+            first:m="t-16"
+            p="2"
+            rounded="$bew-radius"
+            hover:bg="$bew-fill-2"
+            transition="all duration-300"
+            cursor="pointer"
+            pos="relative"
           >
-            <img
-              :src="`${moment.face}@60w_60h_1c`"
-              rounded="$bew-radius"
-              w="40px"
-              h="40px"
-              m="r-4"
-            >
-          </a>
+            <!-- new moment dot -->
+            <div
+              v-if="moment.isNew"
+              rounded="full"
+              w="8px"
+              h="8px"
+              m="-2"
+              bg="$bew-theme-color"
+              pos="absolute -top-12px -left-12px"
+              style="box-shadow: 0 0 4px var(--bew-theme-color)"
+            />
 
-          <div flex="~" justify="between" w="full">
-            <div>
-              <span>{{ `${moment.name} ${t('topbar.moments_dropdown.uploaded')}` }}</span>
-              <div overflow="hidden" text="overflow-ellipsis">
-                {{ moment.title }}
-              </div>
-              <div
-                v-if="moment.type !== MomentType.Bangumi"
-                text="$bew-text-2 sm"
-                m="y-2"
+            <a
+              :href="
+                moment.type === MomentType.Video
+                  ? `https://space.bilibili.com/${moment.uid}`
+                  : moment.url
+              "
+              target="_blank"
+            >
+              <img
+                :src="`${moment.face}@60w_60h_1c`"
+                rounded="$bew-radius"
+                w="40px"
+                h="40px"
+                m="r-4"
               >
-                <!-- Videos and articles -->
-                <div v-if="selectedTab === 0 || selectedTab === 2">
-                  {{
-                    moment.ctime
-                      ? calcTimeSince(new Date(moment.ctime * 1000))
-                      : moment.ctime
-                  }}{{
-                    language === LanguageType.English
-                      ? ` ${$t('common.ago')}`
-                      : $t('common.ago')
-                  }}
-                </div>
+            </a>
 
-                <!-- Live -->
+            <div flex="~" justify="between" w="full">
+              <div>
+                <span>{{ `${moment.name} ${t('topbar.moments_dropdown.uploaded')}` }}</span>
+                <div overflow="hidden" text="overflow-ellipsis">
+                  {{ moment.title }}
+                </div>
                 <div
-                  v-else-if="selectedTab === 1"
-                  text="$bew-theme-color"
-                  font="bold"
-                  flex="~"
-                  items="center"
+                  v-if="moment.type !== MomentType.Bangumi"
+                  text="$bew-text-2 sm"
+                  m="y-2"
                 >
-                  <fluent:live-24-filled m="r-2" />
-                  {{ $t('topbar.moments_dropdown.live_status') }}
+                  <!-- Videos and articles -->
+                  <div v-if="selectedTab === 0 || selectedTab === 2">
+                    {{
+                      moment.ctime
+                        ? calcTimeSince(new Date(moment.ctime * 1000))
+                        : moment.ctime
+                    }}{{
+                      language === LanguageType.English
+                        ? ` ${$t('common.ago')}`
+                        : $t('common.ago')
+                    }}
+                  </div>
+
+                  <!-- Live -->
+                  <div
+                    v-else-if="selectedTab === 1"
+                    text="$bew-theme-color"
+                    font="bold"
+                    flex="~"
+                    items="center"
+                  >
+                    <fluent:live-24-filled m="r-2" />
+                    {{ $t('topbar.moments_dropdown.live_status') }}
+                  </div>
                 </div>
               </div>
+              <img
+                :src="`${moment.cover}@128w_72h_1c`"
+                w="82px"
+                h="46px"
+                m="l-4"
+                rounded="$bew-radius-half"
+              >
             </div>
-            <img
-              :src="`${moment.cover}@128w_72h_1c`"
-              w="82px"
-              h="46px"
-              m="l-4"
-              rounded="$bew-radius-half"
-            >
-          </div>
-        </a>
-      </transition-group>
+          </a>
+        </transition-group>
 
-      <!-- loading -->
-      <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
-    </div>
+        <!-- loading -->
+        <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
+      </div>
+    </main>
   </div>
 </template>
 

src/contentScripts/views/History/History.vue

@@ -311,7 +311,7 @@ function handleTurnOnWatchHistory() {
               <img
                 w="300px"
                 class="aspect-video"
-                :src="`${getHistoryItemCover(historyItem)}@672w_378h_1c`"
+                :src="`${getHistoryItemCover(historyItem)}@480w_270h_1c`"
                 :alt="historyItem.title"
                 object-cover
               >
@@ -415,9 +415,9 @@ function handleTurnOnWatchHistory() {
                 >
                   <img
                     :src="
-                      historyItem.author_face
+                      `${historyItem.author_face
                         ? historyItem.author_face
-                        : historyItem.cover
+                        : historyItem.cover}@80w_80h_1c`
                     "
                     w-8
                     aspect-square

src/styles/variables.scss

@@ -80,7 +80,7 @@
   --bew-text-4: hsl(215, 19%, 72%);
   // #endregion
 
-  --bew-bg: hsl(220, 14%, 94%);
+  --bew-bg: hsl(220, 14%, 96%);
 
   --bew-content-opacity: 0.6;