wip #1466 @4

diff --git a/_index.html b/_index.html
index 9ef8bde65c326a079066ccb0236621e80365b657..64e9ceaf90921523109d84c153aaadf5d129019f 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -29,6 +29,7 @@
                <div id="shadow">
                        <div class="shadow left"></div>
                        <div class="shadow right"></div>
+                       <div class="shadow side"></div>
                </div>
        </div>
        <header>
@@ -42,8 +43,16 @@
        <div id="z" class="nozoom">
                <div id="fluidbook">
                        <div id="edges">
-                               <div class="edge left"></div>
-                               <div class="edge right"></div>
+                               <div class="edge left">
+                                       <div class="top"></div>
+                                       <div class="middle"></div>
+                                       <div class="bottom"></div>
+                               </div>
+                               <div class="edge right">
+                                       <div class="top"></div>
+                                       <div class="middle"></div>
+                                       <div class="bottom"></div>
+                               </div>
                        </div>
                        <div id="pagesnumbers">
                                <div class="left"></div>

diff --git a/images/edges/edge-left-bottom.png b/images/edges/edge-left-bottom.png
new file mode 100644 (file)
index 0000000..496720a
Binary files /dev/null and b/images/edges/edge-left-bottom.png differ

diff --git a/images/edges/edge-left-middle.png b/images/edges/edge-left-middle.png
new file mode 100644 (file)
index 0000000..ff312db
Binary files /dev/null and b/images/edges/edge-left-middle.png differ

diff --git a/images/edges/edge-left-top.png b/images/edges/edge-left-top.png
new file mode 100644 (file)
index 0000000..ba91a2c
Binary files /dev/null and b/images/edges/edge-left-top.png differ

diff --git a/images/edges/edge-left.png b/images/edges/edge-left.png
deleted file mode 100644 (file)
index f3884b6..0000000
Binary files a/images/edges/edge-left.png and /dev/null differ

diff --git a/images/edges/edge-right-bottom.png b/images/edges/edge-right-bottom.png
new file mode 100644 (file)
index 0000000..36f5826
Binary files /dev/null and b/images/edges/edge-right-bottom.png differ

diff --git a/images/edges/edge-right-middle.png b/images/edges/edge-right-middle.png
new file mode 100644 (file)
index 0000000..5d6756b
Binary files /dev/null and b/images/edges/edge-right-middle.png differ

diff --git a/images/edges/edge-right-top.png b/images/edges/edge-right-top.png
new file mode 100644 (file)
index 0000000..4a48bf5
Binary files /dev/null and b/images/edges/edge-right-top.png differ

diff --git a/images/edges/edge-right.png b/images/edges/edge-right.png
deleted file mode 100644 (file)
index 166475b..0000000
Binary files a/images/edges/edge-right.png and /dev/null differ

diff --git a/images/shadows/back/bottom-left.png b/images/shadows/back/bottom-left.png
new file mode 100644 (file)
index 0000000..65fe00e
Binary files /dev/null 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
new file mode 100644 (file)
index 0000000..2f35ed1
Binary files /dev/null and b/images/shadows/back/bottom-right.png differ

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

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

diff --git a/style/fluidbook.less b/style/fluidbook.less
index be7b32b30ca44139c754ae1918e973af19a302b7..5d5f1a10bd3fe3f1809a2c89dae4465447c77247 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -347,37 +347,44 @@ body, html {
 @shadow-height: 160px;
 @shadow-offset: 0px;
 #shadow {
+       @shadow-width-left: @book-page-width;
+       @shadow-width-right: @book-page-width+12;
        position: absolute;
        top: 0px;
        left: 0px;
-       width: unit(@book-page-width*2, px);
+       width: unit(@shadow-width-left+@shadow-width-right, px);
        height: unit(@book-page-height, px);
        pointer-events: none;
        mix-blend-mode: multiply;
-       /* !!!!!!!!!!! non !!!!!!!!!!!!!!!!!
-       -webkit-transform: translateZ(0);
-        -moz-transform: translateZ(0);
-        -ms-transform: translateZ(0);
-        -o-transform: translateZ(0);
-        transform: translateZ(0);*/
 
        > .shadow {
                position: absolute;
                bottom: -@shadow-height+@shadow-offset;
-               left: 0px;
-               background-image: url("../images/shadows/back/left.png");
+               left: 0;
+               background-image: url("../images/shadows/back/bottom-left.png");
                background-size: 100% @shadow-height;
-               width: @book-page-width;
+               width: @shadow-width-left;
                height: @shadow-height;
 
                &.right {
                        display: none;
-                       background-image: url("../images/shadows/back/right.png");
+                       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);
+                       height: unit(@book-page-height, px);
+                       background-size: 100% 100%;
+                       width: 52px;
+
+               }
        }
 }
 
@@ -389,33 +396,74 @@ body, html {
        height: unit(@book-page-height, px);
        pointer-events: none;
 
+       @edge-scale: 1;
+
        > .edge {
                position: absolute;
                top: 0;
-               &.right {
-                       @right-edge-width: 48px;
-                       @right-edge-bottom-offset: 45px;
+               height: 100%;
 
-                       right: -@right-edge-width;
-                       width: @right-edge-width;
-                       height: @book-page-height+@right-edge-bottom-offset;
-                       background-image: url("../images/edges/edge-right.png");
+               > div {
+                       background-size: 100% 100%;
+                       position: absolute;
                        background-repeat: no-repeat;
-                       background-size: @right-edge-width unit(@book-page-height + @right-edge-bottom-offset, px);
-                       background-position: 0 5px;
+               }
+
+               .top {
+                       top: 0;
+                       height: unit(12*@edge-scale, px);
+               }
+
+               .bottom {
+                       bottom: 0;
+                       height: unit(22*@edge-scale, px);
+               }
+
+               .middle {
+                       top: unit(12*@edge-scale, px);
+                       bottom: unit(22*@edge-scale, px);
                }
 
                &.left {
-                       @left-edge-width: 9px;
-                       @left-edge-bottom-offset: 0px;
+                       left: unit(-17*@edge-scale, px);
+                       width: unit(17*@edge-scale, px);
 
-                       left: -@left-edge-width;
-                       width: @left-edge-width;
-                       height: @book-page-height + @left-edge-bottom-offset;
-                       background-image: url("../images/edges/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;
+                       div {
+                               width: unit(17*@edge-scale, px);
+                       }
+
+                       .top {
+                               background-image: url("../images/edges/edge-left-top.png");
+                       }
+
+                       .bottom {
+                               background-image: url("../images/edges/edge-left-bottom.png");
+                       }
+
+                       .middle {
+                               background-image: url("../images/edges/edge-left-middle.png");
+                       }
+               }
+
+               &.right {
+                       right: unit(-11*@edge-scale, px);
+                       width: unit(11*@edge-scale, px);
+
+                       div {
+                               width: unit(11*@edge-scale, px);
+                       }
+
+                       .top {
+                               background-image: url("../images/edges/edge-right-top.png");
+                       }
+
+                       .bottom {
+                               background-image: url("../images/edges/edge-right-bottom.png");
+                       }
+
+                       .middle {
+                               background-image: url("../images/edges/edge-right-middle.png");
+                       }
                }
        }
 }