wip #1466 @4

diff --git a/_index.html b/_index.html
index 64e9ceaf90921523109d84c153aaadf5d129019f..9084017dae9d4d1822c80b694948b0069bc690b7 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -27,9 +27,10 @@
        <div id="background">
 
                <div id="shadow">
-                       <div class="shadow left"></div>
-                       <div class="shadow right"></div>
-                       <div class="shadow side"></div>
+                       <div class="shadow bottom left"></div>
+                       <div class="shadow bottom right"></div>
+                       <div class="shadow side left"></div>
+                       <div class="shadow side right"></div>
                </div>
        </div>
        <header>

diff --git a/images/shadows/back/bottom-left.png b/images/shadows/back/bottom-left.png
index 65fe00ed22d6815187c60d164f7f27f521c6c2aa..c99828e6d8aa184e3cc1f67cdf3f601cb0b828e2 100644 (file)
Binary files a/images/shadows/back/bottom-left.png and b/images/shadows/back/bottom-left.png differ

diff --git a/images/shadows/back/bottom-right.png b/images/shadows/back/bottom-right.png
index 2f35ed1901c51343a19e32544352bf0239903634..de859f526bc24bfbdf6ee912aa80d2dae550f604 100644 (file)
Binary files a/images/shadows/back/bottom-right.png and b/images/shadows/back/bottom-right.png differ

diff --git a/images/shadows/back/left.png b/images/shadows/back/left.png
new file mode 100644 (file)
index 0000000..99e9f4c
Binary files /dev/null and b/images/shadows/back/left.png differ

diff --git a/images/shadows/back/right.png b/images/shadows/back/right.png
index 60784cb592bea4577ba858c98b626946bd250e91..2326dfba8673dd1e7bff3f84df5d99bade113513 100644 (file)
Binary files a/images/shadows/back/right.png and b/images/shadows/back/right.png differ

diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index f67d02a7eb4b23193456110bd91416f47c139ca3..ec7783e958c6782b7d05ac6496db85835a465dbf 100644 (file)
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -160,7 +160,7 @@ FluidbookZoom.prototype = {
             animation.origin = ['50%', '50%'];
         }
 
-        var hiddenElements = $("header,footer,#interface,#links a.bookmark");
+        var hiddenElements = $("header,footer,#interface,#links a.bookmark,#shadow");
 
         if (this.zoom != 1) {
             if (!$('header').hasClass('hidden')) {

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 5d5f1a10bd3fe3f1809a2c89dae4465447c77247..eb262beb0b1f97a1f7ed703198847224311131c3 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -344,10 +344,10 @@ body, html {
 
 /* Shadow */
 
-@shadow-height: 160px;
+@shadow-height: 120px;
 @shadow-offset: 0px;
 #shadow {
-       @shadow-width-left: @book-page-width;
+       @shadow-width-left: @book-page-width+12;
        @shadow-width-right: @book-page-width+12;
        position: absolute;
        top: 0px;
@@ -359,30 +359,47 @@ body, html {
 
        > .shadow {
                position: absolute;
-               bottom: -@shadow-height+@shadow-offset;
                left: 0;
-               background-image: url("../images/shadows/back/bottom-left.png");
-               background-size: 100% @shadow-height;
-               width: @shadow-width-left;
-               height: @shadow-height;
+               opacity: @shadow-opacity;
 
-               &.right {
-                       display: none;
-                       background-image: url("../images/shadows/back/bottom-right.png");
-                       width: @shadow-width-right;
+               &.bottom {
+                       bottom: -@shadow-height+@shadow-offset;
+                       background-size: 100% @shadow-height;
+                       height: @shadow-height;
+
+                       &.left {
+                               left: -12px;
+                               width: @shadow-width-left;
+                               background-image: url("../images/shadows/back/bottom-left.png");
+                       }
 
-                       .landscape & {
-                               left: @book-page-width;
+                       &.right {
+                               display: none;
+                               background-image: url("../images/shadows/back/bottom-right.png");
+                               width: @shadow-width-right;
+
+                               .landscape & {
+                                       left: @book-page-width;
+                               }
                        }
                }
 
                &.side {
-                       background-image: url("../images/shadows/back/right.png");
+
                        top: 0;
-                       left: unit(@book-page-width*2, px);
+                       width: 35px;
                        height: unit(@book-page-height, px);
                        background-size: 100% 100%;
-                       width: 52px;
+
+                       &.right {
+                               left: unit(@book-page-width*2, px);
+                               background-image: url("../images/shadows/back/right.png");
+                       }
+
+                       &.left {
+                               background-image: url("../images/shadows/back/left.png");
+                               left: -35px;
+                       }
 
                }
        }
@@ -612,7 +629,6 @@ body, html {
        -o-transition: none;
        -ms-transition: none;
        opacity: 1;
-
 }
 
 #next.hidden, #previous.hidden {
@@ -852,7 +868,7 @@ footer a {
 
 /* Fluidbook zooming */
 
-footer, header, #interface {
+footer, header, #interface, #shadow {
        -moz-transition: opacity 400ms ease-in, visibility 400ms ease-in;
        -webkit-transition: opacity 400ms ease-in, visibility 400ms ease-in;
        -o-transition: opacity 400ms ease-in, visibility 400ms ease-in;