From 648f1956b6dd81be21fa272445a8fd549175792e Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Wed, 20 May 2026 23:58:28 +0200 Subject: [PATCH 01/32] modal unmodal toggle --- copyparty/web/browser.css | 41 ++++++++++++++++++++++++++++++-------- copyparty/web/browser.html | 4 +++- copyparty/web/browser.js | 23 ++++++++++++++++++++- 3 files changed, 58 insertions(+), 10 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 78ea3fd8..8e7a3031 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -2981,7 +2981,7 @@ html.c .modalcontent { .modalheader:hover { color: var(--fg); } -#cfg_mu, +.winbtn, .close{ position: absolute; cursor: default; @@ -2996,8 +2996,13 @@ html.c .modalcontent { padding: 0; align-content: center; } -#cfg_mu { +.winbtn { right: 2.3em; + span { + font-family: initial; + font-size: small; + vertical-align: center; + } } .closepane { position: absolute; @@ -3110,6 +3115,24 @@ html.c .modalcontent { margin-bottom: .5em; } } +#cfg.unmodal { + .sub_section, + #s_nav, + .divider, + .s_desc { + display: none; + } + .setting, + #s_list { + display: contents; + } + .s_section { + margin: 0 .3em; + } +} +.c { + display: inline-block; +} /* upload.css */ @@ -5325,6 +5348,8 @@ html.f { } .close { margin: 1px; + font-family: initial; + font-size: .9em; } .modalheader { background: var(--a); @@ -5346,10 +5371,7 @@ html.f { #h_music { right: 0; } - #h_music::after { - right: 6em; - } - #cfg_mu { + .winbtn { margin: .1em; } #u2tab tbody tr:hover td { @@ -5435,6 +5457,9 @@ html.fy { border: none; font-size: large; } + #reloc_up:not(:hover){ + color: #f3f3f3; + } .close:not(:hover) { background: none; border-color: transparent; @@ -5519,7 +5544,7 @@ html.fy { content: ""; width: 30%; margin-bottom: -1.2em; - right: 2.7em; + right: 5.7em; } #ops { height: auto; @@ -5561,7 +5586,7 @@ html.fy { #qs_btns a { color: var(--bg-u2); } - #cfg_mu:not(:hover) { + .winbtn:not(:hover) { background: none; border-color: transparent; } diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index 419e0955..be337070 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -163,6 +163,7 @@
+ ▼ ✕ @@ -176,6 +177,7 @@
+ ▼ ✕ @@ -199,7 +201,7 @@
- ⚙️ + ⚙️ ✕ diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 0f95584e..f354b3cd 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -1105,6 +1105,16 @@ ebi('up_outside').onclick = modaltoggle('up2k', false); } +var up2k_lgcy = false; +ebi('reloc_up').onclick = function(){ + up2k_lgcy = !up2k_lgcy; + this.innerHTML = up2k_lgcy ? '▲' : '▼'; + clmod(ebi('up2k'), 'unmodal', up2k_lgcy); + swrite('up2k_lgcy', up2k_lgcy); +} +if(sread('up2k_lgcy') == 'true') + ebi('reloc_up').click(); + ebi('wrap').insertBefore(mknod('div', 'lazy'), ebi('epi')); var x = ebi('bbsw'); @@ -1407,6 +1417,16 @@ ebi('op_cfg').innerHTML = ( } })(); +var cfg_lgcy = false; +ebi('reloc_cfg').onclick = function(){ + cfg_lgcy = !cfg_lgcy; + this.innerHTML = cfg_lgcy ? '▲' : '▼'; + clmod(ebi('cfg'), 'unmodal', cfg_lgcy); + swrite('cfg_lgcy', cfg_lgcy); +} +if(sread('cfg_lgcy') == 'true') + ebi('reloc_cfg').click(); + // accent color function parseColor (strColor) { var s = new Option().style; @@ -9085,7 +9105,8 @@ function apply_perms(res) { goto('up2k'); clmod(document.documentElement, 'noscroll', false); } - clmod(ebi('up2k'), 'unmodal', up_only); + if(up_only && !up2k_lgcy) + ebi('reloc_up').click(); clmod(ebi('opa_mkd'), 'vis', up_only); } From dbbabc374d3e5525acd9b6866195084ea7d34dc0 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Thu, 21 May 2026 00:02:37 +0200 Subject: [PATCH 02/32] addition to last commit --- copyparty/web/browser.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index f354b3cd..98c237d6 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -9105,8 +9105,11 @@ function apply_perms(res) { goto('up2k'); clmod(document.documentElement, 'noscroll', false); } - if(up_only && !up2k_lgcy) - ebi('reloc_up').click(); + if(up_only && !up2k_lgcy){ + up2k_lgcy = !up2k_lgcy; + this.innerHTML = up2k_lgcy ? '▲' : '▼'; + clmod(ebi('up2k'), 'unmodal', up2k_lgcy); + } clmod(ebi('opa_mkd'), 'vis', up_only); } From 94f70b647f932bd942244567e8cc640e4b888cf6 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Fri, 22 May 2026 20:15:37 +0200 Subject: [PATCH 03/32] fix relocation button for up2k in readonly folders --- copyparty/web/browser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 98c237d6..96f4d9bb 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -9107,7 +9107,7 @@ function apply_perms(res) { } if(up_only && !up2k_lgcy){ up2k_lgcy = !up2k_lgcy; - this.innerHTML = up2k_lgcy ? '▲' : '▼'; + ebi('reloc_up').innerHTML = up2k_lgcy ? '▲' : '▼'; clmod(ebi('up2k'), 'unmodal', up2k_lgcy); } clmod(ebi('opa_mkd'), 'vis', up_only); From 2bbd4e303c269bc359eaf7973d6ea7d9585ba8db Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Fri, 22 May 2026 20:49:08 +0200 Subject: [PATCH 04/32] use orbitron font for html.f --- copyparty/web/browser.css | 59 ++++++++++++++++++++++++++++---------- copyparty/web/browser.html | 3 ++ 2 files changed, 47 insertions(+), 15 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 8e7a3031..1e7fdf95 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -492,7 +492,7 @@ html .ayjump:focus-visible { background: linear-gradient(to bottom, var(--bg), transparent); padding: .6em .5em; top: 0; - margin: 0 -.5em; + margin: 0 -.6em; } #wfp.shifted { margin-left: 2em; @@ -1018,6 +1018,7 @@ tr.play td:nth-child(1) a { color: var(--a); text-shadow: none; font-family: monospace; + font-family: var(--font-mono); } .thumbed, #ggrid>a.thumbed { @@ -1354,6 +1355,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { cursor: pointer; width: max-content; border: 1px solid var(--bg-u3); + font-family: initial; } html:not(.e):not(.d) #up_quick .btn { transform: rotate(0deg); @@ -1405,6 +1407,7 @@ html:not(.e):not(.d) #up_quick .btn.on { #wtoggle * { line-height: 1em; vertical-align: middle; + vertical-align: center; } #wtoggle.sel #wzip, #wtoggle.m3u #wm3u, @@ -1854,6 +1857,7 @@ html.y #ops svg circle { font-size: medium; min-width: 3em; margin: .3em; + font-family: var(--font-main); } input[type=color] { vertical-align: bottom; @@ -2701,7 +2705,6 @@ html.noscroll .sbar::-webkit-scrollbar { max-height: 100%; max-height: calc(100% - 1.4em); margin-bottom: 1.4em; - vertical-align: middle; transition: transform .23s, left .23s, top .23s, width .23s, height .23s; } .immersive .full-image img, @@ -3001,6 +3004,7 @@ html.c .modalcontent { span { font-family: initial; font-size: small; + vertical-align: middle; vertical-align: center; } } @@ -3192,6 +3196,7 @@ html.c .modalcontent { .dropdesc>div { display: table-cell; vertical-align: middle; + vertical-align: center; text-align: center; } .dropdesc>div>div { @@ -5218,9 +5223,11 @@ html.f { --g-sel-bg: color-mix(in xyz, var(--g-sel-b1) 70%, var(--bg-u2)); --bg-u1: color-mix(in srgb, var(--fg) 10%, transparent); - letter-spacing: 2px; - font-family: monospace; - font-size: 1.2em; + --font-main: "Orbitron", sans-serif; + --font-mono: "Orbitron", monospace; + font-family: "Orbitron", sans-serif; + font-optical-sizing: auto; + letter-spacing: .05em; #path i { border-color: var(--a); @@ -5239,7 +5246,7 @@ html.f { font-size: .8em; } #srv_name { - margin-left: 2.7em; + padding-top: .3em; } #gridsel { content: "m.-select"; @@ -5319,16 +5326,18 @@ html.f { line-height: 1.45em; } .hl { - width: calc(100% - 4.7em); + width: calc(100% - 4.2em); } .hl::after { content: ""; - left: calc(100% - 2.7em); + right: .5em; + left: 0; margin-top: -.3em; + margin-bottom: -2px; z-index: -1; position: absolute; border: solid; - border-width: 2em 2em 0 .2em; + border-width: 2.08em 2.08em 0 0; border-color: var(--btn-1-bg) transparent transparent var(--btn-1-bg); } .hl:hover::after { @@ -5348,13 +5357,13 @@ html.f { } .close { margin: 1px; - font-family: initial; - font-size: .9em; } .modalheader { background: var(--a); text-shadow: none; color: var(--bg-u2); + padding-top: .5em; + padding-bottom: .5em; } #tree { z-index: 6; @@ -5365,9 +5374,6 @@ html.f { #widget:not(.thin) #pvol { border-color: var(--a-dark); } - #files tbody td:nth-child(3) { - font-size: .8em; - } #h_music { right: 0; } @@ -5392,6 +5398,22 @@ html.f { #goh { font-size: 1.2em; } + #gridzoom a, + #gridchop a, + #twig, #twobytwo, + #nthread_sub, #nthread_add { + font-family: monospace; + font-size: 1.6em; + } + #qs_btns a { + margin: .1em 0; + padding: .3em; + } + .unmodal, + .opview { + margin-left: -.6em; + margin-right: -.6em; + } } html.fz { --bg: #2e258c; @@ -5408,7 +5430,7 @@ html.fz { z-index: -1; } #srv_name { - padding-top: .7em; + padding-top: .5em; } #up_status_h { color: var(--bg-u2); @@ -5561,12 +5583,19 @@ html.fy { #wtoggle{ margin: 0; border-bottom: none; + border-radius: var(--radius) 0 0 0; } #up_quick { margin: 0; } + #up_quick_btn { + border-radius: 0; + border-width: 1px 0 0 0; + margin: 0; + } #wtico { line-height: 1.09em; + border-radius: 0; } #wtoggle, #wtoggle * { line-height: .99em; diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index be337070..6984c9cf 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -7,6 +7,9 @@ + + + {{ html_head }} From 32d207fbb487c17a1cd184f2cea0ef9a56aaa5e3 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Fri, 22 May 2026 22:56:01 +0200 Subject: [PATCH 05/32] minor theme adjustments --- copyparty/web/browser.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 1e7fdf95..0dd86fa9 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -5218,7 +5218,7 @@ html.f { --a: #e3f903; --bg-u2:#191919; - --radius: 0; + --radius: 4px; --g-sel-bg: color-mix(in xyz, var(--g-sel-b1) 70%, var(--bg-u2)); --bg-u1: color-mix(in srgb, var(--fg) 10%, transparent); @@ -5410,9 +5410,10 @@ html.f { padding: .3em; } .unmodal, - .opview { + #wrap>.opview { margin-left: -.6em; margin-right: -.6em; + border-radius: 0 0 var(--radius) var(--radius); } } html.fz { @@ -5437,6 +5438,17 @@ html.fz { text-shadow: none; font-size: large; } + .ghead, + #path, + #ops { + border: var(--btn-bb); + } + .ghead { + margin-left: -1px; + } + #wfp .btn { + padding: 0; + } } html.fy { --a: #305797; From 55f349062aa25a85b071dd7addc2e085ec859782 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Fri, 22 May 2026 23:33:27 +0200 Subject: [PATCH 06/32] minor theme adjustments --- copyparty/web/browser.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 0dd86fa9..cb94965c 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1529,8 +1529,9 @@ html:not(.e):not(.d) #up_quick .btn.on { display: grid; } #altprogbar span { - font-size: medium; + font-size: 16px; font-family: monospace; + font-family: var(--font-mono); color: var(--fg-weak); margin: .3em; align-self: center; @@ -5256,14 +5257,18 @@ html.f { } #ggrid > a::before { background: transparent; - margin: 0; z-index: 3; } + #ggrid > a::before, #ggrid > a:focus-visible::before, #ggrid > a:hover::before { - font-size: 2em; + font-size: 1.7em; + padding: .3em .2em; margin: 0; } + #ggrid > a.au::before { + padding: .4em .2em .4em .3em; + } #ggrid > a:focus-visible .imgcontainer::before, #ggrid > a:hover .imgcontainer::before { border-color: var(--g-f-bg) transparent transparent var(--g-f-bg); @@ -5599,6 +5604,7 @@ html.fy { } #up_quick { margin: 0; + border-radius: 0; } #up_quick_btn { border-radius: 0; From 7e827f6b921663dd588297df478eb0e8bb0872ac Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Fri, 22 May 2026 23:48:39 +0200 Subject: [PATCH 07/32] minor theming adjustments --- copyparty/web/browser.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index cb94965c..65af7c92 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -3959,9 +3959,9 @@ html.e #wrap.thin { margin-left: 2.9em; } html.fz #srv_name { - padding-top: 1.1em !important; + padding-top: .9em !important; padding-bottom: .6em; - margin-left: 3.2em !important; + margin-left: 3em !important; } #widget, #wrap { margin-left: 0 !important; @@ -5375,6 +5375,7 @@ html.f { } #treeToggleBtn { z-index: 7; + padding: .07em; } #widget:not(.thin) #pvol { border-color: var(--a-dark); @@ -5452,7 +5453,7 @@ html.fz { margin-left: -1px; } #wfp .btn { - padding: 0; + padding: .2em .4em; } } html.fy { From e25573cc267e4665e7060c902919c5315ba1e89e Mon Sep 17 00:00:00 2001 From: ed Date: Fri, 22 May 2026 21:51:17 +0000 Subject: [PATCH 08/32] use custom orbitron --- copyparty/__init__.py | 1 + copyparty/web/browser.css | 6 +++--- copyparty/web/browser.html | 3 --- copyparty/web/ui.css | 5 +++++ scripts/sfx.ls | 1 + 5 files changed, 10 insertions(+), 6 deletions(-) diff --git a/copyparty/__init__.py b/copyparty/__init__.py index 8bffed86..f4e8f877 100644 --- a/copyparty/__init__.py +++ b/copyparty/__init__.py @@ -80,6 +80,7 @@ web/deps/marked.js web/deps/fuse.py web/deps/mini-fa.css web/deps/mini-fa.woff +web/deps/orbitron.woff2 web/deps/prism.css web/deps/prism.js web/deps/prismd.css diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 65af7c92..5d0d3d56 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -5224,9 +5224,9 @@ html.f { --g-sel-bg: color-mix(in xyz, var(--g-sel-b1) 70%, var(--bg-u2)); --bg-u1: color-mix(in srgb, var(--fg) 10%, transparent); - --font-main: "Orbitron", sans-serif; - --font-mono: "Orbitron", monospace; - font-family: "Orbitron", sans-serif; + --font-main: 'orbitron', sans-serif; + --font-mono: 'orbitron', monospace; + font-family: 'orbitron', sans-serif; font-optical-sizing: auto; letter-spacing: .05em; diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index 6984c9cf..be337070 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -7,9 +7,6 @@ - - - {{ html_head }} diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css index 7e92f01c..685e1bb6 100644 --- a/copyparty/web/ui.css +++ b/copyparty/web/ui.css @@ -114,6 +114,11 @@ html.y { font-display: swap; src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(deps/scp.woff2) format('woff2'); } +@font-face { + font-family: 'orbitron'; + font-display: swap; + src: url(deps/orbitron.woff2) format('woff2'); +} html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; diff --git a/scripts/sfx.ls b/scripts/sfx.ls index 66ad6133..c16f588b 100644 --- a/scripts/sfx.ls +++ b/scripts/sfx.ls @@ -84,6 +84,7 @@ copyparty/web/deps/fuse.py, copyparty/web/deps/marked.js, copyparty/web/deps/mini-fa.css, copyparty/web/deps/mini-fa.woff, +copyparty/web/deps/orbitron.woff2, copyparty/web/deps/prism.css, copyparty/web/deps/prism.js, copyparty/web/deps/prismd.css, From f1c1e3ed474bd0063a6ee489797560527402fb34 Mon Sep 17 00:00:00 2001 From: Til Date: Sat, 23 May 2026 01:13:11 +0200 Subject: [PATCH 09/32] undo accidental bbox alignment change --- copyparty/web/browser.css | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 5d0d3d56..e92189c8 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -2696,18 +2696,19 @@ html.noscroll .sbar::-webkit-scrollbar { margin: 0; height: 100%; } -.full-image img, -.full-image video { - display: inline-block; - outline: none; - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - max-height: calc(100% - 1.4em); - margin-bottom: 1.4em; - transition: transform .23s, left .23s, top .23s, width .23s, height .23s; -} + .full-image img, + .full-image video { + display: inline-block; + outline: none; + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; + max-height: calc(100% - 1.4em); + margin-bottom: 1.4em; + vertical-align: middle; + transition: transform .23s, left .23s, top .23s, width .23s, height .23s; + } .immersive .full-image img, .immersive .full-image video { max-height: 100%; From a5cf02e8c7a6032375046d610150750792aeb9c4 Mon Sep 17 00:00:00 2001 From: Til Date: Sat, 23 May 2026 10:20:13 +0200 Subject: [PATCH 10/32] make scrollbars consistent / fix hiding --- copyparty/web/browser.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index e92189c8..c879364d 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -2040,6 +2040,8 @@ input.ssconf_v { #wtoggle, #ghead, #tree, +.splitsub, +.modalsplit, html { scrollbar-color: var(--a) var(--bg-u3); } @@ -2618,6 +2620,11 @@ html.y #doc .line-highlight { text-shadow: 1px 0 0 var(--fg), -1px 0 0 var(--fg), 0 -1px 0 var(--fg); } html.noscroll, +html.noscroll .modalsplit, +html.noscroll .splitsub, +html.noscroll #treeh, +html.noscroll .ghead, +html.noscroll #wtoggle, html.noscroll .sbar { scrollbar-width: none; } @@ -5614,7 +5621,7 @@ html.fy { margin: 0; } #wtico { - line-height: 1.09em; + line-height: 1.1em; border-radius: 0; } #wtoggle, #wtoggle * { From 66d4c64fa21ab0d4f07c4edee9f0e4a25cbdac7a Mon Sep 17 00:00:00 2001 From: Til Date: Sat, 23 May 2026 15:41:24 +0200 Subject: [PATCH 11/32] fix thumbnail extension text font and size --- copyparty/web/browser.css | 4 ++++ copyparty/web/browser.js | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index c879364d..e1429838 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1,6 +1,7 @@ :root { color-scheme: dark; --transparent: transparent; + --font-mono: monospace; --grid-sz: 10em; --grid-ln: 3; @@ -5429,6 +5430,9 @@ html.f { margin-right: -.6em; border-radius: 0 0 var(--radius) var(--radius); } + .th_ext .inner { + font-size: .8em; + } } html.fz { --bg: #2e258c; diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 96f4d9bb..bd35a22c 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -6572,8 +6572,8 @@ window.thegrid = (function () { (isdir ? 'folder' : 'file') + '-icon" color="' + (ext == 'unk' || ext.startsWith('/') ? '#0000' : intToHSL(hashCode(ext))) + '"/>' + (isdir || ext == 'unk' || ext.startsWith('/') ? '' : - '' + ext + '') + + '' + ext + '') + '' + ao.innerHTML + ''); } From de34d4ae9ed839565d46c8c1aacef0516cf10de2 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Sat, 23 May 2026 15:46:45 +0200 Subject: [PATCH 12/32] fix thumbnail extension text font and size --- copyparty/web/browser.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index e1429838..5694a043 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -5431,7 +5431,7 @@ html.f { border-radius: 0 0 var(--radius) var(--radius); } .th_ext .inner { - font-size: .8em; + font-size: .7em; } } html.fz { From e765b4c0e9907e75d81a874dd1d2fcfc2e0f8bdc Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Sat, 23 May 2026 21:22:12 +0200 Subject: [PATCH 13/32] fix dropzone css --- copyparty/web/browser.css | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 5694a043..74ebbb0f 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1408,7 +1408,6 @@ html:not(.e):not(.d) #up_quick .btn.on { #wtoggle * { line-height: 1em; vertical-align: middle; - vertical-align: center; } #wtoggle.sel #wzip, #wtoggle.m3u #wm3u, @@ -2205,7 +2204,7 @@ html.b .btn { #tree ul a { border-radius: var(--radius); display: inline-block; - vertical-align: center; + vertical-align: middle; } .ntree a { padding: .3em .2em; @@ -2537,7 +2536,7 @@ input[type="text"].invalid { } #docul li.bn span { color: var(--fg-weak); - vertical-align: center; + vertical-align: middle; text-shadow: none; } #docul li a { @@ -3015,7 +3014,6 @@ html.c .modalcontent { font-family: initial; font-size: small; vertical-align: middle; - vertical-align: center; } } .closepane { @@ -3206,7 +3204,6 @@ html.c .modalcontent { .dropdesc>div { display: table-cell; vertical-align: middle; - vertical-align: center; text-align: center; } .dropdesc>div>div { @@ -5339,10 +5336,10 @@ html.f { .ntree a + a { line-height: 1.45em; } - .hl { + #tree .hl { width: calc(100% - 4.2em); } - .hl::after { + #tree .hl::after { content: ""; right: .5em; left: 0; @@ -5354,7 +5351,7 @@ html.f { border-width: 2.08em 2.08em 0 0; border-color: var(--btn-1-bg) transparent transparent var(--btn-1-bg); } - .hl:hover::after { + #tree .hl:hover::after { border-color: var(--btn-1h-bg) transparent transparent var(--btn-1h-bg); } #wrap:not(.thin) { From 2f90234cba5826b93930f84970ed0d1b1bbf21c2 Mon Sep 17 00:00:00 2001 From: Til Date: Sun, 24 May 2026 12:19:13 +0200 Subject: [PATCH 14/32] reorganize z-indices --- copyparty/web/browser.css | 43 ++++++++++++++------------------------- 1 file changed, 15 insertions(+), 28 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 74ebbb0f..1d83ec15 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -489,7 +489,7 @@ html .ayjump:focus-visible { margin: 0; align-content: center; position: sticky; - z-index: 4; + z-index: 11; background: linear-gradient(to bottom, var(--bg), transparent); padding: .6em .5em; top: 0; @@ -1009,7 +1009,7 @@ tr.play td:nth-child(1) a { justify-content: center; } .th_ext { - z-index: 1; + z-index: 2; position: absolute; text-align: center; width: 100%; @@ -1043,7 +1043,7 @@ tr.play td:nth-child(1) a { display: none; top: .3em; right: .3em; - z-index: 2; + z-index: 4; font-size: 1.15em; width: 1em; height: 1em; @@ -1082,7 +1082,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { content: '▶'; } #ggrid>a:before { - z-index: 2; + z-index: 4; display: block; position: absolute; padding: .3em 0; @@ -1182,7 +1182,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { left: 0; right: 0; bottom: 0; - z-index: 3; + z-index: 11; touch-action: none; box-shadow: 0 0 .5em var(--mp-sh); } @@ -1777,7 +1777,7 @@ html.y #ops svg circle { line-height: 1.5em; } #treeToggleBtn{ - z-index: 6; + z-index: 30; position: fixed; top: 0; left: 0; @@ -2032,7 +2032,7 @@ input.ssconf_v { box-shadow: 0 0 1em var(--mp-sh), 0 -1px 0 rgba(128,128,128,0.3); border: 1px solid var(--bg-u3); transition: width .05s; - z-index: 5; + z-index: 20; padding-bottom: 3em; border-width: 0 1px 0 0; } @@ -2244,7 +2244,7 @@ html.b .btn { animation: 1s linear .15s infinite forwards spin, .2s ease .15s 1 forwards fadein; position: fixed; top: .3em; - z-index: 9; + z-index: 31; } #dlt_t { left: 0; @@ -2349,7 +2349,7 @@ html.b .btn { padding: 0 .2em; line-height: 2.3em; margin-bottom: 1.5em; - z-index: 3; + z-index: 10; margin-top: 0; top: 3.7em; transition: opacity .15s; @@ -2680,7 +2680,7 @@ html.noscroll .sbar::-webkit-scrollbar { left: 0; width: 100%; height: 100%; - z-index: 10; + z-index: 50; background: rgba(0, 0, 0, 0.8); transition: opacity .3s ease; } @@ -2899,7 +2899,7 @@ html.y #bbox-overlay figcaption a { position: absolute; top: 0; left: 0; - z-index: 20; + z-index: 51; padding: .4em; } #bbox-halp td { @@ -3151,7 +3151,7 @@ html.c .modalcontent { .modal { display: none; - z-index: 10; + z-index: 40; background: rgba(48, 48, 48, 0.7); } .modal.vis, @@ -4671,7 +4671,6 @@ html.e #ops a.act { border-top-right-radius: 3px; box-shadow: var(--shadow-inset-left), var(--shadow-inset-top), var(--shadow-inset-right); - z-index: 6; } html.e a:active { border: 0; @@ -4687,7 +4686,6 @@ html.e .opbox { box-shadow: var(--shadow-inset-bottom), var(--shadow-inset-left), var(--shadow-inset-right); border-radius: var(--radius); - z-index: 5; background: var(--bg); } html.e #srch_form { @@ -5044,7 +5042,7 @@ html.e #actionsArea { outline: none; border-radius: var(--radius); box-shadow: 0 0 .3rem var(--bg-d3); - z-index: 5; + z-index: 60; } #rcm.large a { padding: 1em; @@ -5188,7 +5186,7 @@ html.e #actionsArea { border-radius: var(--radius); padding: .5em; position: absolute; - z-index: 6; + z-index: 12; bottom: 2.5em; } .under { @@ -5258,12 +5256,8 @@ html.f { #gridsel { content: "m.-select"; } - .ghead { - z-index: 4; - } #ggrid > a::before { background: transparent; - z-index: 3; } #ggrid > a::before, #ggrid > a:focus-visible::before, @@ -5290,7 +5284,7 @@ html.f { position: absolute; left: 0; border: var(--bg-u2) solid; - z-index: 2; + z-index: 3; border-width: 4em 4em 0 0; border-color: var(--bg-u2) transparent transparent var(--bg-u2); margin: 0 2px; @@ -5326,9 +5320,6 @@ html.f { #pctl { margin-top: .1em; } - #pathBar { - z-index: 5; - } a { /* text-decoration: underline; */ text-decoration-color: color-mix(in oklab, currentColor 20%, transparent); @@ -5376,11 +5367,7 @@ html.f { padding-top: .5em; padding-bottom: .5em; } - #tree { - z-index: 6; - } #treeToggleBtn { - z-index: 7; padding: .07em; } #widget:not(.thin) #pvol { From fe6e79b220b2f1fe9b8175d5abca67d2012f726d Mon Sep 17 00:00:00 2001 From: Til Date: Sun, 24 May 2026 13:49:44 +0200 Subject: [PATCH 15/32] unnest all css --- copyparty/web/browser.css | 1233 +++++++++++++++++++------------------ 1 file changed, 627 insertions(+), 606 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 1d83ec15..c84cbdb6 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1021,16 +1021,16 @@ tr.play td:nth-child(1) a { font-family: monospace; font-family: var(--font-mono); } -.thumbed, -#ggrid>a.thumbed { - .thumb, - .th_ext { - display: none; - } - img { - position: static; - opacity: 1; - } +#ggrid>a.thumbed .thumb, +#ggrid>a.thumbed .th_ext, +.thumbed .thumb, +.thumbed .th_ext { + display: none !important; +} +#ggrid > a.thumbed img, +.thumbed img { + position: static; + opacity: 1; } .sel .gselchk { display: block; @@ -1056,21 +1056,19 @@ tr.play td:nth-child(1) a { } } -.play .imgcontainer { - &::before { - content: ''; - box-sizing: border-box; - position: absolute; - left: -50%; - top: -50%; - width: 200%; - height: 200%; - background-repeat: no-repeat; - background-size: 50% 50%, 50% 50%; - background-position: 0 0, 100% 0, 100% 100%, 0 100%; - background-image: linear-gradient(var(--a-hil), var(--a-hil)), linear-gradient(transparent, transparent), linear-gradient(var(--a-hil), var(--a-hil)), linear-gradient(transparent, transparent); - animation: rotate 10s linear infinite; - } +.play .imgcontainer::before { + content: ''; + box-sizing: border-box; + position: absolute; + left: -50%; + top: -50%; + width: 200%; + height: 200%; + background-repeat: no-repeat; + background-size: 50% 50%, 50% 50%; + background-position: 0 0, 100% 0, 100% 100%, 0 100%; + background-image: linear-gradient(var(--a-hil), var(--a-hil)), linear-gradient(transparent, transparent), linear-gradient(var(--a-hil), var(--a-hil)), linear-gradient(transparent, transparent); + animation: rotate 10s linear infinite; } html:not(.e) #ggrid>a.thumbed.dir:before { content: '📂'; @@ -1275,11 +1273,11 @@ html:not(.e) #ggrid>a.thumbed.dir:before { display: block; position: absolute; text-wrap-mode: nowrap; + text-wrap: nowrap; width: 100%; bottom: 100%; right: 0; font-size: 2em; - text-align: right; color: var(--fg-max); pointer-events: none; @@ -1291,6 +1289,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { #wtoggle { display: inline-block; text-wrap-mode: nowrap; + text-wrap: nowrap; text-align: center; max-width: calc(100% - 3.5em); overflow-x: auto; @@ -1328,6 +1327,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { font-weight: normal; margin-bottom: .2em; text-wrap-mode: wrap; + text-wrap: nowrap; } #up_quick_more.vis { display: block; @@ -1340,6 +1340,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { font-size: large; display: block; text-wrap-mode: nowrap; + text-wrap: nowrap; padding: .5em; cursor: pointer; border-radius: 10px; @@ -1448,27 +1449,27 @@ html:not(.e):not(.d) #up_quick .btn.on { font-size: .7em; display: block; } -.unfun { - #wfm span, - #wm3u span, - #zip1 span, - #wnp span { - font-size: 1em; - } - #wtoggle a { - font-size: .45em; - } - - #up_quick_more a:after { - content: "+" - } - - #up_quick_more a span, - #favico_onpage { - display: none; - } +.unfun #wfm span, +.unfun #wm3u span, +.unfun #zip1 span, +.unfun #wnp span { + font-size: 1em; } + +.unfun #wtoggle a { + font-size: .45em; +} + +.unfun #up_quick_more a:after { + content: "+" +} + +.unfun #up_quick_more a span, +.unfun #favico_onpage { + display: none; +} + #wnp span { font-size: .7em; } @@ -1767,12 +1768,13 @@ html.b #mu_outer { html.y #ops svg circle { stroke: black; } -#srv_name{ +#srv_name { padding-top: .5em; padding-bottom: .3em; margin-left: 2.2em; font-size: x-large; text-wrap-mode: nowrap; + text-wrap: nowrap; display: block; line-height: 1.5em; } @@ -2054,9 +2056,10 @@ html { #treeh { line-height: 2.2em; border-bottom: 1px solid var(--bg-d3); - display: block; + display: block; padding: .3em .5em; text-wrap-mode: nowrap; + text-wrap: nowrap; overflow-x: auto; overflow-y: hidden; } @@ -2703,19 +2706,19 @@ html.noscroll .sbar::-webkit-scrollbar { margin: 0; height: 100%; } - .full-image img, - .full-image video { - display: inline-block; - outline: none; - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - max-height: calc(100% - 1.4em); - margin-bottom: 1.4em; - vertical-align: middle; - transition: transform .23s, left .23s, top .23s, width .23s, height .23s; - } +.full-image img, +.full-image video { + display: inline-block; + outline: none; + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; + max-height: calc(100% - 1.4em); + margin-bottom: 1.4em; + vertical-align: middle; + transition: transform .23s, left .23s, top .23s, width .23s, height .23s; +} .immersive .full-image img, .immersive .full-image video { max-height: 100%; @@ -3010,12 +3013,13 @@ html.c .modalcontent { } .winbtn { right: 2.3em; - span { - font-family: initial; - font-size: small; - vertical-align: middle; - } } +.winbtn span { + font-family: initial; + font-size: small; + vertical-align: middle; +} + .closepane { position: absolute; cursor: default; @@ -3110,38 +3114,40 @@ html.c .modalcontent { margin: 0 -.4em; text-align: center; } + .modal.vis.unmodal { position: initial; max-height: 50vh; +} +.modal.vis.unmodal .modalcontent { + width: 100%; + max-width: none; + margin: 0; +} +.modal.vis.unmodal .closepane, +.modal.vis.unmodal .close { + display: none; +} +.modal.vis.unmodal .splitsub { + margin-bottom: .5em; +} - .modalcontent{ - width: 100%; - max-width: none; - margin: 0; - } - .closepane, - .close { - display: none; - } - .splitsub { - margin-bottom: .5em; - } +#cfg.unmodal .sub_section, +#cfg.unmodal #s_nav, +#cfg.unmodal .divider, +#cfg.unmodal .s_desc { + display: none; } -#cfg.unmodal { - .sub_section, - #s_nav, - .divider, - .s_desc { - display: none; - } - .setting, - #s_list { - display: contents; - } - .s_section { - margin: 0 .3em; - } + +#cfg.unmodal .setting, +#cfg.unmodal #s_list { + display: contents; } + +#cfg.unmodal .s_section { + margin: 0 .3em; +} + .c { display: inline-block; } @@ -3660,20 +3666,28 @@ html.b .ghead { border-bottom: var(--btn-bb); box-shadow: var(--btn-bs); } -html.b, -html.cz { - .ghead, - #wfp .btn:not(:hover), - #treeToggleBtn:not(:hover):not(.on), - #ops, - #path, - #wtoggle, - #up_quick_more, - #up_quick_btn:not(:hover):not(.on) { - backdrop-filter: blur(10px); - background: var(--btn-bg); - } + +html.b .ghead, +html.b #wfp .btn:not(:hover), +html.b #treeToggleBtn:not(:hover):not(.on), +html.b #ops, +html.b #path, +html.b #wtoggle, +html.b #up_quick_more, +html.b #up_quick_btn:not(:hover):not(.on) + +html.cz .ghead, +html.cz #wfp .btn:not(:hover), +html.cz #treeToggleBtn:not(:hover):not(.on), +html.cz #ops, +html.cz #path, +html.cz #wtoggle, +html.cz #up_quick_more, +html.cz #up_quick_btn:not(:hover):not(.on) { + backdrop-filter: blur(10px); + background: var(--btn-bg); } + html.c .modal .setting:hover { background: color-mix(in oklab, var(--bg-u5) 30%, transparent); } @@ -3863,38 +3877,36 @@ html.d #treepar { /* basically a mobile / phone layout */ #pathBar.thin { display: block; - - #path { - position: relative; - height: 2.2em; - margin: .5em 0 0 0; - z-index: -1; - } - #path a { - padding-top: .45em; - } - #wfp.shifted { - margin-left: 2.5em; - } - #actionsArea { - position: absolute; - top: .6em; - right: .6em; - } +} +#pathBar.thin #path { + position: relative; + height: 2.2em; + margin: .5em 0 0 0; + z-index: -1; +} +#pathBar.thin #path a { + padding-top: .45em; +} +#pathBar.thin #wfp.shifted { + margin-left: 2.5em; +} +#pathBar.thin #actionsArea { + position: absolute; + top: .6em; + right: .6em; } html.e #pathBar.thin #path { margin: 0; } -html:not(.e) #wrap.thin { - .ghead { - top: 7em; - padding: .3em; - } - #ghead { - text-wrap-mode: nowrap; - overflow-x: auto; - overflow-y: hidden; - } +html:not(.e) #wrap.thin .ghead { + top: 7em; + padding: .3em; +} +html:not(.e) #wrap.thin #ghead { + text-wrap-mode: nowrap; + text-wrap: nowrap; + overflow-x: auto; + overflow-y: hidden; } html.cz #wrap.thin .ghead{ top: 7.4em; @@ -3905,13 +3917,11 @@ html.a #wrap.thin .ghead { margin-left: -.5em; margin-right: -.5em; } -#wrap.thin { - .td_w { +#wrap.thin .td_w { width: calc(100vw - 8.5em); } - .td_s { - width: calc(50vw - 5em); - } +#wrap.thin .td_s { + width: calc(50vw - 5em); } html:not(.e) #treeh:not(.noa):after, html:not(.e) #wrap.thin #ghead:not(.noa)::after { @@ -3928,10 +3938,8 @@ html:not(.e) #wrap.thin #ghead:not(.noa)::after { html.a #wrap.thin #ghead:not(.noa)::after { background: linear-gradient(to left, var(--bg), transparent); } -html.e #wrap.thin { - .ghead { - top: 5.1em; - } +html.e #wrap.thin .ghead { + top: 5.1em; } @media (max-width: 50em){ #path { @@ -3988,11 +3996,9 @@ html.e #wrap.thin { top: 1em; right: 1em; } - html.fy { - #actionsArea, - #pathBar.thin #actionsArea { - right: 0; - } + html.fy #actionsArea, + html.fy #pathBar.thin #actionsArea { + right: 0; } #folder_search { margin: .5em 1em 0 .2em; @@ -4125,76 +4131,90 @@ html.e #wrap.thin { justify-content: center; gap: 1em; } - #ggrid.gallery { - gap: 2px 3px; - margin: .2em -.5em; - a::before { - padding: .1em 0; - margin: .3em; - } - a.img.thumbed { - max-height: none; - span:not(.th_ext) { - display: none; - } - .thumb, - img { - max-height: none; - height: calc(var(--grid-sz) - 8px); - } - } - } - #ggrid.gallery.nocrop { - text-align: center; - display: block; - margin: .2em -.5em; - a::before { - padding: .1em 0; - margin: .3em; - } - a { - margin-bottom: .2em; - .thumb, - img { - height: calc(var(--grid-sz) - 1.5em); - } - } - a.img.thumbed { - min-width: calc(var(--grid-sz) / 2); - width: auto; - .thumb { - height: var(--grid-sz); - } - img { - max-width: 100%; - height: var(--grid-sz); - } - span:not(.th_ext) { - display: none; - } - } - a.dir { - .thumb, - img { - height: calc(var(--grid-sz) - 1.5em - 10px); - margin-left: 10px; - margin-right: 10px; - } - } - } #ggrid > a { margin: unset; padding: unset; - } + } - #ggrid>a>span { + #ggrid > a > span { text-align: center; padding: .2em .2em .15em .2em; user-select: text; } + /*cropped gallery*/ + #ggrid.gallery { + gap: 2px 3px; + margin: .2em -.5em; + } + + #ggrid.gallery a::before { + padding: .1em 0; + margin: .3em; + } + + #ggrid.gallery a.img.thumbed { + max-height: none; + } + + #ggrid.gallery a.img.thumbed span:not(.th_ext) { + display: none; + } + + #ggrid.gallery a.img.thumbed .thumb, + #ggrid.gallery a.img.thumbed img { + max-height: none; + height: calc(var(--grid-sz) - 8px); + } } +/*uncropped gallery*/ +#ggrid.gallery.nocrop { + text-align: center; + display: block; + margin: .2em -.5em; +} + +#ggrid.gallery.nocrop a::before { + padding: .1em 0; + margin: .3em; +} + +#ggrid.gallery.nocrop a { + margin-bottom: .2em; +} + +#ggrid.gallery.nocrop a .thumb, +#ggrid.gallery.nocrop a img { + height: calc(var(--grid-sz) - 1.5em); +} + +#ggrid.gallery.nocrop a.img.thumbed { + min-width: calc(var(--grid-sz) / 2); + width: auto; +} + +#ggrid.gallery.nocrop a.img.thumbed .thumb { + height: var(--grid-sz); +} + +#ggrid.gallery.nocrop a.img.thumbed img { + max-width: 100%; + height: var(--grid-sz); +} + +#ggrid.gallery.nocrop a.img.thumbed span:not(.th_ext) { + display: none; +} + +#ggrid.gallery.nocrop a.dir .thumb, +#ggrid.gallery.nocrop a.dir img { + height: calc(var(--grid-sz) - 1.5em - 10px); + margin-left: 10px; + margin-right: 10px; +} + + @@ -5221,237 +5241,234 @@ html.e #actionsArea { html.f { --a: #e3f903; - --bg-u2:#191919; - + --bg-u2: #191919; --radius: 4px; - --g-sel-bg: color-mix(in xyz, var(--g-sel-b1) 70%, var(--bg-u2)); --bg-u1: color-mix(in srgb, var(--fg) 10%, transparent); - --font-main: 'orbitron', sans-serif; --font-mono: 'orbitron', monospace; font-family: 'orbitron', sans-serif; font-optical-sizing: auto; letter-spacing: .05em; +} - #path i { - border-color: var(--a); - background: none; - } - #spaceUsed_bar { - background: repeating-linear-gradient(-45deg, var(--a), var(--a) 6px, transparent 6px, transparent 12px); - } - #spaceTotal_bar { - border: var(--a) solid 1px; - } - #spaceMax { - display: none; - } - #spaceFree { - font-size: .8em; - } - #srv_name { - padding-top: .3em; - } - #gridsel { - content: "m.-select"; - } - #ggrid > a::before { - background: transparent; - } - #ggrid > a::before, - #ggrid > a:focus-visible::before, - #ggrid > a:hover::before { - font-size: 1.7em; - padding: .3em .2em; - margin: 0; - } - #ggrid > a.au::before { - padding: .4em .2em .4em .3em; - } - #ggrid > a:focus-visible .imgcontainer::before, - #ggrid > a:hover .imgcontainer::before { - border-color: var(--g-f-bg) transparent transparent var(--g-f-bg); - } - #ggrid > a.sel:focus-visible .imgcontainer::before, - #ggrid > a.sel:hover .imgcontainer::before { - border-color: var(--g-fsel-bg) transparent transparent var(--g-fsel-bg); - } - /* #wrap:not(.thin) .ghead::after, */ - .dir.thumbed .imgcontainer::before, - .au.thumbed:not(.play) .imgcontainer::before { - content: ""; - position: absolute; - left: 0; - border: var(--bg-u2) solid; - z-index: 3; - border-width: 4em 4em 0 0; - border-color: var(--bg-u2) transparent transparent var(--bg-u2); - margin: 0 2px; - } - #ggrid > a.play::before { - background: var(--a); - } - #ggrid > a.play span { - color: var(--fg); - } - #ggrid > a::before { - text-shadow: none !important; - } - #ggrid > a.sel .imgcontainer::before { - border-color: var(--g-sel-bg) transparent transparent var(--g-sel-bg); - } - #ggrid > a.sel img { - box-shadow: none; - } - .close:not(:hover), - #s_nav .btn:not(:hover), - #wfp .btn:not(:hover), - #treeToggleBtn:not(:hover):not(.on) { - background: var(--bg-u2); - } - #s_nav .btn { - border-color: var(--a); - border-width: 0 0 0 2px; - } - #s_nav .sub::before { - background: var(--bg-u2); - } - #pctl { - margin-top: .1em; - } - a { - /* text-decoration: underline; */ - text-decoration-color: color-mix(in oklab, currentColor 20%, transparent); - } - .ntree a + a { - line-height: 1.45em; - } - #tree .hl { - width: calc(100% - 4.2em); - } - #tree .hl::after { - content: ""; - right: .5em; - left: 0; - margin-top: -.3em; - margin-bottom: -2px; - z-index: -1; - position: absolute; - border: solid; - border-width: 2.08em 2.08em 0 0; - border-color: var(--btn-1-bg) transparent transparent var(--btn-1-bg); - } - #tree .hl:hover::after { - border-color: var(--btn-1h-bg) transparent transparent var(--btn-1h-bg); - } - #wrap:not(.thin) { - .ghead { - max-width: max-content; - } - .ghead::after { - left: calc(100% - 2px); - border-width: 2.7em 2.7em 0 0; - } - } - #s_list h3 { - background: linear-gradient(35deg, var(--bg-u2) 60%, var(--bg) 75%, var(--a2) 85%, var(--fg-weak) 90%); - } - .close { - margin: 1px; - } - .modalheader { - background: var(--a); - text-shadow: none; - color: var(--bg-u2); - padding-top: .5em; - padding-bottom: .5em; - } - #treeToggleBtn { - padding: .07em; - } - #widget:not(.thin) #pvol { - border-color: var(--a-dark); - } - #h_music { - right: 0; - } - .winbtn { - margin: .1em; - } - #u2tab tbody tr:hover td { - background: transparent; - } - #op_unpost a { - border-bottom: solid 1px var(--a); - } - #op_unpost a:not(:hover) { +html.f #path i { + border-color: var(--a); + background: none; +} +html.f #spaceUsed_bar { + background: repeating-linear-gradient(-45deg, var(--a), var(--a) 6px, transparent 6px, transparent 12px); +} +html.f #spaceTotal_bar { + border: var(--a) solid 1px; +} +html.f #spaceMax { + display: none; +} +html.f #spaceFree { + font-size: .8em; +} +html.f #srv_name { + padding-top: .3em; +} +html.f #gridsel { + content: "m.-select"; +} +html.f #ggrid > a::before { + background: transparent; +} +html.f #ggrid > a::before, +html.f #ggrid > a:focus-visible::before, +html.f #ggrid > a:hover::before { + font-size: 1.7em; + padding: .3em .2em; + margin: 0; +} +html.f #ggrid > a.au::before { + padding: .4em .2em .4em .3em; +} +html.f #ggrid > a:focus-visible .imgcontainer::before, +html.f #ggrid > a:hover .imgcontainer::before { + border-color: var(--g-f-bg) transparent transparent var(--g-f-bg); +} +html.f #ggrid > a.sel:focus-visible .imgcontainer::before, +html.f #ggrid > a.sel:hover .imgcontainer::before { + border-color: var(--g-fsel-bg) transparent transparent var(--g-fsel-bg); +} +/* #wrap:not(.thin) .ghead::after, */ +html.f .dir.thumbed .imgcontainer::before, +html.f .au.thumbed:not(.play) .imgcontainer::before { + content: ""; + position: absolute; + left: 0; + border: var(--bg-u2) solid; + z-index: 3; + border-width: 4em 4em 0 0; + border-color: var(--bg-u2) transparent transparent var(--bg-u2); + margin: 0 2px; +} +html.f #ggrid > a.play::before { + background: var(--a); +} +html.f #ggrid > a.play span { + color: var(--fg); +} +html.f #ggrid > a::before { + text-shadow: none !important; +} +html.f #ggrid > a.sel .imgcontainer::before { + border-color: var(--g-sel-bg) transparent transparent var(--g-sel-bg); +} +html.f #ggrid > a.sel img { + box-shadow: none; +} +html.f .close:not(:hover), +html.f #s_nav .btn:not(:hover), +html.f #wfp .btn:not(:hover), +html.f #treeToggleBtn:not(:hover):not(.on) { + background: var(--bg-u2); +} +html.f #s_nav .btn { + border-color: var(--a); + border-width: 0 0 0 2px; +} +html.f #s_nav .sub::before { + background: var(--bg-u2); +} +html.f #pctl { + margin-top: .1em; +} +html.f a { + /* text-decoration: underline; */ + text-decoration-color: color-mix(in oklab, currentColor 20%, transparent); +} +html.f .ntree a + a { + line-height: 1.45em; +} +html.f #tree .hl { + width: calc(100% - 4.2em); +} +html.f #tree .hl::after { + content: ""; + right: .5em; + left: 0; + margin-top: -.3em; + margin-bottom: -2px; + z-index: -1; + position: absolute; + border: solid; + border-width: 2.08em 2.08em 0 0; + border-color: var(--btn-1-bg) transparent transparent var(--btn-1-bg); +} +html.f #tree .hl:hover::after { + border-color: var(--btn-1h-bg) transparent transparent var(--btn-1h-bg); +} +html.f #wrap:not(.thin) .ghead { + max-width: max-content; +} + +html.f #wrap:not(.thin) .ghead::after { + left: calc(100% - 2px); + border-width: 2.7em 2.7em 0 0; +} +html.f #s_list h3 { + background: linear-gradient(35deg, var(--bg-u2) 60%, var(--bg) 75%, var(--a2) 85%, var(--fg-weak) 90%); +} +html.f .close { + margin: 1px; +} +html.f .modalheader { + background: var(--a); + text-shadow: none; + color: var(--bg-u2); + padding-top: .5em; + padding-bottom: .5em; +} +html.f #treeToggleBtn { + padding: .07em; +} +html.f #widget:not(.thin) #pvol { + border-color: var(--a-dark); +} +html.f #h_music { + right: 0; +} +html.f .winbtn { + margin: .1em; +} +html.f #u2tab tbody tr:hover td { + background: transparent; +} +html.f #op_unpost a { + border-bottom: solid 1px var(--a); +} + html.f #op_unpost a:not(:hover) { color: color-mix(in oklab, var(--a), var(--fg)); } - #u2c3t span { - font-size: .8em; - } - #u2cards span { - font-size: .8em; - } - #goh { - font-size: 1.2em; - } - #gridzoom a, - #gridchop a, - #twig, #twobytwo, - #nthread_sub, #nthread_add { - font-family: monospace; - font-size: 1.6em; - } - #qs_btns a { - margin: .1em 0; - padding: .3em; - } - .unmodal, - #wrap>.opview { - margin-left: -.6em; - margin-right: -.6em; - border-radius: 0 0 var(--radius) var(--radius); - } - .th_ext .inner { - font-size: .7em; - } +html.f #u2c3t span { + font-size: .8em; } +html.f #u2cards span { + font-size: .8em; +} +html.f #goh { + font-size: 1.2em; +} +html.f #gridzoom a, +html.f #gridchop a, +html.f #twig, #twobytwo, +html.f #nthread_sub, #nthread_add { + font-family: monospace; + font-size: 1.6em; +} +html.f #qs_btns a { + margin: .1em 0; + padding: .3em; +} +html.f .unmodal, +html.f #wrap > .opview { + margin-left: -.6em; + margin-right: -.6em; + border-radius: 0 0 var(--radius) var(--radius); +} +html.f .th_ext .inner { + font-size: .7em; +} + html.fz { --bg: #2e258c; --bg: hsl(from var(--a) calc(h * 2.5 + 85) calc(s * .6) calc(l * .7)); --a2: hsl(from var(--bg) calc(h - 40) calc(s * 1.2) calc(l * 1.4)); - - #wrap::before { - content: ''; - position: fixed; - inset: 0; - background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); - opacity: .4; - filter: brightness(50%) contrast(300%) saturate(0); - z-index: -1; - } - #srv_name { - padding-top: .5em; - } - #up_status_h { - color: var(--bg-u2); - text-shadow: none; - font-size: large; - } - .ghead, - #path, - #ops { - border: var(--btn-bb); - } - .ghead { - margin-left: -1px; - } - #wfp .btn { - padding: .2em .4em; - } } +html.fz #wrap::before { + content: ''; + position: fixed; + inset: 0; + background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); + opacity: .4; + filter: brightness(50%) contrast(300%) saturate(0); + z-index: -1; +} +html.fz #srv_name { + padding-top: .5em; +} +html.fz #up_status_h { + color: var(--bg-u2); + text-shadow: none; + font-size: large; +} +html.fz .ghead, +html.fz #path, +html.fz #ops { + border: var(--btn-bb); +} +html.fz .ghead { + margin-left: -1px; +} +html.fz #wfp .btn { + padding: .2em .4em; +} + html.fy { --a: #305797; --fg: #f3f3f3; @@ -5460,193 +5477,197 @@ html.fy { --btn-bg: var(--fg); --scrl-hint: var(--bg-u2); --tree-bg: var(--bg-u2); - - * { - box-shadow: none !important; - text-shadow: none !important; - /* transition: all .15s; */ - } - - #wrap:not(.thin) .ghead { - top: 3.4em; - } - #blogout { - color: var(--fg) !important; - } - #blogout:hover { - color: var(--a) !important; - } - select, - input, - .setting { - color: var(--bg-u2) !important; - } - #s_list h3 { - background: linear-gradient(45deg, var(--a) calc(100% - 3em), #ccc calc(100% - 3em), #ccc calc(100% - 2em), transparent calc(100% - 2em)); - } - #up_status_h, - .modalheader { - border-bottom: #f3f3f3 solid 1px; - color: #f3f3f3; - } - #up_status_h { - border: none; - font-size: large; - } - #reloc_up:not(:hover){ - color: #f3f3f3; - } - .close:not(:hover) { - background: none; - border-color: transparent; - font-weight: bolder; - color: #f3f3f3; - } - .close:hover { - background: rgb(207, 22, 28); - color: #f3f3f3; - } - #up2k, - #files { - --fg: #191919; - color: var(--fg); - --chk-fg: var(--fg); - } - #path { - i { - border-color: var(--fg); - } - a { - padding-top: .7em; - } - a:hover { - color: var(--a); - } - } - #wfs, - #tree ul a.par { - color: var(--fg); - } - #treeToggleBtn { - padding: .2em; - margin: 0 !important; - border: none; - } - #srv_name { - line-height: 1.4em; - } - #pathBar, - .opbox:not(#op_bup) { - background: var(--bg-u2); - border-bottom: var(--btn-bb); - } - #pathBar { - padding: 0; - } - #ops, - #path, - .ghead { - border: var(--btn-bb); - } - #actionsArea, - #ops, - #path, - #wfp, - #wfp .btn { - margin: 0; - border: none; - } - #wfp.shifted { - margin-left: 2.5em; - } - #wfp .btn { - padding: .3em; - } - #bbox-overlay #bbox-next .btn, #bbox-overlay #bbox-prev .btn, - #bbox-btns .btn:not(.on) { - background: var(--bg-u2); - } - #tth { - display: none; - } - #wrap { - background-size: 20px 20px; background-image: radial-gradient(color-mix(in oklab, var(--bg-u2) 20%, transparent) 1px, transparent 1px); - } - .modalheader::after { - position: absolute; - border: solid; - border-color: transparent transparent var(--bg) transparent; - border-width: 10px; - content: ""; - width: 30%; - margin-bottom: -1.2em; - right: 5.7em; - } - #ops { - height: auto; - a { - padding: .29em .4em; - } - a:not(:hover):not(.act) { - color: var(--fg); - } - } - #actionsArea { - top: 0 !important; - } - #wtoggle{ - margin: 0; - border-bottom: none; - border-radius: var(--radius) 0 0 0; - } - #up_quick { - margin: 0; - border-radius: 0; - } - #up_quick_btn { - border-radius: 0; - border-width: 1px 0 0 0; - margin: 0; - } - #wtico { - line-height: 1.1em; - border-radius: 0; - } - #wtoggle, #wtoggle * { - line-height: .99em; - } - #wrap:before { - content: ""; - width: 500px; - height: 500px; - border: var(--a) solid 10px; - border-radius: 100%; - position: fixed; - z-index: -1; - right: 10px; - filter: blur(3px); - opacity: .9; - } - #qs_btns a { - color: var(--bg-u2); - } - .winbtn:not(:hover) { - background: none; - border-color: transparent; - } - #doc { - background: var(--bg); - } - .logue { - color: var(--a); - } } -html.f.unfun { - #ops a { - padding: .5em; - } - #srchfolder_div { - left: 6.7em; - } +html.fy * { + box-shadow: none !important; + text-shadow: none !important; + /* transition: all .15s; */ } +html.fy #wrap:not(.thin) .ghead { + top: 3.4em; +} +html.fy #blogout { + color: var(--fg) !important; +} +html.fy #blogout:hover { + color: var(--a) !important; +} +html.fy select, +html.fy input, +html.fy .setting { + color: var(--bg-u2) !important; +} +html.fy #s_list h3 { + background: linear-gradient(45deg, var(--a) calc(100% - 3em), #ccc calc(100% - 3em), #ccc calc(100% - 2em), transparent calc(100% - 2em)); +} +html.fy #up_status_h, +html.fy .modalheader { + border-bottom: #f3f3f3 solid 1px; + color: #f3f3f3; +} +html.fy #up_status_h { + border: none; + font-size: large; +} +html.fy #reloc_up:not(:hover) { + color: #f3f3f3; +} +html.fy .close:not(:hover) { + background: none; + border-color: transparent; + font-weight: bolder; + color: #f3f3f3; +} +html.fy .close:hover { + background: rgb(207, 22, 28); + color: #f3f3f3; +} +html.fy #up2k, +html.fy #files { + --fg: #191919; + color: var(--fg); + --chk-fg: var(--fg); +} +html.fy #path i { + border-color: var(--fg); +} + +html.fy #path a { + padding-top: .7em; +} + +html.fy #path a:hover { + color: var(--a); +} + +html.fy #wfs, +html.fy #tree ul a.par { + color: var(--fg); +} +html.fy #treeToggleBtn { + padding: .2em; + margin: 0 !important; + border: none; +} +html.fy #srv_name { + line-height: 1.4em; +} +html.fy #pathBar, +html.fy .opbox:not(#op_bup) { + background: var(--bg-u2); + border-bottom: var(--btn-bb); +} +html.fy #pathBar { + padding: 0; +} +html.fy #ops, +html.fy #path, +html.fy .ghead { + border: var(--btn-bb); +} +html.fy #actionsArea, +html.fy #ops, +html.fy #path, +html.fy #wfp, +html.fy #wfp .btn { + margin: 0; + border: none; +} +html.fy #wfp.shifted { + margin-left: 2.5em; +} +html.fy #wfp .btn { + padding: .3em; +} +html.fy #bbox-overlay #bbox-next .btn, +html.fy #bbox-overlay #bbox-prev .btn, +html.fy #bbox-btns .btn:not(.on) { + background: var(--bg-u2); +} +html.fy #tth { + display: none; +} +html.fy #wrap { + background-size: 20px 20px; + background-image: radial-gradient(color-mix(in oklab, var(--bg-u2) 20%, transparent) 1px, transparent 1px); +} +html.fy .modalheader::after { + position: absolute; + border: solid; + border-color: transparent transparent var(--bg) transparent; + border-width: 10px; + content: ""; + width: 30%; + margin-bottom: -1.2em; + right: 5.7em; +} +html.fy #ops { + height: auto; +} +html.fy #ops a { + padding: .29em .4em; +} + +html.fy #ops a:not(:hover):not(.act) { + color: var(--fg); +} +html.fy #actionsArea { + top: 0 !important; +} +html.fy #wtoggle { + margin: 0; + border-bottom: none; + border-radius: var(--radius) 0 0 0; +} +html.fy #up_quick { + margin: 0; + border-radius: 0; +} +html.fy #up_quick_btn { + border-radius: 0; + border-width: 1px 0 0 0; + margin: 0; +} +html.fy #wtico { + line-height: 1.1em; + border-radius: 0; +} +html.fy #wtoggle, +html.fy #wtoggle * { + line-height: .99em; +} +html.fy #wrap:before { + content: ""; + width: 500px; + height: 500px; + border: var(--a) solid 10px; + border-radius: 100%; + position: fixed; + z-index: -1; + right: 10px; + filter: blur(3px); + opacity: .9; +} +html.fy #qs_btns a { + color: var(--bg-u2); +} +html.fy .winbtn:not(:hover) { + background: none; + border-color: transparent; +} +html.fy #doc { + background: var(--bg); +} +html.fy .logue { + color: var(--a); +} + +html.f.unfun #ops a { + padding: .5em; +} +html.f.unfun #srchfolder_div { + left: 6.7em; +} + + From f15c0281b3d1d6a608c23570350408858a3821d8 Mon Sep 17 00:00:00 2001 From: Til Date: Sun, 24 May 2026 14:18:14 +0200 Subject: [PATCH 16/32] IE fixes --- copyparty/web/browser.css | 11 +++++++---- copyparty/web/browser.js | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index c84cbdb6..b35b0734 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -3096,7 +3096,7 @@ html.c .modalcontent { background: var(--bg-u1); } .s_desc{ - margin: 0 0 0 0; + margin: 0 .3em; font-size: medium; color: var(--fg-weak); } @@ -3116,8 +3116,9 @@ html.c .modalcontent { } .modal.vis.unmodal { - position: initial; + position: static; max-height: 50vh; + z-index: 1; } .modal.vis.unmodal .modalcontent { width: 100%; @@ -3141,7 +3142,9 @@ html.c .modalcontent { #cfg.unmodal .setting, #cfg.unmodal #s_list { + display: inline-block; display: contents; + border: none; } #cfg.unmodal .s_section { @@ -5416,8 +5419,8 @@ html.f #goh { } html.f #gridzoom a, html.f #gridchop a, -html.f #twig, #twobytwo, -html.f #nthread_sub, #nthread_add { +html.f #twig, html.f #twobytwo, +html.f #nthread_sub, html.f #nthread_add { font-family: monospace; font-size: 1.6em; } diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index bd35a22c..725b49e8 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -1154,7 +1154,7 @@ ebi('h_bup').onclick = function() { var musicSettings = ( '

