From 8b05cd5f1690d15bef31f454472d6300ea0d93b1 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Sun, 10 May 2026 22:27:43 +0200 Subject: [PATCH] radius setting --- copyparty/web/browser.css | 35 ++++++++++++++++------------------- copyparty/web/browser.js | 25 +++++++++++++++++++++++++ copyparty/web/ui.css | 2 +- 3 files changed, 42 insertions(+), 20 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 679b21ef..3e3d2b96 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -965,7 +965,7 @@ tr.play td:nth-child(1) a { #ggrid>a img { z-index: 1; border-radius: 5px; - border-radius: calc(var(--radius) / 3 * 2); + border-radius: var(--radius); max-width: 10em; max-width: calc(var(--grid-sz) - 4px); margin: 0 auto; @@ -1259,7 +1259,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { line-height: 1.2em; vertical-align: bottom; padding: .05em .5em .1em .3em; - border-radius: calc(var(--radius) / 2) 0 0 0; + border-radius: var(--radius) 0 0 0; pointer-events: all; border-width: 1px 0 0 1px; } @@ -1289,7 +1289,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { overflow-y: hidden; margin: 0 .1em .1em .2em; box-shadow: 0 0 .5em var(--mp-sh); - border-radius: calc(var(--radius) / 2); + border-radius: var(--radius); } #up_quick { display: inline-block; @@ -1297,7 +1297,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { margin: 0 .2em .2em .1em; font-size: .7em; border-radius: 10px; - border-radius: calc(var(--radius) * 1.2); + border-radius: var(--radius); background: #cde; background: var(--bg-u2); } @@ -1308,7 +1308,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { font-weight: bold; box-shadow: 0 0 .5em color-mix(in oklab, var(--a) 20%, transparent); border-radius: 10px; - border-radius: calc(var(--radius) * 1.2); + border-radius: var(--radius); text-align: right; } .open #up_quick_more { @@ -1335,7 +1335,7 @@ html:not(.e) #ggrid>a.thumbed.dir:before { padding: .5em; cursor: pointer; border-radius: 10px; - border-radius: calc(var(--radius) * 1.6); + border-radius: var(--radius); } #up_quick .overlay_plus { right: .3em; @@ -1528,7 +1528,7 @@ html:not(.e):not(.d) #up_quick .btn.on { } #barpos, #barbuf { - border-radius: 9em; + border-radius: var(--radius); position: absolute; top: 0; height: 100%; @@ -2244,7 +2244,7 @@ html.b .btn { background: #fff; background: var(--bg-u2); border-radius: 5px; - border-radius: calc(var(--radius) * 1.3); + border-radius: var(--radius); padding: 0 .2em; line-height: 2.3em; margin-bottom: 1.5em; @@ -2841,7 +2841,7 @@ html.y #bbox-overlay figcaption a { grid-template-rows: max-content auto; margin: 5vh 5vw; border-radius: 10px; - border-radius: calc(var(--radius) * 1.6); + border-radius: var(--radius); border: var(--a) solid 1px; background: #fff; background: var(--bg); @@ -3022,7 +3022,7 @@ html.c .modalcontent { box-shadow: 0 0 0 #999; border: .1em solid var(--ud-b1); border-radius: 10px; - border-radius: calc(var(--radius) * 1.6); + border-radius: var(--radius); border-width: 2px; color: #fff; transition: all 0.12s; @@ -3528,7 +3528,7 @@ html.b #u2etas { background: var(--bg-d1); border: 1px solid var(--bg-u1); border-width: 2px; - border-radius: calc(var(--radius) * 1.6); + border-radius: var(--radius); } html.c #u2foot:empty, html.b #u2foot:empty { @@ -3563,13 +3563,10 @@ html.by #tree { -html.d #barpos, -html.d #barbuf, -html.d #pvol, -html.a #barpos, -html.a #barbuf, -html.a #pvol { - border-radius: .2em; +html.b #barpos, +html.b #barbuf, +html.b #pvol { + border-radius: calc(var(--radius) * 3); } html.a #barpos { box-shadow: 0 0 0 1px rgba(0,0,0,0.4); @@ -3925,7 +3922,7 @@ html.e #wrap.thin { @supports (display: grid) and (gap: 1em) { #ggrid { display: grid; - margin: 0 .5em; + margin: .5em; padding: unset; grid-template-columns: repeat(auto-fit,var(--grid-sz)); justify-content: center; diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index dda6d159..82cbf9d7 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -231,6 +231,7 @@ if (1) "cl_hfsz": "filesize", "cl_themes": "theme", "cl_accent": "accent color (keep empty for default)$Nsupports any css color, like rgba(255, 210, 0, 1)", + "cl_radius": "corner radius in pixels (keep empty for default)", "cl_fun": "enables or disables the FUN 🎉🚀👽🐹🥳❗ (reload the page after changing this setting)", "cl_langs": "language", "cl_ziptype": "folder download", @@ -1250,6 +1251,7 @@ ebi('op_cfg').innerHTML = ( ' ' + ' ' + ' ' + +' ' + ' 🥳\n' + ' \n' + '\n' + @@ -1444,6 +1446,29 @@ if(accent && accent.length > 3){ ebi('accent').value = ebi('accent_picker').value = accent; } +// corner radius +ebi('radius').oninput = function () { + var r = parseFloat(this.value); + + clmod(ebi('radius'), 'invalid', this.value.length != 0 && r.length == 0); + if(r == radius) + return; + + if(isNaN(r)) + r = '' + swrite('radius', r); + var setV = r == '' ? '' : (r + 'px'); + document.documentElement.style.setProperty('--radius', setV); + console.log(setV); +} +var radius = sread('radius'); +if(radius){ + console.log('read radius from settings: ' + radius); + document.documentElement.style.setProperty('--radius', parseFloat(radius) + 'px'); + ebi('radius').value = radius; +} + + // no fun allowed bcfg_bind(this, 'fun_tgl', 'fun_tgl'); diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css index bd578344..f7fb85b9 100644 --- a/copyparty/web/ui.css +++ b/copyparty/web/ui.css @@ -9,7 +9,7 @@ --bg-max: #080808; --a: #fc5; accent-color: var(--a); - --radius: .3em; + --radius: 7px; --fg-max: #fefefe; --bg-max: #010101;