From 3a0542511e23462606f25f317d8743c49401023c Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@gmail.com>
Date: Sun, 26 Apr 2026 10:04:02 +0200
Subject: [PATCH] bbox uses default button style

---
 copyparty/web/baguettebox.js | 32 +++++++++++-------------
 copyparty/web/browser.css    | 47 +++++++++++++++++-------------------
 2 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js
index 62b4fe9e..4eeb4e64 100644
--- a/copyparty/web/baguettebox.js
+++ b/copyparty/web/baguettebox.js
@@ -305,19 +305,19 @@ window.baguetteBox = (function () {
             ctr.innerHTML = (
                 '<div id="bbox-overlay" role="dialog">' +
                 '<div id="bbox-slider"></div>' +
-                '<button id="bbox-prev" class="bbox-btn" type="button" aria-label="Previous">◀</button>' +
-                '<button id="bbox-next" class="bbox-btn" type="button" aria-label="Next">▶</button>' +
+                '<a id="bbox-prev" class="btn" aria-label="Previous">◀</a>' +
+                '<a id="bbox-next" class="btn" aria-label="Next">▶</a>' +
                 '<div id="bbox-btns">' +
-                '<button id="bbox-help" type="button">?</button>' +
-                '<button id="bbox-anim" type="button" tt="a">-</button>' +
-                '<button id="bbox-readdir" type="button" tt="a">ltr</button>' +
-                '<button id="bbox-rotl" type="button">↶</button>' +
-                '<button id="bbox-rotr" type="button">↷</button>' +
-                '<button id="bbox-tsel" type="button">☑️sel</button>' +
-                '<button id="bbox-full" type="button" tt="full-screen">⛶</button>' +
-                '<button id="bbzoom" type="button" tt="zoom/stretch smaller images to fill screen">↕</button>' +
-                '<button id="bbox-vmode" type="button" tt="a"></button>' +
-                '<button id="bbox-close" type="button" aria-label="Close">✕</button>' +
+                '<a id="bbox-help" class="btn">?</a>' +
+                '<a id="bbox-anim" class="btn" tt="a">-</a>' +
+                '<a id="bbox-readdir" class="btn" tt="a">ltr</a>' +
+                '<a id="bbox-rotl" class="btn">↶</a>' +
+                '<a id="bbox-rotr" class="btn">↷</a>' +
+                '<a id="bbox-tsel" class="tgl btn">☑️sel</a>' +
+                '<a id="bbox-full" class="btn" tt="full-screen">⛶</a>' +
+                '<a id="bbzoom" class="tgl btn" tt="zoom/stretch smaller images to fill screen">↕</a>' +
+                '<a id="bbox-vmode" class="btn" tt="a"></a>' +
+                '<a id="bbox-close" class="btn" aria-label="Close">✕</a>' +
                 '</div></div>'
             );
             overlay = ctr.firstChild;
@@ -576,18 +576,14 @@ window.baguetteBox = (function () {
             if (vsplit(files[a].vp)[1] == name)
                 sel = true;
 
-        ebi('bbox-overlay').style.background = sel ?
-            'rgba(153,85,34,0.7)' : '';
+        clmod(ebi('bbox-overlay'), 'sel', sel);
 
         img.style.borderRadius = sel ? '1em' : '';
         btnState(btnSel, sel);
     }
 
     function btnState(btn, sel) {
-        btn.style.color = sel ? '#fff' : '';
-        btn.style.background = sel ? '#d84' : '';
-        btn.style.textShadow = sel ? '1px 1px 0 #b83' : '';
-        btn.style.boxShadow = sel ? '.15em .15em 0 #520' : '';
+        clmod(btn, 'on', sel);
     }
 
     function keyUpHandler(e) {
diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 4d73bb63..e3117657 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1931,7 +1931,7 @@ html {
 .btn {
 	color: var(--btn-fg);
 	background: #eee;
-	background: linear-gradient(-5deg, var(--btn-bg), color-mix(var(--a-gray) 20%, transparent 80%));
+	background: linear-gradient(-5deg, var(--btn-bg), color-mix(var(--a-gray) 30%, transparent));
 	box-shadow: var(--btn-bs);
 	border: 1px solid var(--bg-u3);
 	border-bottom: var(--btn-bb);
@@ -2464,6 +2464,9 @@ html.noscroll .sbar::-webkit-scrollbar {
 #bbox-overlay.visible {
 	opacity: 1;
 }
+#bbox-overlay.sel {
+	background: color-mix(var(--a-dark) 70%, transparent);
+}
 .full-image {
 	display: inline-block;
 	position: relative;
@@ -2576,52 +2579,46 @@ html.y #bbox-overlay figcaption a {
 @keyframes eog {
 	0% {filter: brightness(1.5)}
 }
-#bbox-next,
-#bbox-prev {
+#bbox-overlay #bbox-next,
+#bbox-overlay #bbox-prev {
+	position: fixed;
 	top: 50%;
 	top: calc(50% - 30px);
-	width: 44px;
+	width: 30px;
 	height: 60px;
-	transition: background-color .3s ease, color .3s ease, opacity .3s ease;
-}
-#bbox-btns button {
-	transition: background-color .3s ease, color .3s ease;
+	transition: opacity .3s ease;
+	text-align: center;
+	line-height: 60px;
 }
 #bbox-btns {
 	transition: top .3s ease;
 }
-.bbox-btn {
-	position: fixed;
+#bbox-btns .btn {
+	cursor: pointer;
 }
 #bbox-overlay.immersive #bbox-next,
 #bbox-overlay.immersive #bbox-prev {
 	opacity: 0;
 }
 #bbox-overlay.immersive #bbox-btns {
-	top: -2.8em;
+	top: -3.5em;
 }
-#bbox-overlay button {
+#bbox-overlay .btn {
 	cursor: pointer;
-	outline: none;
 	padding: 0 .4em;
-	margin: 0 .2em;
-	border: 0;
-	border-radius: var(--b-radius);
-	background: rgba(50, 50, 50, 0.5);
-	color: rgba(255,255,255,0.7);
+	margin: 0 .1em;
 	font-size: 1.4em;
 	line-height: 2em;
 	vertical-align: top;
 	font-variant: small-caps;
+	color: var(--fg);
 }
-#bbox-overlay button:hover {
+#bbox-overlay .btn.on {
+	color: var(--bg);
+}
+#bbox-overlay .btn:hover {
 	opacity: 1 !important;
 }
-#bbox-overlay button:focus-visible,
-#bbox-overlay button:hover {
-	color: rgba(255,255,255,0.9);
-	background: rgba(50, 50, 50, 0.9);
-}
 #bbox-next {
 	right: 1%;
 }
@@ -2630,7 +2627,7 @@ html.y #bbox-overlay figcaption a {
 }
 #bbox-btns {
 	top: .5em;
-	right: .5em;
+	right: .2em;
 	position: fixed;
 }
 #bbox-halp {