done #1730 @0.25

diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index 1e7551375e71af800a32bd24a48a13c162a00671..a169c6320420ccf44f02d591afe4eaf319c59a93 100644 (file)
--- 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 1abc5121d02966715fcdacb615a3ec36799debcd..3cffe95b1b67d29aa51e86086e2214f69aeef5c5 100644 (file)
--- 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 {