mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-06-20 21:22:26 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

needlessly nice IE UI

Browse source
This commit is contained in:
Til Schmitter 2026-04-26 23:41:18 +02:00
parent e0483893ce
commit 6d024c0033
2 changed files with 67 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
copyparty/web/browser.css
View file

@ -533,13 +533,21 @@ html.dy #pathBar {
text-shadow: none; text-shadow: none;
} }
html,body,tr,th,td,#files,a,#blogout { html,body,tr,th,td,#files,a,#blogout {
color: inherit; /* color: inherit; */
background: none; background: none;
font-weight: inherit; font-weight: inherit;
font-size: inherit; font-size: inherit;
padding: 0; padding: 0;
border: none; border: none;
} }
body {
background: #222;
}
@supports (background: var(--bg)) {
body {
background: none;
}
}
#files { #files {
margin-top: .2em; margin-top: .2em;
} }
@ -615,6 +623,7 @@ html .ayjump:focus-visible {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
background: var(--bg-u2); background: var(--bg-u2);
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
} }
#pathBar #folder_search { #pathBar #folder_search {
@ -635,6 +644,7 @@ html .ayjump:focus-visible {
width: 1em; width: 1em;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
} }
#qs_btns a:hover { #qs_btns a:hover {
@ -829,6 +839,7 @@ html.y #files span.fsz_P { font-weight: bold }
margin: -1em .3em -1em -1.7em; margin: -1em .3em -1em -1.7em;
display: inline-block; display: inline-block;
transform: skew(-25deg); transform: skew(-25deg);
border-right: #222 solid 2px;
border-right: var(--bg) solid 2px; border-right: var(--bg) solid 2px;
background: linear-gradient(70deg, transparent 40%, color-mix(var(--bg-max) 25%, transparent) 75%, color-mix(var(--bg-max) 35%, transparent)); background: linear-gradient(70deg, transparent 40%, color-mix(var(--bg-max) 25%, transparent) 75%, color-mix(var(--bg-max) 35%, transparent));
} }
@ -852,6 +863,8 @@ html.y #path a:hover {
display: none; display: none;
} }
.logue.raw { .logue.raw {
background: #ccc;
background: var(--transparent);
white-space: pre; white-space: pre;
font-family: 'scp', 'consolas', monospace; font-family: 'scp', 'consolas', monospace;
font-family: var(--font-mono), 'scp', 'consolas', monospace; font-family: var(--font-mono), 'scp', 'consolas', monospace;
@ -1003,6 +1016,7 @@ html.dz #flogout {
width: var(--grid-sz); width: var(--grid-sz);
vertical-align: top; vertical-align: top;
overflow-wrap: break-word; overflow-wrap: break-word;
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
padding: .3em; padding: .3em;
margin: .5em; margin: .5em;
@ -1021,6 +1035,7 @@ html.dz #flogout {
} }
#ggrid>a img { #ggrid>a img {
z-index: 1; z-index: 1;
border-radius: 5px;
border-radius: calc(var(--radius) / 3 * 2); border-radius: calc(var(--radius) / 3 * 2);
max-width: 10em; max-width: 10em;
max-width: calc(var(--grid-sz) - 4px); max-width: calc(var(--grid-sz) - 4px);
@ -1042,6 +1057,7 @@ html.dz #flogout {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
box-sizing: border-box; box-sizing: border-box;
margin: -3px -2px; margin: -3px -2px;
@ -1087,6 +1103,7 @@ html.dz #flogout {
margin: -.4em; margin: -.4em;
text-shadow: 0 0 .1em var(--bg-max); text-shadow: 0 0 .1em var(--bg-max);
background: linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2)); background: linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2));
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
font-size: 2em; font-size: 2em;
transition: font-size .15s, margin .15s; transition: font-size .15s, margin .15s;
@ -1269,6 +1286,7 @@ html.dz #flogout {
text-align: center; text-align: center;
text-shadow: none; text-shadow: none;
box-shadow: 0 0 .5em var(--mp-sh); box-shadow: 0 0 .5em var(--mp-sh);
border-radius: 5px 0 0 0;
border-radius: calc(var(--radius) * 0.7) 0 0 0; border-radius: calc(var(--radius) * 0.7) 0 0 0;
padding: 0 0 0 .1em; padding: 0 0 0 .1em;
color: var(--fg-max); color: var(--fg-max);
@ -1276,8 +1294,9 @@ html.dz #flogout {
#up_quick, #up_quick,
#wtoggle, #wtoggle,
#widgeti { #widgeti {
background: #ccc; background: #cde;
background: var(--bg-u2); background: var(--bg-u2);
border: 1px solid #222;
border: 1px solid var(--bg-u3); border: 1px solid var(--bg-u3);
} }
#up_quick { #up_quick {
@ -1289,6 +1308,7 @@ html.dz #flogout {
font-weight: bold; font-weight: bold;
box-shadow: 0 0 .5em color-mix(var(--a) 20%, transparent); box-shadow: 0 0 .5em color-mix(var(--a) 20%, transparent);
transition: all .15s; transition: all .15s;
border-radius: 10px;
border-radius: calc(var(--radius) * 1.2); border-radius: calc(var(--radius) * 1.2);
text-align: right; text-align: right;
} }
@ -1301,6 +1321,7 @@ html.dz #flogout {
} }
#up_quick_more.vis { #up_quick_more.vis {
display: block; display: block;
box-shadow: 0 0 .5em color-mix(var(--mp-sh) 20%, transparent);
} }
#up_quick_more a:hover { #up_quick_more a:hover {
background: var(--btn-h-bg); background: var(--btn-h-bg);
@ -1312,6 +1333,7 @@ html.dz #flogout {
text-wrap-mode: nowrap; text-wrap-mode: nowrap;
padding: .5em; padding: .5em;
cursor: pointer; cursor: pointer;
border-radius: 10px;
border-radius: calc(var(--radius) * 1.6); border-radius: calc(var(--radius) * 1.6);
} }
#up_quick .overlay_plus { #up_quick .overlay_plus {
@ -1587,7 +1609,7 @@ html.a #up_quick .btn.on {
#ops a { #ops a {
/* fallback if emojis don't render */ /* fallback if emojis don't render */
border: #777 solid 1px; border: #777 solid 1px;
border-radius: var(--radius); border-radius: 5px;
border: var(--transparent) solid 1px; border: var(--transparent) solid 1px;
color: var(--a); color: var(--a);
@ -1598,8 +1620,9 @@ html.a #up_quick .btn.on {
#ops a.act { #ops a.act {
color: #fff; color: #fff;
color: var(--op-aa-fg); color: var(--op-aa-fg);
background: #000; background: rgb(85, 144, 255);
background: var(--op-aa-bg); background: var(--op-aa-bg);
border-radius: 0 0 5px 5px;
border-radius: 0 0 var(--radius) var(--radius); border-radius: 0 0 var(--radius) var(--radius);
border-bottom: .3em solid var(--a); border-bottom: .3em solid var(--a);
box-shadow: var(--op-aa-sh); box-shadow: var(--op-aa-sh);
@ -1638,6 +1661,7 @@ html.y #ops svg circle {
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
height: 2em; height: 2em;
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
background: var(--bg-u2); background: var(--bg-u2);
} }
@ -1667,6 +1691,7 @@ html.y #ops svg circle {
} }
.opbox { .opbox {
padding: .5em; padding: .5em;
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
border-width: 1px; border-width: 1px;
max-width: 41em; max-width: 41em;
@ -1693,6 +1718,7 @@ html.y #ops svg circle {
box-shadow: 0 0 2px var(--txt-sh); box-shadow: 0 0 2px var(--txt-sh);
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
border-color: var(--a); border-color: var(--a);
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
padding: .2em .3em; padding: .2em .3em;
font-size: medium; font-size: medium;
@ -1911,8 +1937,8 @@ html {
#treepar.off { #treepar.off {
display: none; display: none;
} }
.np_open #thx_ff { #thx_ff {
padding: 4.5em 0; padding: 1em 0;
/* widget */ /* widget */
} }
#tree::-webkit-scrollbar-track, #tree::-webkit-scrollbar-track,
@ -1934,6 +1960,7 @@ html {
box-shadow: var(--btn-bs); box-shadow: var(--btn-bs);
border: 1px solid var(--bg-u3); border: 1px solid var(--bg-u3);
border-bottom: var(--btn-bb); border-bottom: var(--btn-bb);
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
padding: .2em .4em; padding: .2em .4em;
font-size: 1.2em; font-size: 1.2em;
@ -1960,9 +1987,9 @@ html.a .btn {
border-bottom: var(--btn-h-bb); border-bottom: var(--btn-h-bb);
} }
.tgl.btn.on { .tgl.btn.on {
background: #000; background: rgb(85, 144, 255);
background: var(--btn-1-bg); background: var(--btn-1-bg);
color: #fff; color: #222;
color: var(--btn-1-fg); color: var(--btn-1-fg);
text-shadow: none; text-shadow: none;
box-shadow: var(--btn-1-bs); box-shadow: var(--btn-1-bs);
@ -2015,7 +2042,7 @@ html.a .btn {
#tree ul a.hl { #tree ul a.hl {
color: #fff; color: #fff;
color: var(--btn-1-fg); color: var(--btn-1-fg);
background: #000; background: rgb(85, 144, 255);
background: var(--btn-1-bg); background: var(--btn-1-bg);
box-shadow: var(--btn-1-bs); box-shadow: var(--btn-1-bs);
text-shadow: none; text-shadow: none;
@ -2166,6 +2193,7 @@ html.a .btn {
.ghead { .ghead {
background: #fff; background: #fff;
background: var(--bg-u2); background: var(--bg-u2);
border-radius: 5px;
border-radius: calc(var(--radius) * 1.3); border-radius: calc(var(--radius) * 1.3);
padding: 0 .2em; padding: 0 .2em;
line-height: 2.3em; line-height: 2.3em;
@ -2704,6 +2732,7 @@ html.y #bbox-overlay figcaption a {
display: grid; display: grid;
grid-template-rows: max-content auto; grid-template-rows: max-content auto;
margin: 5vh 5vw; margin: 5vh 5vw;
border-radius: 10px;
border-radius: calc(var(--radius) * 1.6); border-radius: calc(var(--radius) * 1.6);
border: var(--a) solid 1px; border: var(--a) solid 1px;
background: #fff; background: #fff;
@ -2731,6 +2760,7 @@ html.c .modalcontent {
} }
.close{ .close{
position: absolute; position: absolute;
cursor: pointer;
top: 0; top: 0;
right: 0; right: 0;
margin: .5em; margin: .5em;
@ -2796,6 +2826,7 @@ html.c .modalcontent {
} }
#s_list h3{ #s_list h3{
background-color: var(--bg-u5); background-color: var(--bg-u5);
border-radius: 5px 5px 0 0;
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--radius) var(--radius) 0 0;
padding: .5em; padding: .5em;
margin: 0 0 1.3em 0; margin: 0 0 1.3em 0;
@ -2837,6 +2868,7 @@ html.c .modalcontent {
background: rgba(224, 224, 224, 0.2); background: rgba(224, 224, 224, 0.2);
box-shadow: 0 0 0 #999; box-shadow: 0 0 0 #999;
border: .1em solid var(--ud-b1); border: .1em solid var(--ud-b1);
border-radius: 10px;
border-radius: calc(var(--radius) * 1.6); border-radius: calc(var(--radius) * 1.6);
border-width: 2px; border-width: 2px;
color: #fff; color: #fff;
@ -3394,7 +3426,7 @@ html.a .opbox,
html.a #path, html.a #path,
html.a #srch_form, html.a #srch_form,
html.a .ghead { html.a .ghead {
background: #ccc; background: #c1d1ed;
background: var(--btn-bg); background: var(--btn-bg);
border: 1px solid var(--bg-u3); border: 1px solid var(--bg-u3);
border-bottom: var(--btn-bb); border-bottom: var(--btn-bb);
@ -4781,27 +4813,32 @@ html.e #wtc {
} }
#spaceFree, #rtt_latency { #spaceFree, #rtt_latency {
color: var(--fg); color: var(--fg);
text-align: left; text-align: left;
padding: 2px; padding: 2px;
font-size: small; font-size: small;
cursor: default; cursor: default;
pointer-events: all; pointer-events: all;
max-width: max-content; max-width: max-content;
background: #fff;
background: var(--transparent);
} }
#rtt_latency { #rtt_latency {
opacity: .5; opacity: .5;
} }
#spaceUsed_bar, #spaceTotal_bar{ #spaceUsed_bar, #spaceTotal_bar{
height: .3em; height: .3em;
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
background: var(--bg-u5);
} }
#spaceUsed_bar{ #spaceUsed_bar{
background: rgb(85, 144, 255);
background: linear-gradient(to right, transparent, var(--a-dark), var(--a)); background: linear-gradient(to right, transparent, var(--a-dark), var(--a));
} }
#spaceTotal_bar { #spaceTotal_bar {
margin-bottom: .5em; margin-bottom: .5em;
background: #ccc;
background: var(--bg-u5);
} }
#tree_footer { #tree_footer {
width: 0; width: 0;
@ -4843,11 +4880,12 @@ html.e #wtc {
.popup { .popup {
display: none; display: none;
width: fit-content; width: fit-content;
background: #000; background: #222;
background: var(--bg-u2); background: var(--bg-u2);
border: 1px solid var(--bg-u3); border: 1px solid var(--bg-u3);
box-shadow: 0 .5em 1em var(--txt-sh); box-shadow: 0 .5em 1em var(--txt-sh);
text-align: center; text-align: center;
border-radius: 5px;
border-radius: var(--radius); border-radius: var(--radius);
padding: .5em; padding: .5em;
position: absolute; position: absolute;
@ -4869,10 +4907,13 @@ html.e #wtc {
font-size: small; font-size: small;
} }
.popup.act,
#srchfolder_div:focus-within .popup { #srchfolder_div:focus-within .popup {
display: block; display: block;
} }
/* has to be separate because IE will ignore the whole rule if it can't do focus within */
.popup.act {
display: block;
}
.overlay_plus{ .overlay_plus{
position: absolute; position: absolute;

7
copyparty/web/browser.js
View file

@ -2312,7 +2312,6 @@ var widget = (function () {
if (r.is_open == is_open) if (r.is_open == is_open)
return false; return false;
clmod(document.documentElement, 'np_open', is_open);
clmod(widget, 'open', is_open); clmod(widget, 'open', is_open);
bcfg_set('au_open', r.is_open = is_open); bcfg_set('au_open', r.is_open = is_open);
if (vbar) { if (vbar) {
@ -2540,6 +2539,8 @@ var pbar = (function () {
gradh = gk; gradh = gk;
grad = auto_grad(bc, accent); grad = auto_grad(bc, accent);
} }
if(IE)
grad = 'rgb(85, 144, 255)';
bctx.fillStyle = grad; bctx.fillStyle = grad;
for (var a = 0; a < mp.au.buffered.length; a++) { for (var a = 0; a < mp.au.buffered.length; a++) {
var x1 = sm * mp.au.buffered.start(a), var x1 = sm * mp.au.buffered.start(a),
@ -2704,6 +2705,10 @@ var vbar = (function () {
style1 = auto_grad(r.can, accent, accent); style1 = auto_grad(r.can, accent, accent);
style2 = light ? 'color-mix(' + bg + ' 85%, #000 15%' : 'color-mix(' + bg + ' 85%, #fff 15%'; style2 = light ? 'color-mix(' + bg + ' 85%, #000 15%' : 'color-mix(' + bg + ' 85%, #fff 15%';
} }
if(IE){
style1 = 'rgb(85, 144, 255)';
style2 = 'rgb(174, 193, 214)'
}
ctx.fillStyle = style2; ctx.fillRect(0, 0, w, h); ctx.fillStyle = style2; ctx.fillRect(0, 0, w, h);
ctx.fillStyle = style1; ctx.fillRect(0, 0, w * mp.vol, h); ctx.fillStyle = style1; ctx.fillRect(0, 0, w * mp.vol, h);