From 2c2fd3a0db7f8efcd2eabe809d0857e853054278 Mon Sep 17 00:00:00 2001
From: Luis <displaynone@gmail.com>
Date: Tue, 1 Aug 2017 17:44:49 +0200
Subject: [PATCH] Changing index background, removing blur effect #88

---
 src/scss/_color.scss        |  8 ++++++--
 src/scss/_vars.scss         |  1 +
 src/scss/modules/_zoom.scss |  5 ++++-
 static/css/webslides.css    | 17 +++++++++++------
 static/js/webslides.js      |  2 +-
 static/js/webslides.min.js  |  2 +-
 6 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/scss/_color.scss b/src/scss/_color.scss
index a430ca4..a5829ed 100644
--- a/src/scss/_color.scss
+++ b/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);
   }
 }
 
diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
index fea55d8..fa687b6 100644
--- a/src/scss/_vars.scss
+++ b/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);
diff --git a/src/scss/modules/_zoom.scss b/src/scss/modules/_zoom.scss
index 8370feb..d6f5d7e 100644
--- a/src/scss/modules/_zoom.scss
+++ b/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);
   }
diff --git a/static/css/webslides.css b/static/css/webslides.css
index 2c50ca8..241ba6c 100644
--- a/static/css/webslides.css
+++ b/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);
+    /*
+    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; }
diff --git a/static/js/webslides.js b/static/js/webslides.js
index d349aa7..1254bd1 100644
--- a/static/js/webslides.js
+++ b/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
diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js
index d384302..115dda1 100644
--- a/static/js/webslides.min.js
+++ b/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