From 8c32b0e7bb7cc0c82400b9e9b113410b4bc3663c Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Sun, 20 Jul 2025 23:31:38 +0200
Subject: [PATCH] bbox: hide buttons fully; closes #180

---
 copyparty/web/baguettebox.js |  4 +---
 copyparty/web/browser.css    | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js
index 0103948f..adcf3239 100644
--- a/copyparty/web/baguettebox.js
+++ b/copyparty/web/baguettebox.js
@@ -592,9 +592,7 @@ window.baguetteBox = (function () {
             preloadPrev(currentIndex);
         });
 
-        clmod(ebi('bbox-btns'), 'off');
-        clmod(btnPrev, 'off');
-        clmod(btnNext, 'off');
+        show_buttons(0);
 
         updateOffset();
         overlay.style.display = 'block';
diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index fd98c520..35dbeeac 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -2199,18 +2199,25 @@ html.y #bbox-overlay figcaption a {
 	top: calc(50% - 30px);
 	width: 44px;
 	height: 60px;
+	transition: background-color .3s ease, color .3s ease, left .3s ease, right .3s ease;
+}
+#bbox-btns button {
+	transition: background-color .3s ease, color .3s ease;
+}
+#bbox-btns {
+	transition: top .3s ease;
 }
 .bbox-btn {
 	position: fixed;
 }
-.bbox-btn,
-#bbox-btns {
-	opacity: 1;
-	animation: opacity .2s infinite ease-in-out;
+#bbox-next.off {
+	right: -2.6em;
+}
+#bbox-prev.off {
+	left: -2.6em;
 }
-.bbox-btn.off,
 #bbox-btns.off {
-	opacity: 0;
+	top: -2.2em;
 }
 #bbox-overlay button {
 	cursor: pointer;
@@ -2221,8 +2228,6 @@ html.y #bbox-overlay figcaption a {
 	border-radius: 15%;
 	background: rgba(50, 50, 50, 0.5);
 	color: rgba(255,255,255,0.7);
-	transition: background-color .3s ease;
-	transition: color .3s ease;
 	font-size: 1.4em;
 	line-height: 1.4em;
 	vertical-align: top;
@@ -3267,4 +3272,9 @@ html.d #treepar {
 	.dropdesc>div>div {
 		transition: none;
 	}
+	#bbox-next,
+	#bbox-prev,
+	#bbox-btns {
+		transition: background-color .3s ease, color .3s ease;
+	}
 }