From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 14 Sep 2017 16:09:36 +0000 (+0200)
Subject: wip #1466 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d0edcfc19928d64b623e8aa3943284b43b1fa33a;p=fluidbook-html5.git

wip #1466 @4
---

diff --git a/_index.html b/_index.html
index 64e9ceaf..9084017d 100644
--- 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 65fe00ed..c99828e6 100644
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 2f35ed19..de859f52 100644
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
index 00000000..99e9f4cd
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 60784cb5..2326dfba 100644
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 f67d02a7..ec7783e9 100644
--- 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 5d5f1a10..eb262beb 100644
--- 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;