fix: light theme

ufaboy · May 11, 2024 · 3a78416 · 3a78416
1 parent b6cf256
commit 3a78416
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lib-vue",
   "private": true,
-  "version": "1.9.4",
+  "version": "1.9.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -77,7 +77,7 @@ function toggleDropdown() {
     <RouterLink
       v-if="['book-view', 'comics-view'].includes(routeName)"
       :to="{ name: 'book-update', params: { id: bookID } }"
-      class="sidebar-link flex items-center gap-2 rounded-md border"
+      class="sidebar-link flex items-center gap-2 rounded-md border text-white"
       active-class="sidebar-link-active">
       <span>Update</span>
     </RouterLink>

diff --git a/src/views/AuthorTable.vue b/src/views/AuthorTable.vue
@@ -123,7 +123,7 @@ getAuthors();
       @update-limit="updateLimit" />
     <Teleport v-if="mounted" to="#menu-target">
       <button
-        class="nav-btn flex items-center border px-2 py-1 hover:bg-gray-600"
+        class="nav-btn flex items-center border px-2 py-1 text-white hover:bg-blue-500 dark:hover:bg-gray-600"
         :class="{ 'w-full': !sidebarCollapsed, 'w-fit': sidebarCollapsed }"
         @click.passive="startCreateAuthor">
         <svg

diff --git a/src/views/BookComics.vue b/src/views/BookComics.vue
@@ -77,7 +77,7 @@ parseQuery();
       <img
         v-if="media"
         :src="getUploadedMediaUrl(media)"
-        class="h-full max-h-[calc(100dvh_-_55px)] lg:max-h-dvh max-w-full overflow-hidden rounded-lg object-contain">
+        class="h-full max-h-[calc(100dvh_-_55px)] max-w-full overflow-hidden rounded-lg object-contain lg:max-h-dvh">
       <button
         type="button"
         class="group absolute left-0 top-1/4 z-30 flex h-1/2 cursor-pointer items-center justify-center px-4 focus:outline-none lg:top-0 lg:h-full"
@@ -106,14 +106,15 @@ parseQuery();
       </button>
     </div>
     <Teleport v-if="mounted" to="#menu-target">
-      <div class="flex flex-row">
-        <div class="mr-3 max-w-[200px] truncate leading-8">
+      <div class="flex flex-row lg:flex-wrap gap-2">
+        <div class="max-w-[200px] truncate leading-8">
           {{ book?.name }}
         </div>
-        <div class="mr-3 whitespace-nowrap leading-8">
+        <div class="whitespace-nowrap leading-8">
           {{ currentImageIndex + 1 }}/{{ totalImages }}
         </div>
-        <button class="btn-header-green mr-2 hidden sm:block" @click.passive="autoTurnPage">
+        <div class="flex items-center gap-2">
+        <button class="btn-header-green hidden sm:block p-1.5" @click.passive="autoTurnPage">
           Auto {{ autoTurnPAgeON ? 'ON' : 'OFF' }}
         </button>
         <input
@@ -125,6 +126,7 @@ parseQuery();
           <option v-for="(item, index) in PLAYER_INTERVALS" :key="index" :value="item" />
         </datalist>
       </div>
+      </div>
     </Teleport>
   </main>
 </template>
diff --git a/src/views/BookEdit.vue b/src/views/BookEdit.vue
@@ -50,7 +50,7 @@ const imageCoverList = computed(() => {
 			})
 		: [];
 });
-/* const getMediaUrl = computed(() => {
+const getMediaUrl = computed(() => {
 	if (!media.value) return '';
 	if (media.value instanceof Blob) {
 		return window.URL.createObjectURL(media.value);
@@ -59,7 +59,7 @@ const imageCoverList = computed(() => {
 			? `/${media.value.path}/${media.value.file_name}`
 			: `${import.meta.env.VITE_BACKEND_URL}/${media.value.path}/${media.value.file_name}`;
 	}
-}); */
+});
 
 watch(routeName, (newValue, oldValue) => {
 	if (newValue === 'book-create' && oldValue === 'book-update') location.reload();
@@ -414,27 +414,27 @@ onMounted(async () => {
           </li>
         </ol>
       </div>
-      <!-- <div v-if="media && media instanceof Blob">
-				<video
-					v-if="media.file_name.includes('.mp4')"
-					loop
-					autoplay
-					muted
-					:src="getMediaUrl"
-					class="max-w-sm max-h-80 fixed top-[calc(50%_-_120px)] left-10 z-20 rounded-md" />
-				<img
-					v-else
-					:src="getMediaUrl"
-					class="max-w-sm max-h-80 fixed top-[calc(50%_-_120px)] left-10 z-20 rounded-md"
-					onerror="this.onerror=null;this.src = '/images/unknownImage.webp'" />
-			</div> -->
+      <div v-if="media">
+        <video
+          v-if="getMediaUrl.includes('.mp4')"
+          loop
+          autoplay
+          muted
+          :src="getMediaUrl"
+          class="fixed left-10 top-[calc(50%_-_120px)] z-20 max-h-80 max-w-sm rounded-md" />
+        <img
+          v-else
+          :src="getMediaUrl"
+          class="fixed left-10 top-[calc(50%_-_120px)] z-20 max-h-80 max-w-sm rounded-md"
+          onerror="this.onerror=null;this.src = '/images/unknownImage.webp'">
+      </div>
     </div>
     <form id="Book" name="Book" @submit.prevent="saveBook" />
     <Teleport
       v-if="mounted"
       to="#menu-target">
       <button
-        class="nav-btn flex items-center gap-2 border hover:bg-gray-600"
+        class="nav-btn flex items-center gap-2 border text-white hover:bg-blue-500 dark:hover:bg-gray-600"
         :class="{ 'w-full px-2 py-1': !sidebarCollapsed, 'w-fit p-0.5': sidebarCollapsed }"
         @click.prevent="typo">
         <svg
@@ -448,7 +448,7 @@ onMounted(async () => {
       <button
         form="Book"
         type="submit"
-        class="nav-btn flex items-center gap-2 border hover:bg-gray-600"
+        class="nav-btn flex items-center gap-2 border text-white hover:bg-blue-500 dark:hover:bg-gray-600"
         :class="{ 'w-full px-2 py-1': !sidebarCollapsed, 'w-fit p-0.5': sidebarCollapsed }">
         <svg
           v-if="!sidebarCollapsed || !loading"

diff --git a/src/views/BookText.vue b/src/views/BookText.vue
@@ -253,7 +253,7 @@ onBeforeUnmount(() => {
       </div>
     </div>
     <Teleport v-if="mounted && book" to="#menu-target">
-      <div class="flex items-center gap-1">
+      <div class="flex items-center gap-1 text-white">
         <div class="max-w-52 truncate whitespace-nowrap lg:max-w-40">
           {{ book.name }}
         </div>
@@ -264,7 +264,7 @@ onBeforeUnmount(() => {
         @click="classicMode = !classicMode">
         {{ classicMode ? 'Classic' : 'Scroll' }}
       </button>
-      <div>
+      <div class="text-white">
         <div v-if="classicMode">
           {{ page }}/{{ pageCount }}
         </div>
@@ -273,7 +273,7 @@ onBeforeUnmount(() => {
         </div>
       </div>
       <ol v-if="!isSmallDevice()">
-        <li v-for="(chapter, index) in headerChapters" :key="index" class="sidebar-link px-0">
+        <li v-for="(chapter, index) in headerChapters" :key="index" class="sidebar-link px-0 text-white">
           <a :href="`#${chapter.url}`">
             {{ chapter.shortName }}
           </a>

diff --git a/src/views/SeriesTable.vue b/src/views/SeriesTable.vue
@@ -53,7 +53,7 @@ getSeries();
   <main class="">
     <Teleport v-if="mounted" to="#menu-target">
       <button
-        class="nav-btn flex items-center border px-2 py-1 hover:bg-gray-600"
+        class="nav-btn flex items-center border px-2 py-1 text-white hover:bg-blue-500 dark:hover:bg-gray-600"
         :class="{ 'w-full': !sidebarCollapsed, 'w-fit': sidebarCollapsed }"
         @click.passive="startCreateSeries">
         <svg