lightbox and theme style edits

vue-theme/src/sss/_lightbox.sss

@@ -1,8 +1,11 @@
+@import './variables.sss'
+@import './theme.sss'
+
 .vel-fade
     &-enter-active, &-active
         transition: all 0.3s ease
     &-enter-from, &-leave-to
-        opacity: 0
+        opacity: 1
 
 .vel-img
     &-swiper
@@ -14,10 +17,10 @@
         position: absolute
         top: 50%
         transform: translate(-50% -50%)
-        transition: 0.3s linear
-        will-change: transform opacity
-    background-color: rgba(0, 0, 0, 0.7)
-    box-shadow: 0 5px 20px 2px rgba(0, 0, 0, 0.7)
+        /* transition: 0.3s linear */
+        /* will-change: transform opacity */
+    /* background-color: rgba(0, 0, 0, 0.7) */
+    box-shadow: 0.5px 0.5px 0.5px 0px rgb(0 0 0 / 30%)
     display: block
     max-height: 80vh
     max-width: 80vw
@@ -25,7 +28,7 @@
     transition: transform 0.3s ease-in-out
 
 .vel-modal
-    background: rgba(0, 0, 0, 0.5)
+    background: rgba(255, 255, 255, 0.9)
     bottom: 0
     left: 0
     margin: 0
@@ -33,13 +36,17 @@
     right: 0
     top: 0
     z-index: 10003
+    img
+        transition: none
+        &:hover
+            filter: grayscale(0%) brightness(100%)
 
 .vel-img, .vel-img-wrapper
     user-select: none
 
 .vel-btns-wrapper
     .btn__close, .btn__next, .btn__prev
-        color: #fff
+        color: $cia_black 
         cursor: pointer
         font-size: 32px
         opacity: 0.6
@@ -94,6 +101,7 @@
 
 .vel-modal.is-rtl .vel-img-title
     direction: rtl
+    display: block
 
 .vel-loading
     left: 50%
@@ -166,6 +174,7 @@
     width: 1em
 
 .vel-toolbar
+    display: none
     border-radius: 4px
     bottom: 8px
     display: flex
@@ -176,6 +185,7 @@
     position: absolute
     transform: translate(-50%)
     .toolbar-btn
+        display: none
         color: #fff
         cursor: pointer
         flex-shrink: 0
@@ -188,3 +198,8 @@
 .vel-toolbar, .vel-toolbar .toolbar-btn
     background-color: #2d2d2d
     user-select: none
+
+figcaption
+    position: inherit
+    background: none
+    color: $cia_black

vue-theme/src/sss/variables.sss

@@ -1,6 +1,6 @@
 @import './_ratios.sss'
 
-$transition: 500ms
+$transition: 300ms
 
 $min-width: 20em
 $max-width: 74em