feat: update styles

spa/src/components/FullScreenImageViewer.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="fixed z-200 top-0 inset-0 flex justify-center align-center flex-col h-full bg-black">
+  <div class="fullscreen-image-viewer fixed z-200 top-0 inset-0 flex justify-center align-center flex-col h-full bg-black">
     <Swiper
         :zoom="true"
         :navigation="true"
         :pagination="{
-      type: 'fraction',
-    }"
+          type: 'fraction',
+        }"
         :activeIndex="activeIndex"
         :modules="[Zoom, Navigation, Pagination]"
         class="mySwiper w-full h-full"
@@ -13,7 +13,7 @@
     >
       <SwiperSlide v-for="image in images">
         <div class="swiper-zoom-container">
-          <img :src="image.largeURL" :alt="image.alt"/>
+          <img :src="image.largeURL" :alt="image.alt" class="w-full h-full"/>
         </div>
       </SwiperSlide>
     </Swiper>
@@ -65,3 +65,15 @@ function onClose() {
   emits('close');
 }
 </script>
+
+<style>
+.fullscreen-image-viewer .swiper-button-next,
+.fullscreen-image-viewer .swiper-button-prev {
+  color: white;
+  mix-blend-mode: difference;
+}
+
+.fullscreen-image-viewer .swiper-pagination-fraction {
+  bottom: calc(var(--tg-safe-area-inset-bottom, 0) + var(--tg-content-safe-area-inset-bottom, 0));
+}
+</style>