From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 5 Jul 2023 10:07:45 +0000 (+0200)
Subject: wait #5708 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=984e50d30296513b099eca3f72bb2f3ca1283dd5;p=fluidbook-html5.git

wait #5708 @0.5
---

diff --git a/style/flip3d.less b/style/flip3d.less
new file mode 100644
index 00000000..a6059059
--- /dev/null
+++ b/style/flip3d.less
@@ -0,0 +1,196 @@
+
+/* 3D Flip */
+
+#flip3dcontainer {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 12;
+  pointer-events: none;
+  display: none;
+  overflow: hidden;
+
+  canvas {
+    position: relative;
+    left: 0;
+  }
+}
+
+.ios #pages {
+  transform: translateZ(1);
+}
+
+/* 3D */
+
+#pages._3dtransition {
+  -moz-perspective-origin: 50% 75%;
+  -webkit-perspective-origin: 50% 75%;
+  -ms-perspective-origin: 50% 75%;
+  -o-perspective-origin: 50% 75%;
+  perspective-origin: 50% 75%;
+
+  @perspective: 5000px;
+
+  -moz-perspective: @perspective;
+  -webkit-perspective: @perspective;
+  -o-perspective: @perspective;
+  -ms-perspective: @perspective;
+  perspective: @perspective;
+
+  overflow: visible !important;
+
+  #nextDoublePage {
+    .page {
+      &.left {
+        .shade {
+          right: 0;
+          background-image: url("../images/shadows/pages/left.png");
+        }
+      }
+
+      &.right {
+        .shade {
+          left: 0;
+          background-image: url("../images/shadows/pages/right.png");
+        }
+      }
+
+      .shade {
+        position: absolute;
+        top: 0;
+        width: 25%;
+        height: 100%;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.doublePage._3d {
+  overflow: visible;
+  z-index: 100;
+
+  -moz-transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.doublePage._3dflip {
+  &.fwd {
+    .page.left {
+      opacity: 0;
+    }
+  }
+
+  &.bwd {
+    .page.right {
+      opacity: 0;
+    }
+  }
+}
+
+._3d .page {
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+
+  left: 0px !important;
+}
+
+.doublePage._3d .right {
+  -webkit-transform: rotate3d(0, 1, 0, 0deg);
+  -o-transform: rotate3d(0, 1, 0, 0deg);
+  -ms-transform: rotate3d(0, 1, 0, 0deg);
+  transform: rotate3d(0, 1, 0, 0deg);
+  -moz-transform: rotateY(0deg) translate3d(0, 0, 0);
+}
+
+.mozrotation .doublePage._3d .right {
+  -moz-transform: rotateY(0deg) translate3d(0, 0, 0);
+  transform: rotateY(0deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d .left {
+  -webkit-transform: rotate3d(0, 1, 0, 180deg);
+  -o-transform: rotate3d(0, 1, 0, 180deg);
+  -ms-transform: rotate3d(0, 1, 0, 180deg);
+  transform: rotate3d(0, 1, 0, 180deg);
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.mozrotation .doublePage._3d .left {
+  transform: rotateY(180deg) translate3d(0, 0, 0);
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d.nextstart {
+  -webkit-transform: rotate3d(0, 1, 0, 360deg);
+  -o-transform: rotate3d(0, 1, 0, 360deg);
+  -ms-transform: rotate3d(0, 1, 0, 360deg);
+  transform: rotate3d(0, 1, 0, 360deg);
+  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+
+  -moz-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+
+.mozrotation .doublePage._3d.nextstart {
+  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+  transform: rotateY(360deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d.nextend {
+  -webkit-transform: rotate3d(0, 1, 0, 180deg);
+  -o-transform: rotate3d(0, 1, 0, 180deg);
+  -ms-transform: rotate3d(0, 1, 0, 180deg);
+  transform: rotate3d(0, 1, 0, 180deg);
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.mozrotation .doublePage._3d.nextend {
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+  transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d.prevstart {
+  -webkit-transform: rotate3d(0, 1, 0, 180deg);
+  -o-transform: rotate3d(0, 1, 0, 180deg);
+  -ms-transform: rotate3d(0, 1, 0, 180deg);
+  transform: rotate3d(0, 1, 0, 180deg);
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+
+  -moz-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+
+.mozrotation .doublePage._3d.prevstart {
+  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+  transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d.prevend {
+
+  -webkit-transform: rotate3d(0, 1, 0, 360deg);
+  -o-transform: rotate3d(0, 1, 0, 360deg);
+  -ms-transform: rotate3d(0, 1, 0, 360deg);
+  transform: rotate3d(0, 1, 0, 360deg);
+  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+}
+
+.mozrotation .doublePage._3d.prevend {
+  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+  transform: rotateY(360deg) translate3d(0, 0, 0);
+}
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index e779ff0e..432d5ae2 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2517,205 +2517,7 @@ ul.chapters.shareList a.level0 .svg-icon {
   transition: none;
 }
 
-/* 3D Flip */
-
-#flip3dcontainer {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 12;
-  pointer-events: none;
-  display: none;
-  overflow: hidden;
-
-  canvas {
-    position: relative;
-    left: 0;
-  }
-}
-
-.ios #pages {
-  transform: translateZ(1);
-}
-
-/* 3D */
-
-#pages._3dtransition {
-  -moz-perspective-origin: 50% 75%;
-  -webkit-perspective-origin: 50% 75%;
-  -ms-perspective-origin: 50% 75%;
-  -o-perspective-origin: 50% 75%;
-  perspective-origin: 50% 75%;
-
-  @perspective: 5000px;
-
-  -moz-perspective: @perspective;
-  -webkit-perspective: @perspective;
-  -o-perspective: @perspective;
-  -ms-perspective: @perspective;
-  perspective: @perspective;
-
-  overflow: visible !important;
-
-  #nextDoublePage {
-    .page {
-      &.left {
-        .shade {
-          right: 0;
-          background-image: url("../images/shadows/pages/left.png");
-        }
-      }
-
-      &.right {
-        .shade {
-          left: 0;
-          background-image: url("../images/shadows/pages/right.png");
-        }
-      }
-
-      .shade {
-        position: absolute;
-        top: 0;
-        width: 25%;
-        height: 100%;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        pointer-events: none;
-      }
-    }
-  }
-}
-
-.doublePage._3d {
-  overflow: visible;
-  z-index: 100;
-
-  -moz-transform-style: preserve-3d;
-  -webkit-transform-style: preserve-3d;
-  -o-transform-style: preserve-3d;
-  -ms-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-}
-
-.doublePage._3dflip {
-  &.fwd {
-    .page.left {
-      opacity: 0;
-    }
-  }
-
-  &.bwd {
-    .page.right {
-      opacity: 0;
-    }
-  }
-}
-
-._3d .page {
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  -o-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  backface-visibility: hidden;
-
-  left: 0px !important;
-
-  .chrome & {
-    backface-visibility: visible;
-  }
-}
-
-.doublePage._3d .right {
-  -webkit-transform: rotate3d(0, 1, 0, 0deg);
-  -o-transform: rotate3d(0, 1, 0, 0deg);
-  -ms-transform: rotate3d(0, 1, 0, 0deg);
-  transform: rotate3d(0, 1, 0, 0deg);
-  -moz-transform: rotateY(0deg) translate3d(0, 0, 0);
-}
-
-.mozrotation .doublePage._3d .right {
-  -moz-transform: rotateY(0deg) translate3d(0, 0, 0);
-  transform: rotateY(0deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d .left {
-  -webkit-transform: rotate3d(0, 1, 0, 180deg);
-  -o-transform: rotate3d(0, 1, 0, 180deg);
-  -ms-transform: rotate3d(0, 1, 0, 180deg);
-  transform: rotate3d(0, 1, 0, 180deg);
-  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.mozrotation .doublePage._3d .left {
-  transform: rotateY(180deg) translate3d(0, 0, 0);
-  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d.nextstart {
-  -webkit-transform: rotate3d(0, 1, 0, 360deg);
-  -o-transform: rotate3d(0, 1, 0, 360deg);
-  -ms-transform: rotate3d(0, 1, 0, 360deg);
-  transform: rotate3d(0, 1, 0, 360deg);
-  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
-
-  -moz-transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
-  -o-transform-origin: 0 0;
-  -ms-transform-origin: 0 0;
-  transform-origin: 0 0;
-}
-
-.mozrotation .doublePage._3d.nextstart {
-  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
-  transform: rotateY(360deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d.nextend {
-  -webkit-transform: rotate3d(0, 1, 0, 180deg);
-  -o-transform: rotate3d(0, 1, 0, 180deg);
-  -ms-transform: rotate3d(0, 1, 0, 180deg);
-  transform: rotate3d(0, 1, 0, 180deg);
-  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.mozrotation .doublePage._3d.nextend {
-  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-  transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d.prevstart {
-  -webkit-transform: rotate3d(0, 1, 0, 180deg);
-  -o-transform: rotate3d(0, 1, 0, 180deg);
-  -ms-transform: rotate3d(0, 1, 0, 180deg);
-  transform: rotate3d(0, 1, 0, 180deg);
-  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-
-  -moz-transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
-  -o-transform-origin: 0 0;
-  -ms-transform-origin: 0 0;
-  transform-origin: 0 0;
-}
-
-.mozrotation .doublePage._3d.prevstart {
-  -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-  transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d.prevend {
-
-  -webkit-transform: rotate3d(0, 1, 0, 360deg);
-  -o-transform: rotate3d(0, 1, 0, 360deg);
-  -ms-transform: rotate3d(0, 1, 0, 360deg);
-  transform: rotate3d(0, 1, 0, 360deg);
-  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
-}
-
-.mozrotation .doublePage._3d.prevend {
-  -moz-transform: rotateY(360deg) translate3d(0, 0, 0);
-  transform: rotateY(360deg) translate3d(0, 0, 0);
-}
+@import "flip3d";
 
 #fontsLoader {
   position: absolute;