From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 22 Dec 2016 15:11:48 +0000 (+0100)
Subject: wip #1051 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=66e3562494c035e0664d24b56b0d351b76b1657d;p=fluidbook-html5.git

wip #1051 @1
---

diff --git a/style/widget.css b/style/widget.css
new file mode 100644
index 00000000..10226897
--- /dev/null
+++ b/style/widget.css
@@ -0,0 +1,138 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  overflow: hidden;
+  cursor: pointer;
+}
+#container {
+  overflow: hidden;
+  display: none;
+}
+#widget {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.p {
+  display: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.p > img {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.p .shade img {
+  position: absolute;
+  top: 0px;
+}
+.p.left .shade img {
+  right: 0px;
+}
+.p.right .shade img {
+  left: 0px;
+}
+.shade img {
+  display: block;
+  position: relative;
+  z-index: 4;
+}
+#currentDoublePage,
+#nextDoublePage {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+#nextDoublePage {
+  z-index: 3;
+}
+#widget {
+  perspective: 5000px;
+  -moz-perspective: 5000px;
+  -webkit-perspective: 5000px;
+  -o-perspective: 5000px;
+  -ms-perspective: 5000px;
+  perspective-origin: 50% 75%;
+  -moz-perspective-origin: 50% 75%;
+  -webkit-perspective-origin: 50% 75%;
+  -ms-perspective-origin: 50% 75%;
+  -o-perspective-origin: 50% 75%;
+}
+#nextDoublePage._3d {
+  overflow: visible;
+  z-index: 100;
+  transition: all 1s ease-out;
+  -moz-transition: all 1s ease-out;
+  -webkit-transition: all 1s ease-out;
+  -o-transition: all 1s ease-out;
+  -ms-transition: all 1s ease-out;
+  transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+}
+#nextDoublePage._3d .p {
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  left: 0px !important;
+}
+#nextDoublePage._3d .right {
+  transform: rotate3d(0, 1, 0, 0deg);
+  -moz-transform: rotateY(0deg) translate3d(0, 0, 0);
+  -webkit-transform: rotate3d(0, 1, 0, 0deg);
+  -o-transform: rotate3d(0, 1, 0, 0deg);
+  -ms-transform: rotate3d(0, 1, 0, 0deg);
+}
+#nextDoublePage._3d .left {
+  transform: rotate3d(0, 1, 0, 180deg);
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+  -webkit-transform: rotate3d(0, 1, 0, 180deg);
+  -o-transform: rotate3d(0, 1, 0, 180deg);
+  -ms-transform: rotate3d(0, 1, 0, 180deg);
+}
+#nextDoublePage._3d.nextstart {
+  transform: rotate3d(0, 1, 0, 360deg);
+  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+  -webkit-transform: rotate3d(0, 1, 0, 360deg);
+  -o-transform: rotate3d(0, 1, 0, 360deg);
+  -ms-transform: rotate3d(0, 1, 0, 360deg);
+  transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+}
+#nextDoublePage._3d.nextend {
+  transform: rotate3d(0, 1, 0, 180deg);
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+  -webkit-transform: rotate3d(0, 1, 0, 180deg);
+  -o-transform: rotate3d(0, 1, 0, 180deg);
+  -ms-transform: rotate3d(0, 1, 0, 180deg);
+}
+#nextDoublePage._3d.prevstart {
+  transform: rotate3d(0, 1, 0, 180deg);
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+  -webkit-transform: rotate3d(0, 1, 0, 180deg);
+  -o-transform: rotate3d(0, 1, 0, 180deg);
+  -ms-transform: rotate3d(0, 1, 0, 180deg);
+  transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+}
+#nextDoublePage._3d.prevend {
+  transform: rotate3d(0, 1, 0, 360deg);
+  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+  -webkit-transform: rotate3d(0, 1, 0, 360deg);
+  -o-transform: rotate3d(0, 1, 0, 360deg);
+  -ms-transform: rotate3d(0, 1, 0, 360deg);
+}
diff --git a/style/widget.less b/style/widget.less
index d4a39ded..db2b676c 100644
--- a/style/widget.less
+++ b/style/widget.less
@@ -10,6 +10,7 @@ body{
 	display:none;
 }
 
+
 #widget{
 	position:absolute;
 	top:0px;