From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 28 Aug 2017 16:19:49 +0000 (+0200)
Subject: wip #1466 @6
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=2e594f68d16efefc1bb181652621d9c0a0617c5a;p=fluidbook-html5.git

wip #1466 @6
---

diff --git a/_index.html b/_index.html
index f3b168db..2282f71b 100644
--- a/_index.html
+++ b/_index.html
@@ -36,8 +36,10 @@
 	<div id="z" class="nozoom">
 		<div id="fluidbook">
 			<div id="shadow">
-				<div class="left"></div>
-				<div class="right"></div>
+				<div class="edge left"></div>
+				<div class="edge right"></div>
+				<div class="shadow left"></div>
+				<div class="shadow right"></div>
 			</div>
 			<div id="pagesnumbers">
 				<div class="left"></div>
diff --git a/images/book-shadow-left.png b/images/book-shadow-left.png
new file mode 100644
index 00000000..bd7456c2
Binary files /dev/null and b/images/book-shadow-left.png differ
diff --git a/images/book-shadow-right.png b/images/book-shadow-right.png
new file mode 100644
index 00000000..18ca0584
Binary files /dev/null and b/images/book-shadow-right.png differ
diff --git a/images/edge-left.png b/images/edge-left.png
new file mode 100644
index 00000000..f3884b60
Binary files /dev/null and b/images/edge-left.png differ
diff --git a/images/edge-right.png b/images/edge-right.png
new file mode 100644
index 00000000..166475b4
Binary files /dev/null and b/images/edge-right.png differ
diff --git a/images/mask.png b/images/mask.png
new file mode 100644
index 00000000..9899e53a
Binary files /dev/null and b/images/mask.png differ
diff --git a/images/shadeleft-reflet.png b/images/shadeleft-reflet.png
deleted file mode 100644
index b41f888d..00000000
Binary files a/images/shadeleft-reflet.png and /dev/null differ
diff --git a/images/shadeleft.png b/images/shadeleft.png
index 98fcac06..8b593d9f 100644
Binary files a/images/shadeleft.png and b/images/shadeleft.png differ
diff --git a/images/shaderight-reflet.png b/images/shaderight-reflet.png
deleted file mode 100644
index 7b5dd6ef..00000000
Binary files a/images/shaderight-reflet.png and /dev/null differ
diff --git a/images/shaderight.png b/images/shaderight.png
index 49a0e678..5c7733d2 100644
Binary files a/images/shaderight.png and b/images/shaderight.png differ
diff --git a/style/book-variables.less b/style/book-variables.less
index 4f30ae2d..e0bb3ded 100644
--- a/style/book-variables.less
+++ b/style/book-variables.less
@@ -1,2 +1,4 @@
 @menu-background: #404b5f;
 @menu-text: #fff;
+@book-page-width:1024px;
+@book-page-height:1024px;
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 00b5955a..f448c2ee 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -247,6 +247,17 @@ body, html {
 
 #currentDoublePage {
 	pointer-events: none;
+	//mask-image: url("../images/mask.png");
+	//mask-image: url("../images/mask.png");
+	//mask-size: 100% 100%;
+	//-webkit-mask-size: 100% 100%;
+}
+
+#nextDoublePage {
+	//-webkit-mask-image: url("../images/mask.png");
+	//mask-image: url("../images/mask.png");
+	//-webkit-mask-size: 200% 100%;
+	//mask-size: 200% 100%;
 }
 
 .page {
@@ -303,7 +314,7 @@ body, html {
 	position: absolute;
 	top: 0px;
 	left: 0px;
-	z-index:3;
+	z-index: 3;
 	.highlight {
 		position: absolute;
 		border-width: 2px;
@@ -327,8 +338,6 @@ body, html {
 	}
 }
 
-
-
 // Fix for #1489
 
 .chrome.desktop {
@@ -346,35 +355,81 @@ body, html {
 	}
 
 	.page {
-		-webkit-transform: translateZ(0);
-		-o-transform: translateZ(0);
-		-ms-transform: translateZ(0);
-		transform: translateZ(0);
-		-moz-transform: translateZ(0);
+		//-webkit-transform: translateZ(0);
+		//-o-transform: translateZ(0);
+		//-ms-transform: translateZ(0);
+		//transform: translateZ(0);
+		//-moz-transform: translateZ(0);
 	}
 }
 
 /* Shadow */
+
+@shadow-height: 180px;
+@shadow-offset: 40px;
 #shadow {
 	position: absolute;
 	top: 0px;
 	left: 0px;
+	width: unit(@book-page-width*2, px);
+	height: unit(@book-page-height, px);
 	/* !!!!!!!!!!! non !!!!!!!!!!!!!!!!!
 	-webkit-transform: translateZ(0);
 	 -moz-transform: translateZ(0);
 	 -ms-transform: translateZ(0);
 	 -o-transform: translateZ(0);
 	 transform: translateZ(0);*/
-}
 
-#shadow > div {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-}
+	> .shadow {
+		position: absolute;
+		bottom: -@shadow-height+@shadow-offset;
+		left: 0px;
+		background-image: url("../images/book-shadow-left.png");
+		background-size: 100% @shadow-height;
+		width: @book-page-width;
+		height: @shadow-height;
 
-.portrait #shadow > div.right {
-	display: none;
+		&.right {
+			display: none;
+			background-image: url("../images/book-shadow-right.png");
+
+			.landscape & {
+				left: @book-page-width;
+			}
+		}
+	}
+
+	> .edge {
+
+		position: absolute;
+		top: 0;
+
+		&.right {
+			@right-edge-width: 48px;
+			@right-edge-bottom-offset: 45px;
+
+			right: -@right-edge-width;
+			width: @right-edge-width;
+			height: @book-page-height+@right-edge-bottom-offset;
+			background-image: url("../images/edge-right.png");
+			background-repeat: no-repeat;
+			background-size: @right-edge-width unit(@book-page-height + @right-edge-bottom-offset, px);
+			background-position: 0 5px;
+		}
+
+		&.left {
+			@left-edge-width: 9px;
+			@left-edge-bottom-offset: 0px;
+
+			left: -@left-edge-width;
+			width: @left-edge-width;
+			height: @book-page-height + @left-edge-bottom-offset;
+			background-image: url("../images/edge-left.png");
+			background-repeat: no-repeat;
+			background-size: @left-edge-width unit(@book-page-height + @left-edge-bottom-offset, px);
+			background-position: 0 0;
+		}
+	}
 }
 
 /* Nav */