Changing index background, removing blur effect #88

src/scss/_color.scss

@@ -780,7 +780,7 @@ Slides (Counter/Arrows)
 }
 
 #webslides:hover #navigation a:hover {
-  background-color: rgba($black, .9);
+  background-color: $index-overlay;
   color: $white;
 }
 
@@ -794,6 +794,10 @@ footer[role='contentinfo'] {
 /*============================
 Slides Index
 ============================== */
+#webslides-zoomed {
+  background: $index-overlay;
+}
+
 #webslides-zoomed .column > .wrap-zoom {
   background-color: $catskill-white;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .04);
@@ -804,7 +808,7 @@ Slides Index
   }
 
   &.current {
-    border: 3px double rgba(0, 20, 280, .2);
+    border: .6rem solid rgba(0, 20, 280, .2);
   }
 }
 

src/scss/_vars.scss

@@ -59,3 +59,4 @@ $link-color-secondary: $cardinal !default;
 $link-hover: $dodger-blue !default;
 $hr-bg: radial-gradient(ellipse at center, rgba(0, 20, 80, .2) 0, rgba(255, 255, 255, 0) 75%) !default;
 $current-zoomed-slide-shadow: 0 0 7px rgba(0, 187, 255, .5);
+$index-overlay: rgba(0, 10, 40, .8);

src/scss/modules/_zoom.scss

@@ -5,7 +5,6 @@
 #webslides-zoomed {
   align-content: flex-start;
   align-items: flex-start;
-  background: transparent;
   flex-direction: row;
   justify-content: flex-start;
   min-height: 100vh;
@@ -59,6 +58,7 @@
     }
 
     > .wrap-zoom {
+      border-radius: .3rem;
       display: inline-block;
       height: 25vh;
       overflow: hidden;
@@ -145,7 +145,10 @@
   }
 
   &.disabled {
+    /*
     filter: blur(10px);
+    transform: scale(1.1);
+    */
     /* Blur makes scroll no accesible */
     width: calc(100% - 10px);
   }