From b99ce65d402cdc1609959213e3e344e8d4096026 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 5 Oct 2017 19:03:41 +0200
Subject: [PATCH] done #1730 @0.25

---
 js/libs/fluidbook/fluidbook.zoom.js |  7 +++++--
 style/fluidbook.less                | 18 +++++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index 1e755137..a169c632 100644
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -160,21 +160,24 @@ FluidbookZoom.prototype = {
             animation.origin = ['50%', '50%'];
         }
 
-        var hiddenElements = $("header,footer,#interface,#links a.bookmark,#shadow");
+        var hiddenElements = $("header,footer,#interface,#links a.bookmark");
 
         if (this.zoom != 1) {
-
             this.fluidbook.help.hide(); // Hide the help view if it's showing
+            $("#shadow").hide();
 
             if (!$('header').hasClass('hidden')) {
                 $(hiddenElements).addClass('hidden');
                 this.hideInterfaceTimeout = setTimeout(function () {
                     $(hiddenElements).hide();
+                    $("#shadow").addClass('hidden');
                 }, 500);
             }
         } else {
+
             clearTimeout(this.hideInterfaceTimeout);
             $(hiddenElements).show().removeClass('hidden');
+            $("#shadow").show().removeClass('hidden');
         }
         $("#z").transform(animation, {preserve: true});
         $this.triggerEvent(((this.zoom == 1) ? 'out' : 'in') + '.start');
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 1abc5121..3cffe95b 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -881,11 +881,13 @@ footer, header, #interface {
 }
 
 #shadow {
-	-moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out, opacity 400ms ease-in, visibility 400ms ease-in;
-	-webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out, opacity 400ms ease-in, visibility 400ms ease-in;
-	-o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out, opacity 400ms ease-in, visibility 400ms ease-in;
-	-ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out, opacity 400ms ease-in, visibility 400ms ease-in;
-	transition: transform @zoomtransition ease-out, opacity 400ms ease-in, visibility 400ms ease-in;
+	@shadow-zoom-transition: 400ms;
+
+	-moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out, opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in;
+	-webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out, opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in;
+	-o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out, opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in;
+	-ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out, opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in;
+	transition: transform @zoomtransition ease-out, opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in;
 
 	&.animate {
 		-moz-transition: all @zoomtransition ease-out;
@@ -895,6 +897,12 @@ footer, header, #interface {
 		transition: all @zoomtransition ease-out;
 	}
 
+	&.hidden {
+		visibility: hidden;
+		opacity: 0;
+		z-index: 0;
+	}
+
 }
 
 a.bookmark {
-- 
2.39.5