(style) - Adjust style for CarouselSwiper

Author: robinlopez

mobile/src/components/ui/CarouselSwiper.vue

@@ -33,22 +33,40 @@ const props = defineProps({
 .swiper {
   width: 100%;
   height: 500px;
+  padding-bottom: 38px;
   border-radius: 12px;
+  border: 1px solid var(--app-beige-line);
+  background: var(--app-grey-light);
   box-shadow: var(--app-shadow-light);
 
+  @media (prefers-color-scheme: dark) {
+    background: var(--app-dark-contrast);
+  }
+
   .callout {
     position: absolute;
     top: 0;
   }
 
   .swiper-zoom-container {
-    border-radius: 12px;
-    background: var(--app-white);
-    border: 1px solid var(--app-beige-line);
+    border-radius: 12px 12px 0 0;
+  }
+}
 
-    @media (prefers-color-scheme: dark) {
-      background: var(--app-dark-contrast);
-    }
+.swiper-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  bottom: 0 !important;
+  height: 38px;
+  background: var(--app-white);
+  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
+  border: none !important;
+  z-index: 0;
+
+  @media (prefers-color-scheme: dark) {
+    background: var(--app-light-contrast);
+    border: 4px solid var(--app-dark-contrast);
   }
 }
 
@@ -58,23 +76,28 @@ const props = defineProps({
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: 44px;
-  width: 44px;
+  height: 48px;
+  width: 48px;
   border-radius: 44px;
   background: var(--app-primary);
-  box-shadow: var(--app-shadow-light);
+  border: 4px solid var(--app-white);
 
   @media (prefers-color-scheme: dark) {
     background: var(--app-white);
-    border: 2px solid var(--app-dark-contrast);
+    border: 4px solid var(--app-light-contrast);
+  }
+
+  &:active {
+    transition: 140ms ease-in-out;
+    transform: scale(0.94) !important;
   }
 
   &:after {
     font-size: 20px !important;
     font-weight: bolder;
 
     @media (prefers-color-scheme: dark) {
-     color: var(--app-primary);
+      color: var(--app-primary);
     }
   }