wip #1051 @1

diff --git a/style/widget.css b/style/widget.css
new file mode 100644 (file)
index 0000000..1022689
--- /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 d4a39ded39550b17dddd8a8fee7292e1a168fc3c..db2b676c815eeb8b69224f4eab121a0972c42476 100644 (file)
--- a/style/widget.less
+++ b/style/widget.less
@@ -10,6 +10,7 @@ body{
        display:none;\r
 }\r
 \r
+\r
 #widget{\r
        position:absolute;\r
        top:0px; \r