From b06fc385ad894765fb17a172066a1326ff3078a9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 10 Dec 2022 20:56:38 +0800
Subject: [PATCH] Experiment with this hide-controls UI on carousel

---
 src/app.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/app.css b/src/app.css
index 450764f..3a364f9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -360,6 +360,17 @@ button.carousel-dot.active {
 button.carousel-dot.active {
   pointer-events: none;
 }
+@media (hover: hover) {
+  .carousel-controls {
+    transform: translateY(100%);
+    transition: transform 0.2s ease-in-out;
+  }
+  .carousel:hover + .carousel-controls,
+  .carousel-controls:hover,
+  .carousel-controls:focus-within {
+    transform: translateY(0);
+  }
+}
 
 /* COMPOSE BUTTON */