wip #3869 @1

diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js
index fc157893002145a9b6553ba25cc8f04c5b777392..16d32547e0557b7179934d3314bb84bd7f652f15 100644 (file)
--- a/js/libs/fluidbook/fluidbook.background.js
+++ b/js/libs/fluidbook/fluidbook.background.js
@@ -18,7 +18,7 @@ FluidbookBackground.prototype = {
 
         if (Object.keys(this.fluidbook.settings.dynamicBackgroundColor).length > 0) {
             var $this = this;
-            $(this.fluidbook).on('fluidbook.page.change.end', function (e, page) {
+            $(this.fluidbook).on('fluidbook.page.change.start', function (e, page) {
                 var s = $this.fluidbook.settings.dynamicBackgroundColor[page];
                 var back = s[0];
                 var arrows = '';

diff --git a/style/fluidbook.less b/style/fluidbook.less
index a99fb1071e0a18ecd4eabc1cbead74c6c5648b82..674beca7968203fdd12d7402902d670ea4aae243 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -170,6 +170,15 @@ body, html {
   display: none;
 }
 
+/* Dynamic colors */
+#background {
+  .prop-transition(background-color, 1);
+}
+
+#next-arrows, #prev-arrows {
+  .prop-transition(color, 1);
+}
+
 /* Background */
 #background {
   position: absolute;
@@ -178,7 +187,6 @@ body, html {
   width: 100%;
   height: 100%;
   z-index: 0;
-  //transition: background-color 350ms;
 }
 
 #background .links {

diff --git a/style/mixins.less b/style/mixins.less
index 413162ae957ac0ab801719e54e99ce6aa8fd6b95..ce4e5a02bb05857a9e60f2ebaa0e8b88f96a0e2a 100644 (file)
--- a/style/mixins.less
+++ b/style/mixins.less
@@ -14,11 +14,15 @@
 }
 
 .page-transition(@factor) {
-  -moz-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
-  -webkit-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
-  -ms-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
-  -o-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
-  transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+  .prop-transition(all, @factor);
+}
+
+.prop-transition(@property,@factor) {
+  -moz-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
+  -webkit-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
+  -ms-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
+  -o-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
+  transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
 }
 
 .menu-color(@base-color) {
@@ -62,7 +66,7 @@
 }
 
 .button-hover() {
-  @dark:darken(@menu-button-background,7%);
+  @dark: darken(@menu-button-background, 7%);
   background-color: @menu-button-background;
   transition: background-color 250ms;