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);
   }

static/css/webslides.css

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.3.1
- * Date: 2017-07-28
+ * Date: 2017-08-01
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2879,7 +2879,6 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
-  background: transparent;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
@@ -2929,6 +2928,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
       #webslides-zoomed > .wrap > .grid > .column {
         width: 100%; } }
     #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
+      border-radius: .3rem;
       display: inline-block;
       height: 25vh;
       overflow: hidden;
@@ -3005,8 +3005,10 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
     width: 100%;
     z-index: 0; }
   #webslides.disabled {
-    -webkit-filter: blur(10px);
+    /*
     filter: blur(10px);
+    transform: scale(1.1);
+    */
     /* Blur makes scroll no accesible */
     width: calc(100% - 10px); }
 
@@ -3754,7 +3756,7 @@ Slides (Counter/Arrows)
   color: #abc; }
 
 #webslides:hover #navigation a:hover {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(0, 10, 40, 0.8);
   color: #fff; }
 
 /*============================
@@ -3766,6 +3768,9 @@ footer[role='contentinfo'] {
 /*============================
 Slides Index
 ============================== */
+#webslides-zoomed {
+  background: rgba(0, 10, 40, 0.8); }
+
 #webslides-zoomed .column > .wrap-zoom {
   background-color: #f7f9fb;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
@@ -3775,7 +3780,7 @@ Slides Index
     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); }
   #webslides-zoomed .column > .wrap-zoom.current {
-    border: 3px double rgba(0, 20, 255, 0.2); }
+    border: 0.6rem solid rgba(0, 20, 255, 0.2); }
 
 .text-slide-number {
   color: #abc; }

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.3.1
- * Date: 2017-07-28
+ * Date: 2017-08-01
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros

static/js/webslides.min.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.3.1
- * Date: 2017-07-28
+ * Date: 2017-08-01
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros