#fluidbook-html5 : New arrows

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 0152036d3d2fe49529953470d6962097f5dcb765..8ca243d08fc173bc8f45715a529f73c518a3645b 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -80,6 +80,13 @@ Fluidbook.prototype = {
         if (!this.support.isMobile) {
             this.desktop = new FluidbookDesktop(this);
         }
+        this.initTheme();
+    },
+    initTheme: function ()
+    {
+        if(this.datas.arrowsTheme){
+            $('html').addClass('sharp');
+        }
         this.initLoading();
     },
     initLoading: function () {

diff --git a/style/fluidbook.css b/style/fluidbook.css
index b6390898cce4516152a2452190cfae63efd1487d..15b7f7ac4b716101473ec3002117f3f5a060329b 100644 (file)
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -310,6 +310,12 @@ body {
   z-index: 21;
   background-size: 40px 100px;
 }
+.sharp #next,
+.sharp #previous {
+  width: 53px;
+  height: 107px;
+  background-size: 53px 107px;
+}
 #next,
 #previous,
 #down,
@@ -334,41 +340,47 @@ body {
   opacity: 0;
   cursor: default;
 }
+.rtl #previous,
 .ltr #next {
   background-image: url("../data/images/interface-next.svg");
   right: 0px;
   border-top-left-radius: 7px;
   border-bottom-left-radius: 7px;
 }
+.rtl #next,
 .ltr #previous {
   background-image: url("../data/images/interface-previous.svg");
   left: 0px;
   border-top-right-radius: 7px;
   border-bottom-right-radius: 7px;
 }
-.rtl #previous {
-  background-image: url("../data/images/interface-next.svg");
-  right: 0px;
-  border-top-left-radius: 7px;
-  border-bottom-left-radius: 7px;
-}
-.rtl #next {
-  background-image: url("../data/images/interface-previous.svg");
-  left: 0px;
-  border-top-right-radius: 7px;
-  border-bottom-right-radius: 7px;
+.sharp.rtl #previous,
+.sharp.ltr #next {
+  background-image: url("../data/images/interface-sharp-next.svg");
+  border-top-left-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
-.rtl.no-svg #next {
-  background-image: url("../data/images/interface-next.png");
+.sharp.rtl #next,
+.sharp.ltr #previous {
+  background-image: url("../data/images/interface-sharp-previous.svg");
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
 }
-.rtl.no-svg #previous {
+.no-svg.rtl #next,
+.no-svg.ltr #previous {
   background-image: url("../data/images/interface-previous.png");
 }
-.rtl.no-svg #previous {
+.no-svg.rtl #previous,
+.no-svg.ltr #next {
   background-image: url("../data/images/interface-next.png");
 }
-.rtl.no-svg #next {
-  background-image: url("../data/images/interface-previous.png");
+.no-svg.sharp.rtl #next,
+.no-svg.sharp.ltr #previous {
+  background-image: url("../data/images/interface-sharp-previous.png");
+}
+.no-svg.sharp.rtl #previous,
+.no-svg.sharp.ltr #next {
+  background-image: url("../data/images/interface-sharp-next.png");
 }
 /* Header */
 header {
@@ -889,6 +901,12 @@ ul.chapters.shareList a.level0 img {
   right: 40px;
   top: 340px;
 }
+.sharp .ltr #helpView .interface .next,
+.sharp .ltr #helpView .interface .last,
+.sharp .rtl #helpView .interface .first,
+.sharp .rtl #helpView .interface .previous {
+  right: 53px;
+}
 .ltr #helpView .interface .next:after,
 .ltr #helpView .interface .last:after,
 .rtl #helpView .interface .first:after,
@@ -908,6 +926,12 @@ ul.chapters.shareList a.level0 img {
   left: 40px;
   top: 340px;
 }
+.sharp .rtl #helpView .interface .next,
+.sharp .rtl #helpView .interface .last,
+.sharp .ltr #helpView .interface .first,
+.sharp .ltr #helpView .interface .previous {
+  left: 57px;
+}
 .rtl #helpView .interface .next:before,
 .rtl #helpView .interface .last:before,
 .ltr #helpView .interface .first:before,
@@ -924,6 +948,10 @@ ul.chapters.shareList a.level0 img {
 #helpView .interface .last {
   margin-top: 43px;
 }
