From cfdbce96a8983cb442fcbd0ec47e4a45d76b9501 Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@gmail.com>
Date: Sat, 20 Jun 2026 14:47:47 +0200
Subject: [PATCH] zip folder download svg icon

---
 copyparty/web/browser.css | 27 +++++++++++++++++++++++----
 copyparty/web/browser.js  |  3 ++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 776aeed6..7b378d67 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1607,10 +1607,12 @@ html:not(.e):not(.d) #up_quick .btn.on {
 	display: inline-block;
 }
 #wtoggle #zip1 {
-	padding: .4em;
-	margin: 0 .2em;
-  	vertical-align: top;
+	padding: .2em .4em;
+  	position: relative;
 	white-space: nowrap;
+	width: 2em;
+	height: 2em;
+	vertical-align: top;
 }
 #wm3u a {
 	margin: -.2em .1em;
@@ -1630,10 +1632,24 @@ html:not(.e):not(.d) #up_quick .btn.on {
 	font-size: .7em;
 	display: block;
 }
+#zip1:hover {
+	--fg: var(--a);
+}
+#zip1 span {
+	text-shadow: none;
+	background: var(--fg);
+	color: var(--bg-max);
+	border-radius: 2px;
+	padding: 1px 3px;
+	position: absolute;
+	z-index: 1;
+	top: 1.4em;
+	font-size: .6em;
+	margin-left: .2em;
+}
 
 .unfun #wfm span,
 .unfun #wm3u span,
-.unfun #zip1 span,
 .unfun #wnp span {
 	font-size: 1em;
 }
@@ -6125,6 +6141,9 @@ html.fy #files thead th {
 html.fy #files tr:not(.sel) .imgcontainer img {
 	z-index: -1;
 }
+html.fy #zip1 {
+	--bg-max: var(--bg-u2);
+}
 
 html.f.unfun #ops a {
 	padding: .5em;
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index aa666b7a..0942ec59 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -969,6 +969,7 @@ var svg_next = svg_box + '<path d="M17 6V18M13.5239 12.7809L8.6247 16.7002C7.969
 var svg_play = svg_box + '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" ' + svg_options + '/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.4706 8.78431C9.80448 8.42906 9 8.91175 9 9.66667V14.3333C9 15.0883 9.80448 15.5709 10.4706 15.2157L15.6728 12.4412C16.0257 12.2529 16.0257 11.7471 15.6728 11.5588L10.4706 8.78431Z" ' + svg_options + '/></svg>'
 var svg_pause = svg_box + '<path d="M10 9V15M14 9V15M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" ' + svg_options + '/></svg>'
 var svg_vol = svg_box + '<path d="M16.0004 9.00009C16.6281 9.83575 17 10.8745 17 12.0001C17 13.1257 16.6281 14.1644 16.0004 15.0001M18 5.29177C19.8412 6.93973 21 9.33459 21 12.0001C21 14.6656 19.8412 17.0604 18 18.7084M4.6 9.00009H5.5012C6.05213 9.00009 6.32759 9.00009 6.58285 8.93141C6.80903 8.87056 7.02275 8.77046 7.21429 8.63566C7.43047 8.48353 7.60681 8.27191 7.95951 7.84868L10.5854 4.69758C11.0211 4.17476 11.2389 3.91335 11.4292 3.88614C11.594 3.86258 11.7597 3.92258 11.8712 4.04617C12 4.18889 12 4.52917 12 5.20973V18.7904C12 19.471 12 19.8113 11.8712 19.954C11.7597 20.0776 11.594 20.1376 11.4292 20.114C11.239 20.0868 11.0211 19.8254 10.5854 19.3026L7.95951 16.1515C7.60681 15.7283 7.43047 15.5166 7.21429 15.3645C7.02275 15.2297 6.80903 15.1296 6.58285 15.0688C6.32759 15.0001 6.05213 15.0001 5.5012 15.0001H4.6C4.03995 15.0001 3.75992 15.0001 3.54601 14.8911C3.35785 14.7952 3.20487 14.6422 3.10899 14.4541C3 14.2402 3 13.9601 3 13.4001V10.6001C3 10.04 3 9.76001 3.10899 9.54609C3.20487 9.35793 3.35785 9.20495 3.54601 9.10908C3.75992 9.00009 4.03995 9.00009 4.6 9.00009Z" ' + svg_options + '/></svg>'
+var svg_dlzip = svg_box + '<path style="fill:none;stroke:currentColor;stroke-width:1.77565;stroke-linecap:butt;stroke-linejoin:round" d="M 9.3594717,18.427162 H 5.2685174 A 1.461412,1.461412 0 0 1 3.8071053,16.96575 V 4.2658445 A 1.3894971,1.3894971 0 0 1 5.1966025,2.8763474 h 4.9079295 l 2.640559,2.7481735 h 7.599855 A 1.3638132,1.3638132 0 0 1 21.70876,6.9883341 V 17.109258 a 1.2976047,1.2976047 0 0 1 -1.292207,1.297595 l -4.882326,0.02031" /> <path style="stroke:currentColor;stroke-width:3.78;stroke-linecap:butt" d="m 12.434773,17.545979 v 3.876985"  /> <path style="fill:currentColor" d="m 12.400955,23.183771 6.171837,-2.663485 -12.3007157,0 z" /></svg>'
 
 ebi('widget').innerHTML = (
 	'<div id="wstack">' +
@@ -985,7 +986,7 @@ ebi('widget').innerHTML = (
 				' href="#" id="fcpy" tt="' + L.wt_cpy + '">⧉<span>copy</span></a><a' +
 				' href="#" id="fpst" tt="' + L.wt_pst + '">📋<span>paste</span></a>' +
 			'</span><span id="wzip1"><a' +
-				' href="#" id="zip1" tt="' + L.wt_zip1 + '">' + (fun_tgl ? '⬇️📦' : 'download') + '<span>zip</span></a>' +
+				' href="#" id="zip1" tt="' + L.wt_zip1 + '">' + svg_dlzip + '<span>zip</span></a>' +
 			'</span><span id="wzip"><a' +
 				' href="#" id="selall" tt="' + L.wt_selall + '">' + (fun_tgl ? '✅<br/>sel. ' : 'sel.<br/>') + 'all</a><a' +
 				' href="#" id="selinv" tt="' + L.wt_selinv + '">' + (fun_tgl ? '🔛<br/>sel. ' : 'sel.<br/>') + 'inv.</a><a' +