show autoscroll button on arrow click, then fade away after a while if it's not clicked

1 files changed, 29 insertions, 11 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index ff63f4116..5f8895c1f 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -32,8 +32,8 @@
 
     .dot,
     .dot-active {
-        height: 15px;
-        width: 15px;
+        height: 10px;
+        width: 10px;
         border-radius: 50%;
         margin: 3px;
         display: inline-block;
@@ -49,7 +49,9 @@
 .carousel3DView-back,
 .carousel3DView-fwd,
 .carousel3DView-back-scroll,
-.carousel3DView-fwd-scroll {
+.carousel3DView-fwd-scroll,
+.carousel3DView-back-scroll-hidden,
+.carousel3DView-fwd-scroll-hidden {
     position: absolute;
     display: flex;
     width: 30;
@@ -61,24 +63,40 @@
     cursor: pointer;
 }
 
-.carousel3DView-fwd {
+.carousel3DView-fwd,
+.carousel3DView-back {
     top: 50%;
+}
+
+.carousel3DView-fwd-scroll,
+.carousel3DView-back-scroll,
+.carousel3DView-fwd-scroll-hidden,
+.carousel3DView-back-scroll-hidden {
+    top: calc(50% - 30px);
+}
+
+.carousel3DView-fwd,
+.carousel3DView-fwd-scroll,
+.carousel3DView-fwd-scroll-hidden {
     right: 0;
 }
 
-.carousel3DView-back {
-    top: 50%;
+.carousel3DView-back,
+.carousel3DView-back-scroll,
+.carousel3DView-back-scroll-hidden {
     left: 0;
 }
 
-.carousel3DView-fwd-scroll {
-    top: calc(50% - 30px);
-    right: 0;
+.carousel3DView-fwd-scroll-hidden,
+.carousel3DView-back-scroll-hidden {
+    opacity: 0;
+    transition: opacity 0.5s linear;
+    pointer-events: none;
 }
 
+.carousel3DView-fwd-scroll,
 .carousel3DView-back-scroll {
-    top: calc(50% - 30px);
-    left: 0;
+    opacity: 1;
 }
 
 .carousel3DView-back:hover,