+.sharp #helpView .interface .first,
+.sharp #helpView .interface .last {
+  margin-top: 40px;
+}
 #helpView .interface .next,
 #helpView .interface .previous {
   margin-top: -5px;

diff --git a/style/fluidbook.less b/style/fluidbook.less
index c11b28064fdebb2edd96a6aca88b7dbb979f7dc0..b930ceb8cfb5538a7a9f50e514834ed526f6bac4 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -352,6 +352,12 @@ body {
        opacity: 1;
        z-index: 21;
        background-size: 40px 100px;
+
+       .sharp & {
+               width: 53px;
+               height: 107px;
+               background-size: 53px 107px;
+       }
 }
 
 #next, #previous, #down, #splash {
@@ -377,48 +383,51 @@ body {
        cursor: default;
 }
 
-.ltr #next {
+.rtl #previous, .ltr #next {
        background-image: url("../data/images/interface-next.svg");
        right: 0px;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
 }
 
-.ltr #previous {
+.rtl #next, .ltr #previous {
        background-image: url("../data/images/interface-previous.svg");
        left: 0px;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
 }
 
-.rtl #previous {
-       background-image: url("../data/images/interface-next.svg");
-       right: 0px;
-       border-top-left-radius: 7px;
-       border-bottom-left-radius: 7px;
-}
-
-.rtl #next {
-       background-image: url("../data/images/interface-previous.svg");
-       left: 0px;
-       border-top-right-radius: 7px;
-       border-bottom-right-radius: 7px;
+.sharp {
+       &.rtl #previous, &.ltr #next {
+               background-image: url("../data/images/interface-sharp-next.svg");
+               border-top-left-radius: 1px;
+               border-bottom-left-radius: 1px;
+       }
+       &.rtl #next, &.ltr #previous {
+               background-image: url("../data/images/interface-sharp-previous.svg");
+               border-top-right-radius: 1px;
+               border-bottom-right-radius: 1px;
+       }
 }
 
-.rtl.no-svg #next {
-       background-image: url("../data/images/interface-next.png");
-}
+.no-svg {
+       &.rtl #next, &.ltr #previous {
+               background-image: url("../data/images/interface-previous.png");
+       }
 
-.rtl.no-svg #previous {
-       background-image: url("../data/images/interface-previous.png");
-}
+       &.rtl #previous, &.ltr #next {
+               background-image: url("../data/images/interface-next.png");
+       }
 
-.rtl.no-svg #previous {
-       background-image: url("../data/images/interface-next.png");
-}
+       &.sharp {
+               &.rtl #next, &.ltr #previous {
+                       background-image: url("../data/images/interface-sharp-previous.png");
+               }
 
-.rtl.no-svg #next {
-       background-image: url("../data/images/interface-previous.png");
+               &.rtl #previous, &.ltr #next {
+                       background-image: url("../data/images/interface-sharp-next.png");
+               }
+       }
 }
 
 /* Header */
@@ -1045,6 +1054,15 @@ ul.chapters.shareList a.level0 img {
        top: 340px;
 }
 
+&.sharp {
+       .ltr #helpView .interface .next,
+       .ltr #helpView .interface .last,
+       .rtl #helpView .interface .first,
+       .rtl #helpView .interface .previous {
+               right: 53px;
+       }
+}
+
 .ltr #helpView .interface .next:after,
 .ltr #helpView .interface .last:after,
 .rtl #helpView .interface .first:after,
@@ -1066,6 +1084,15 @@ ul.chapters.shareList a.level0 img {
        top: 340px;
 }
 
+.sharp {
+       .rtl #helpView .interface .next,
+       .rtl #helpView .interface .last,
+       .ltr #helpView .interface .first,
+       .ltr #helpView .interface .previous {
+               left: 57px;
+       }
+}
+
 .rtl #helpView .interface .next:before,
 .rtl #helpView .interface .last:before,
 .ltr #helpView .interface .first:before,
@@ -1082,6 +1109,10 @@ ul.chapters.shareList a.level0 img {
 #helpView .interface .first,
 #helpView .interface .last {
        margin-top: 43px;
+
+       .sharp & {
+               margin-top: 40px;
+       }
 }
 
 #helpView .interface .next,