From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 7 Sep 2020 18:01:34 +0000 (+0200)
Subject: wip #3869 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f51ac3d62be3d9ef236f8b443db7bea2fd0c1429;p=fluidbook-html5.git

wip #3869 @1
---

diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js
index fc157893..16d32547 100644
--- 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 a99fb107..674beca7 100644
--- 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 413162ae..ce4e5a02 100644
--- 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;