wip #1466 @6

diff --git a/_index.html b/_index.html
index f3b168db976d84b827a6190198ac88829130f4d6..2282f71b6f27a540b53115a65184c1b7a9a03f75 100644 (file)
--- 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 (file)
index 0000000..bd7456c
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 (file)
index 0000000..18ca058
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 (file)
index 0000000..f3884b6
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 (file)
index 0000000..166475b
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 (file)
index 0000000..9899e53
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 (file)
index b41f888..0000000
Binary files a/images/shadeleft-reflet.png and /dev/null differ

diff --git a/images/shadeleft.png b/images/shadeleft.png
index 98fcac06ad6b6acf8c348b50f1d5a0665a45de23..8b593d9f2546acc2b5896a59f0068e15e79b6448 100644 (file)
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 (file)
index 7b5dd6e..0000000
Binary files a/images/shaderight-reflet.png and /dev/null differ

diff --git a/images/shaderight.png b/images/shaderight.png
index 49a0e678107f938ca6b81f7f16b589255a8641d9..5c7733d290da9432bf50acd4b4e91d0a882b019c 100644 (file)
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 4f30ae2d4432b71f977bd545be062cd64f6fc096..e0bb3ded3dfd122629b2f42c1eeaee2d0f7eec9c 100644 (file)
--- 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 00b5955a700e325ed66f4e4003f403ee61ee5b1f..f448c2eeaae2feb69a1308ab5afe975b9147d867 100644 (file)
--- 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 */