From: Vincent Vanwaelscappel Date: Wed, 13 Sep 2017 17:00:55 +0000 (+0200) Subject: wip #1466 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=971ca3b4e9b706c5b766679aa9edd98ab536ebc8;p=fluidbook-html5.git wip #1466 @4 --- diff --git a/_index.html b/_index.html index 9ef8bde6..64e9ceaf 100644 --- a/_index.html +++ b/_index.html @@ -29,6 +29,7 @@
+
@@ -42,8 +43,16 @@
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/images/edges/edge-left-bottom.png b/images/edges/edge-left-bottom.png new file mode 100644 index 00000000..496720ae 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 index 00000000..ff312db3 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 index 00000000..ba91a2ca 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 index f3884b60..00000000 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 index 00000000..36f58262 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 index 00000000..5d6756b9 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 index 00000000..4a48bf5e 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 index 166475b4..00000000 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 index 00000000..65fe00ed 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 index 00000000..2f35ed19 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 index 7a93d5da..00000000 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 3abd6592..60784cb5 100644 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 be7b32b3..5d5f1a10 100644 --- 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"); + } } } }