From 8115afd974388d346a59e027a63fe5c134b50100 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 15 Mar 2021 20:38:46 +0100
Subject: [PATCH] wait #4346 @1.5

---
 .../slideshow/fluidbook.slideshow.vacheron.js |  5 +++
 style/slideshow/vacheron.less                 | 31 +++++++++++++++++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js b/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js
index b4a9f1c5..7e5dd96a 100644
--- a/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js
+++ b/js/libs/fluidbook/slideshow/fluidbook.slideshow.vacheron.js
@@ -57,6 +57,10 @@ FluidbookVacheronSlideshow.prototype = {
             setTimeout(function () {
                 $(s).addClass('ready');
             }, 100)
+            setTimeout(function () {
+                resize();
+                $(s).find('.fb-slideshow-nav').addClass('visible');
+            }, 250);
         });
     },
 
@@ -128,6 +132,7 @@ FluidbookVacheronSlideshow.prototype = {
         var nav = $(s).find('.fb-slideshow-nav');
         $(nav).css('left', (w - $(nav).outerWidth()) / 2);
 
+
         return {w: w, h: h, fullscreen: fullscreen};
     },
 
diff --git a/style/slideshow/vacheron.less b/style/slideshow/vacheron.less
index 3cc2f473..539ff977 100644
--- a/style/slideshow/vacheron.less
+++ b/style/slideshow/vacheron.less
@@ -69,10 +69,19 @@
       }
     }
 
+    &.ready {
+      .fb-slideshow-nav.visible {
+        opacity: 1;
+      }
+    }
+
     .fb-slideshow-nav {
       pointer-events: auto;
       position: absolute;
       bottom: 15px;
+      opacity: 0;
+      transition: opacity 250ms;
+      white-space: nowrap;
 
       .fb-slideshow-nav-prev, .fb-slideshow-nav-next {
         @w: 40px;
@@ -111,15 +120,31 @@
         margin: 0 10px;
         width: @w;
         height: @w;
-        background-color: #999999;
         border-radius: 50%;
         position: relative;
         top: -13px;
-        border: 3px solid #fff;
+        border: 3px solid transparent;
+        background-color: transparent;
+
+        &:after {
+          content:".";
+          text-indent: -6666px;
+          position: absolute;
+          top: -1px;
+          left: 1px;
+          border-radius: 50%;
+          width: 4px;
+          height: 4px;
+          display: block;
+          background-color: #999999;
+        }
 
         &:hover, &.active {
           background-color: #987e52;
-          border-color: #987e52;
+
+          &:after {
+            display: none;
+          }
         }
       }
     }
-- 
2.39.5