From d30b9661caf9f8658a84266ab93eae6026914f89 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 17 Jul 2020 11:39:04 +0200
Subject: [PATCH] wip #3757 @0.5

---
 js/libs/fluidbook/fluidbook.keyboard.js |  6 +++---
 style/fluidbook.less                    | 10 +++++-----
 style/mixins.less                       | 20 ++++++++++++++++++--
 style/mmenu/mmenu.less                  |  4 ++--
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js
index 4685e12b..6920a654 100644
--- 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 73feaabf..a1cdf37f 100644
--- 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 94178d1f..413162ae 100644
--- 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 0551ba42..ebec5d3e 100644
--- 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;
 
-- 
2.39.5