🎵 ' + L.ot_mp + '

' + - '

✅ ' + L.cl_opts + '

' + + '

🎧 ' + L.cl_opts + '

' + '🔂' + ' {%- endif %} - - + {%- if js %} {%- endif %} @@ -313,8 +313,8 @@ Date.now(); function jsldp(a, b) { 2 != window[a] && alert("FATAL ERROR: cannot load " + b + ".js due to unreliable network or broken reverse-proxy; try CTRL-SHIFT-R") } jsldp("J_UTL", "util"); jsldp("J_BRW", "browser"); - jsldp("J_BBX", "baguettebox"); - jsldp("J_U2K", "up2k"); + // jsldp("J_BBX", "baguettebox"); + // jsldp("J_U2K", "up2k"); diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 725b49e8..2a1bc0bc 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -2,6 +2,34 @@ var J_BRW = 1; + +// start DL of secondary JS +// based on https://stackoverflow.com/questions/4845762/onload-handler-for-script-tag-in-internet-explorer +function loadScript(name, id) { + var head = (document.getElementsByTagName("head")[0] || document.head) + var s = document.createElement('script'); + s.src = window.SR + '/.cpr/w/' + name + '.js?_=' + window.TS; + var done = false; + s.onload = s.onreadystatechange = function() { + if (!done && (!this.readyState || + this.readyState === "loaded" || this.readyState === "complete") ) { + done = true; + + jsldp(id, name); + + // Handle memory leak in IE + s.onload = s.onreadystatechange = null; + if ( head && s.parentNode ) { + head.removeChild(s); + } + } + }; + head.appendChild(s); +} +loadScript('baguettebox', "J_BBX"); +loadScript('up2k', "J_U2K"); + + // disables emojis var fun_tgl = sread('fun_tgl'); if( fun_tgl == null) @@ -9089,7 +9117,7 @@ function apply_perms(res) { ebi('u2rand').parentNode.style.display = 'none'; u2ts = res.u2ts; - if (up2k) + if (up2k && up2k.set_fsearch) up2k.set_fsearch(); if (res.cfg) @@ -11070,7 +11098,7 @@ function reload_browser() { for (var a = 0; a < ns.length; a++) clmod(ebi(ns[a]), 'hidden', ebi('unsearch')); - if (up2k) + if (up2k && up2k.set_fsearch) up2k.set_fsearch(); thegrid.setdirty(); From 6602a88a758d0b985798084d472e8e742f1fe890 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Sun, 24 May 2026 23:48:06 +0200 Subject: [PATCH 23/32] add wait loop to up-only folder init --- copyparty/web/browser.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 2a1bc0bc..0f0d559b 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -9117,8 +9117,9 @@ function apply_perms(res) { ebi('u2rand').parentNode.style.display = 'none'; u2ts = res.u2ts; - if (up2k && up2k.set_fsearch) - up2k.set_fsearch(); + + if(up2k) + wait_set_fsearch(); if (res.cfg) rw_edit = res.rw_edit; @@ -9141,6 +9142,16 @@ function apply_perms(res) { clmod(ebi('opa_mkd'), 'vis', up_only); } +function wait_set_fsearch(){ + var t = setInterval(function () { + if (!up2k || !up2k.set_fsearch) + return; + + clearInterval(t); + up2k.set_fsearch(); + }, 50); +} + function tr2id(tr) { try { @@ -11098,8 +11109,8 @@ function reload_browser() { for (var a = 0; a < ns.length; a++) clmod(ebi(ns[a]), 'hidden', ebi('unsearch')); - if (up2k && up2k.set_fsearch) - up2k.set_fsearch(); + if(up2k) + wait_set_fsearch(); thegrid.setdirty(); msel.render(); From f50c870916981913138fc38573107f16e367a88b Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Mon, 25 May 2026 00:46:27 +0200 Subject: [PATCH 24/32] priorotize bbox image loading when hash is given --- copyparty/web/baguettebox.js | 3 +++ copyparty/web/browser.css | 5 +++++ copyparty/web/browser.js | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index b1f12792..026514b0 100644 --- a/copyparty/web/baguettebox.js +++ b/copyparty/web/baguettebox.js @@ -742,6 +742,8 @@ window.baguetteBox = (function () { } function showOverlay(chosenImageIndex) { + clmod(ebi('ggrid'), 'waiting', true); + if (options.noScrollbars) { var a = document.documentElement.style.overflowY, b = document.body.style.overflowY; @@ -765,6 +767,7 @@ window.baguetteBox = (function () { loadImage(currentIndex, function () { preloadNext(currentIndex); preloadPrev(currentIndex); + clmod(ebi('ggrid'), 'waiting', false); }); show_buttons(0); diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index b41f2b10..0151c3e3 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -4132,6 +4132,11 @@ html.e #wrap.thin .ghead { display: none; } } + +/* prevent load of new thumbnails */ +#ggrid.waiting a:not(.thumbed) img { + display: none; +} @supports (display: grid) and (gap: 1em) { #ggrid { display: grid; diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 0f0d559b..f66401f6 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -8762,6 +8762,10 @@ var treectl = (function () { vbar.onresize(); showfile.addlinks(); drag.initfiles(); + + var media = scan_hash(location.hash); + if(media && media[0] == 'g') + clmod(ebi('ggrid'), 'waiting', true); setTimeout(eval_hash, 1); }; From c9515ca85cb169326239235f7d9310fd9bd3d00c Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Mon, 25 May 2026 00:50:23 +0200 Subject: [PATCH 25/32] more aggressive image load prevention (?) --- copyparty/web/browser.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 0151c3e3..b552ad99 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -4134,7 +4134,7 @@ html.e #wrap.thin .ghead { } /* prevent load of new thumbnails */ -#ggrid.waiting a:not(.thumbed) img { +#ggrid.waiting img { display: none; } @supports (display: grid) and (gap: 1em) { From 78de02123eb128847e1519004bf5eac574e94369 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Mon, 25 May 2026 00:55:25 +0200 Subject: [PATCH 26/32] undo last commit, set bbox image fetch prio to high --- copyparty/web/baguettebox.js | 1 + copyparty/web/browser.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index 026514b0..ab825797 100644 --- a/copyparty/web/baguettebox.js +++ b/copyparty/web/baguettebox.js @@ -691,6 +691,7 @@ window.baguetteBox = (function () { for (var i = 0, fullImage; i < gallery.length; i++) { fullImage = mknod('div', 'baguette-img-' + i); fullImage.className = 'full-image'; + fullImage.fetchPriority = 'high'; imagesElements.push(fullImage); imagesFiguresIds.push('bbox-figure-' + i); diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index b552ad99..0151c3e3 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -4134,7 +4134,7 @@ html.e #wrap.thin .ghead { } /* prevent load of new thumbnails */ -#ggrid.waiting img { +#ggrid.waiting a:not(.thumbed) img { display: none; } @supports (display: grid) and (gap: 1em) { From befdc06a42c7927143aae6117d9dd30e9150479e Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Mon, 25 May 2026 00:59:15 +0200 Subject: [PATCH 27/32] set fetch priority for thumbnails to low instead --- copyparty/web/baguettebox.js | 1 - copyparty/web/browser.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index ab825797..026514b0 100644 --- a/copyparty/web/baguettebox.js +++ b/copyparty/web/baguettebox.js @@ -691,7 +691,6 @@ window.baguetteBox = (function () { for (var i = 0, fullImage; i < gallery.length; i++) { fullImage = mknod('div', 'baguette-img-' + i); fullImage.className = 'full-image'; - fullImage.fetchPriority = 'high'; imagesElements.push(fullImage); imagesFiguresIds.push('bbox-figure-' + i); diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index f66401f6..96a78505 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -6602,7 +6602,7 @@ window.thegrid = (function () { (isdir || ext == 'unk' || ext.startsWith('/') ? '' : '' + ext + '') + - '
' + ao.innerHTML + ''); } ggrid.innerHTML = html.join('\n'); From f33dcd307a3180a954e117c4291e3151670bf7e4 Mon Sep 17 00:00:00 2001 From: Til Date: Mon, 25 May 2026 10:35:28 +0200 Subject: [PATCH 28/32] prevent touch dsel on various elements --- copyparty/web/baguettebox.js | 2 +- copyparty/web/browser.html | 2 +- copyparty/web/browser.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index 026514b0..570338d9 100644 --- a/copyparty/web/baguettebox.js +++ b/copyparty/web/baguettebox.js @@ -303,7 +303,7 @@ window.baguetteBox = (function () { if (!overlay) { var ctr = mknod('div'); ctr.innerHTML = ( - '