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;