wip #3757 @0.5

diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js
index 4685e12b8834486fb9b9c0f7ee58665e0c3d4c6f..6920a65403d5dea2066583eda6c31c1c360b4eda 100644 (file)
--- a/js/libs/fluidbook/fluidbook.keyboard.js
+++ b/js/libs/fluidbook/fluidbook.keyboard.js
@@ -161,13 +161,13 @@ FluidbookKeyboard.prototype = {
 
     initInterfaceShortcuts: function () {
         var $this = this;
-        this.keyShortcut('pageup,pagedown,home,end', function (e, handler) {
+        this.keyShortcut('pageup,pagedown,home,end,left,right', function (e, handler) {
             if ($this.fluidbook.zoom.zoom > 1) {
                 return;
             }
-            if (handler.key === 'pageup' || handler.key === 'pagedown') {
+            if (handler.key === 'pageup' || handler.key === 'pagedown' || handler.key === 'left' || handler.key === 'right') {
                 var dir = 'Next';
-                if (handler.key === 'pageup') {
+                if (handler.key === 'pageup' || handler.key === 'left') {
                     dir = 'Previous';
                 }
                 var func = 'go' + dir;

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 73feaabf73b0bd4a8fed4ae61e294adb29a002eb..a1cdf37f9755616ccbcc23c6ee47639df7ed7fc0 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1038,7 +1038,7 @@ a.bookmark {
           display: inline-block;
           width: 23px;
           height: 23px;
-          background-color: @menu-button-background;
+          .button-hover();
           position: relative;
           top: 1px;
           left: -5px;
@@ -1073,7 +1073,7 @@ a.bookmark {
         display: inline-block;
         height: 44px;
         width: 44px;
-        background-color: @menu-button-background;
+        .button-hover();
         text-align: center;
         font-weight: 700;
         font-size: 30px;
@@ -1642,7 +1642,7 @@ html.ios body.portrait #interface {
         width: 50px;
         height: 50px;
         border-radius: 50%;
-        background-color: @menu-button-background;
+        .button-hover();
         color: @menu-text;
 
         &.minus {
@@ -2580,7 +2580,7 @@ ul.chapters.shareList a.level0 .svg-icon {
       height: 40px;
       display: inline-block;
       padding: 7px 17px 7px 7px;
-      background-color: @menu-button-background;
+      .button-hover();
       width: auto;
       white-space: nowrap;
 
@@ -2636,7 +2636,7 @@ ul.chapters.shareList a.level0 .svg-icon {
   height: @zoom-close-button-size;
   padding: unit((@zoom-close-button-size/30)*11, px);
   z-index: 103;
-  background-color: @menu-button-background;
+  .button-hover();
   color: @menu-text;
   opacity: 1;
   transition: opacity 500ms;

diff --git a/style/mixins.less b/style/mixins.less
index 94178d1f43227cf5360b85a635ab8f255fb421f4..413162ae957ac0ab801719e54e99ce6aa8fd6b95 100644 (file)
--- a/style/mixins.less
+++ b/style/mixins.less
@@ -42,14 +42,14 @@
 
   .fonctions {
     a {
-      background-color: @button;
+      .button-hover();
     }
   }
 
   .caption {
     div.button, a {
       &.back {
-        background-color: @button;
+        .button-hover();
       }
     }
   }
@@ -61,6 +61,22 @@
   }
 }
 
+.button-hover() {
+  @dark:darken(@menu-button-background,7%);
+  background-color: @menu-button-background;
+  transition: background-color 250ms;
+
+  &:hover {
+    background-color: @dark;
+  }
+
+  &:focus {
+    .keyboard-navigating & {
+      background-color: @dark;
+    }
+  }
+}
+
 .menu-hover-item() {
   background-color: transparent;
   transition: background-color 250ms;

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 0551ba42d2708258ef3f38d1c3510000df43e69b..ebec5d3e8610aba8123ac4661587cc609dd0ed90 100644 (file)
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -212,7 +212,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   height: 60px;
   padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
   color: @menu-text;
-  background-color: @menu-button-background;
+  .button-hover();
 
   .rtl & {
     right: auto;
@@ -385,7 +385,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   bottom: 0;
   left: 0;
   width: 100%;
-  background-color: @menu-button-background;
+  .button-hover();
   line-height: 1;
   padding: 20px 0;