From e9cf9b07233c4b689740cb07b232aa8baff19b70 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 31 May 2023 02:19:43 +0800
Subject: [PATCH] chore: updater watch later page

---
 .../views/WatchLater/WatchLater.vue           | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 1a91f9d4..f8ea7dec 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -241,27 +241,38 @@ function jumpToLoginPage() {
     <aside relative w="full md:40% lg:30% xl:25%" order="1 md:2 lg:2">
       <div
         pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full h="[calc(100vh-160px)]" p-6
-        rounded="$bew-radius" overflow-hidden
+        rounded="$bew-radius" overflow-hidden bg="$bew-fill-1"
       >
-        <img
-          v-if="watchLaterList[0]" :src="removeHttpFromUrl(`${watchLaterList[0].pic}@480w_270h_1c`)"
-          rounded="$bew-radius"
+        <picture
+          rounded="$bew-radius" style="box-shadow: 0 16px 24px -12px rgba(0, 0, 0, .3)"
+          aspect-video mb-4 bg="$bew-fill-2"
         >
+          <img
+            v-if="watchLaterList[0]" :src="removeHttpFromUrl(`${watchLaterList[0].pic}@480w_270h_1c`)"
+            rounded="$bew-radius"
+          >
+        </picture>
 
-        <h3 text="3xl" fw-600>
+        <h3 text="3xl white" fw-600 style="text-shadow: 0 0 12px rgba(0,0,0,.3)">
           Watch later ({{ watchLaterList.length }}/100)
         </h3>
-        <p flex gap-4>
+        <p flex="~ col" gap-4>
           <Button flex-1>
+            <template #left>
+              <tabler:player-play />
+            </template>
             Play all
           </Button>
           <Button flex-1>
-            Shuffle
+            <template #left>
+              <tabler:trash />
+            </template>
+            Clear all watch later
           </Button>
         </p>
         <div
           v-if="watchLaterList[0]"
-          pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1 opacity-60
+          pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1 opacity="80 dark:70"
         >
           <div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" />
           <img