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

border radius set via variable --b-radius

Browse source
This commit is contained in:
Til Schmitter 2026-04-26 08:58:18 +02:00
parent bde9be9974
commit 59a7e07d1f
1 changed files with 48 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
copyparty/web/browser.css
View file

@ -12,6 +12,7 @@
--bg-max: #080808; --bg-max: #080808;
--a: #fc5; --a: #fc5;
accent-color: var(--a); accent-color: var(--a);
--b-radius: .3em;
/* accent color in everything */ /* accent color in everything */
--fg-max: color-mix(#fefefe 95%, var(--a) 5%); --fg-max: color-mix(#fefefe 95%, var(--a) 5%);
@ -626,7 +627,7 @@ html .ayjump:focus-visible {
width: 1em; width: 1em;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
border-radius: .3em; border-radius: var(--b-radius);
} }
#qs_btns a:hover { #qs_btns a:hover {
background: var(--bg); background: var(--bg);
@ -765,11 +766,11 @@ html.y #files tr.fade a {
box-shadow: 1px 0 0 0 rgba(128,128,128,var(--f-sh1)) inset, 0 1px 0 rgba(0,0,0,var(--f-sh3)) inset, 0 -1px 0 rgba(0,0,0,var(--f-sh3)) inset; box-shadow: 1px 0 0 0 rgba(128,128,128,var(--f-sh1)) inset, 0 1px 0 rgba(0,0,0,var(--f-sh3)) inset, 0 -1px 0 rgba(0,0,0,var(--f-sh3)) inset;
} }
#files td:first-child { #files td:first-child {
border-radius: .25em 0 0 .25em; border-radius: var(--b-radius) 0 0 var(--b-radius);
white-space: nowrap; white-space: nowrap;
} }
#files td:last-child { #files td:last-child {
border-radius: 0 .25em .25em 0; border-radius: 0 var(--b-radius) var(--b-radius) 0;
} }
#files tbody td:nth-child(3) { #files tbody td:nth-child(3) {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
@ -853,7 +854,7 @@ html.y #path a:hover {
background: var(--bgg); background: var(--bgg);
border: 1px solid var(--bgg); border: 1px solid var(--bgg);
border-width: 0 .3em 0 .3em; border-width: 0 .3em 0 .3em;
border-radius: .5em; border-radius: var(--b-radius);
visibility: hidden; visibility: hidden;
margin: 0 -.3em; margin: 0 -.3em;
width: 100%; width: 100%;
@ -1002,7 +1003,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: .3em; border-radius: var(--b-radius);
padding: .3em; padding: .3em;
margin: .5em; margin: .5em;
color: var(--g-fg); color: var(--g-fg);
@ -1020,7 +1021,7 @@ html.dz #flogout {
} }
#ggrid>a img { #ggrid>a img {
z-index: 1; z-index: 1;
border-radius: .2em; border-radius: calc(var(--b-radius) / 3 * 2);
max-width: 10em; max-width: 10em;
max-width: calc(var(--grid-sz) - 4px); max-width: calc(var(--grid-sz) - 4px);
max-height: 8em; max-height: 8em;
@ -1041,7 +1042,7 @@ html.dz #flogout {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-radius: .3em; border-radius: var(--b-radius);
box-sizing: border-box; box-sizing: border-box;
margin: -3px -2px; margin: -3px -2px;
padding: 4px 3px; padding: 4px 3px;
@ -1086,7 +1087,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: .3em; border-radius: var(--b-radius);
font-size: 2em; font-size: 2em;
transition: font-size .15s, margin .15s; transition: font-size .15s, margin .15s;
} }
@ -1271,7 +1272,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: .3em 0 0 0; border-radius: calc(var(--b-radius) * 0.7) 0 0 0;
padding: 0 0 0 .1em; padding: 0 0 0 .1em;
color: var(--fg-max); color: var(--fg-max);
} }
@ -1291,7 +1292,7 @@ html.dz #flogout {
font-weight: bold; font-weight: bold;
box-shadow: 0 0 .5em var(--mp-sh); box-shadow: 0 0 .5em var(--mp-sh);
transition: all .15s; transition: all .15s;
border-radius: .35em; border-radius: calc(var(--b-radius) * 1.2);
text-align: right; text-align: right;
} }
#up_quick_more { #up_quick_more {
@ -1313,7 +1314,7 @@ html.dz #flogout {
display: ruby; display: ruby;
padding: .5em; padding: .5em;
cursor: pointer; cursor: pointer;
border-radius: .5em; border-radius: calc(var(--b-radius) * 1.6);
} }
#up_quick .overlay_plus { #up_quick .overlay_plus {
right: .3em; right: .3em;
@ -1588,7 +1589,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: .3em; border-radius: var(--b-radius);
border: var(--transparent) solid 1px; border: var(--transparent) solid 1px;
color: var(--a); color: var(--a);
@ -1601,7 +1602,7 @@ html.a #up_quick .btn.on {
color: var(--op-aa-fg); color: var(--op-aa-fg);
background: #000; background: #000;
background: var(--op-aa-bg); background: var(--op-aa-bg);
border-radius: 0 0 .2em .2em; border-radius: 0 0 var(--b-radius) var(--b-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);
margin: -.2em 0 -.6em 0; margin: -.2em 0 -.6em 0;
@ -1638,7 +1639,7 @@ html.y #ops svg circle {
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
height: 2em; height: 2em;
border-radius: .3em; border-radius: var(--b-radius);
} }
#noie { #noie {
color: #b60; color: #b60;
@ -1656,7 +1657,7 @@ html.y #ops svg circle {
color: var(--bg); color: var(--bg);
border: var(--btn-bg) solid 1px; border: var(--btn-bg) solid 1px;
border-radius: .3em; border-radius: var(--b-radius);
justify-content: center; justify-content: center;
display: flex; display: flex;
text-shadow: none; text-shadow: none;
@ -1666,7 +1667,7 @@ html.y #ops svg circle {
} }
.opbox { .opbox {
padding: .5em; padding: .5em;
border-radius: .3em; border-radius: var(--b-radius);
border-width: 1px; border-width: 1px;
max-width: 41em; max-width: 41em;
} }
@ -1676,7 +1677,7 @@ html.y #ops svg circle {
} }
#op_bup { #op_bup {
margin: 0; margin: 0;
border-radius: 0 0 .3em .3em; border-radius: 0 0 var(--b-radius) var(--b-radius);
} }
#op_cfg { #op_cfg {
display: none; display: none;
@ -1692,7 +1693,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: .2em; border-radius: var(--b-radius);
padding: .2em .3em; padding: .2em .3em;
font-size: medium; font-size: medium;
min-width: 3em; min-width: 3em;
@ -1934,7 +1935,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: .3em; border-radius: var(--b-radius);
padding: .2em .4em; padding: .2em .4em;
font-size: 1.2em; font-size: 1.2em;
margin: .2em; margin: .2em;
@ -1950,7 +1951,7 @@ html {
} }
html.c .btn, html.c .btn,
html.a .btn { html.a .btn {
border-radius: .2em; border-radius: var(--b-radius);
} }
.btn:hover { .btn:hover {
color: var(--btn-h-fg); color: var(--btn-h-fg);
@ -2035,7 +2036,7 @@ html.a .btn {
color: var(--fg-max); color: var(--fg-max);
} }
#tree ul a { #tree ul a {
border-radius: .3em; border-radius: var(--b-radius);
display: inline-block; display: inline-block;
} }
.ntree a+a { .ntree a+a {
@ -2096,7 +2097,7 @@ html.y #tree.nowrap .ntree a+a:hover {
#files th:hover .cfg { #files th:hover .cfg {
display: block; display: block;
width: 1em; width: 1em;
border-radius: .2em; border-radius: var(--b-radius);
margin: -1.2em auto 0 auto; margin: -1.2em auto 0 auto;
background: var(--bg-u5); background: var(--bg-u5);
} }
@ -2170,7 +2171,7 @@ html.y #tree.nowrap .ntree a+a:hover {
.ghead { .ghead {
background: #fff; background: #fff;
background: var(--bg-u2); background: var(--bg-u2);
border-radius: .3em; border-radius: calc(var(--b-radius) * 1.3);
padding: 0 .2em; padding: 0 .2em;
line-height: 2.3em; line-height: 2.3em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
@ -2302,7 +2303,7 @@ input[type="text"].invalid {
background: var(--bg); background: var(--bg);
margin: -1em 0 .5em 0; margin: -1em 0 .5em 0;
padding: 1em 0 1em 0; padding: 1em 0 1em 0;
border-radius: .3em; border-radius: var(--b-radius);
} }
#doc.wrap { #doc.wrap {
white-space: pre-wrap; white-space: pre-wrap;
@ -2339,7 +2340,7 @@ html.y #doc {
line-height: 1.5em; line-height: 1.5em;
} }
#doc .line-highlight { #doc .line-highlight {
border-radius: .3em; border-radius: var(--b-radius);
box-shadow: 0 0 .5em rgba(128,128,128,0.2); box-shadow: 0 0 .5em rgba(128,128,128,0.2);
background: linear-gradient(90deg, var(--bg-d3), var(--bg)); background: linear-gradient(90deg, var(--bg-d3), var(--bg));
} }
@ -2531,7 +2532,7 @@ html.bb_fsc figcaption {
} }
#bbox-overlay figcaption a { #bbox-overlay figcaption a {
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: .4em; border-radius: var(--b-radius);
padding: .3em .6em; padding: .3em .6em;
} }
html.y #bbox-overlay figcaption a { html.y #bbox-overlay figcaption a {
@ -2605,7 +2606,7 @@ html.y #bbox-overlay figcaption a {
padding: 0 .4em; padding: 0 .4em;
margin: 0 .2em; margin: 0 .2em;
border: 0; border: 0;
border-radius: 15%; border-radius: var(--b-radius);
background: rgba(50, 50, 50, 0.5); background: rgba(50, 50, 50, 0.5);
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
font-size: 1.4em; font-size: 1.4em;
@ -2707,7 +2708,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: .5em; border-radius: calc(var(--b-radius) * 1.6);
border: var(--a) solid 1px; border: var(--a) solid 1px;
background: #fff; background: #fff;
background: var(--bg); background: var(--bg);
@ -2799,7 +2800,7 @@ html.c .modalcontent {
} }
#s_list h3{ #s_list h3{
background-color: var(--bg-u5); background-color: var(--bg-u5);
border-radius: .3em .3em 0 0; border-radius: var(--b-radius) var(--b-radius) 0 0;
padding: .5em; padding: .5em;
margin: 0 0 1.3em 0; margin: 0 0 1.3em 0;
} }
@ -2840,7 +2841,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: .5em solid var(--ud-b1); border: .5em solid var(--ud-b1);
border-radius: .5em; border-radius: calc(var(--b-radius) * 1.6);
border-width: 1vw; border-width: 1vw;
color: #fff; color: #fff;
transition: all 0.12s; transition: all 0.12s;
@ -2918,7 +2919,7 @@ html.c .modalcontent {
background: #490; background: #490;
border-bottom: .3em solid #6d2; border-bottom: .3em solid #6d2;
text-shadow: 1px 1px 1px #000; text-shadow: 1px 1px 1px #000;
border-radius: .3em; border-radius: var(--b-radius);
padding: .4em .8em; padding: .4em .8em;
font-size: .4em; font-size: .4em;
} }
@ -2955,7 +2956,7 @@ html.c .modalcontent {
#u2btn { #u2btn {
line-height: 1.3em; line-height: 1.3em;
border: .15em dashed var(--u2-btn-b1); border: .15em dashed var(--u2-btn-b1);
border-radius: .4em; border-radius: var(--b-radius);
text-align: center; text-align: center;
font-size: 1.3em; font-size: 1.3em;
padding: 1em 2em; padding: 1em 2em;
@ -3094,15 +3095,15 @@ html.c .modalcontent {
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
} }
#u2cards a:first-child { #u2cards a:first-child {
border-radius: .4em 0 0 0; border-radius: var(--b-radius) 0 0 0;
} }
#u2cards a:last-child { #u2cards a:last-child {
border-radius: 0 .4em 0 0; border-radius: 0 var(--b-radius) 0 0;
} }
#u2cards a.act { #u2cards a.act {
padding-bottom: .5em; padding-bottom: .5em;
border-width: 1px 1px .1em 1px; border-width: 1px 1px .1em 1px;
border-radius: .3em .3em 0 0; border-radius: var(--b-radius) var(--b-radius) 0 0;
margin-left: -1px; margin-left: -1px;
background: var(--u2-tab-1-bg); background: var(--u2-tab-1-bg);
box-shadow: 0 -.17em .67em var(--u2-tab-1-sh); box-shadow: 0 -.17em .67em var(--u2-tab-1-sh);
@ -3125,7 +3126,7 @@ html.c .modalcontent {
} }
#u2conf details[open] { #u2conf details[open] {
border-bottom: none; border-bottom: none;
border-radius: .3em .3em 0 0; border-radius: var(--b-radius) var(--b-radius) 0 0;
} }
#u2conf .setting { #u2conf .setting {
margin: 0; margin: 0;
@ -3182,7 +3183,7 @@ html.b #u2conf a.b:hover {
height: 1em; height: 1em;
padding: .4em 0; padding: .4em 0;
display: block; display: block;
border-radius: .25em; border-radius: var(--b-radius);
} }
#u2conf input[type="checkbox"] { #u2conf input[type="checkbox"] {
position: absolute; position: absolute;
@ -3286,7 +3287,7 @@ html.b #u2conf a.b:hover {
#u2tab span.err { #u2tab span.err {
color: #fff; color: #fff;
padding: .22em; padding: .22em;
border-radius: .2em; border-radius: var(--b-radius);
border: 2px solid #f0f; border: 2px solid #f0f;
} }
#u2tab span.inf { #u2tab span.inf {
@ -3317,7 +3318,7 @@ html.b #u2conf a.b:hover {
} }
details { details {
border: var(--bg-u3) solid 1px; border: var(--bg-u3) solid 1px;
border-radius: .3em; border-radius: var(--b-radius);
margin: .3em 0; margin: .3em 0;
} }
details:not(.open) .setting { details:not(.open) .setting {
@ -3329,7 +3330,7 @@ summary {
background: var(--bg-u1); background: var(--bg-u1);
color: var(--a); color: var(--a);
padding: .3em; padding: .3em;
border-radius: .3em; border-radius: var(--b-radius);
font-size: large; font-size: large;
} }
summary:hover { summary:hover {
@ -3367,7 +3368,7 @@ summary:hover {
html.c #path, html.c #path,
html.a #path { html.a #path {
border-radius: .3em; border-radius: var(--b-radius);
} }
html.dz .opview input.i { html.dz .opview input.i {
width: calc(100% - 18em); width: calc(100% - 18em);
@ -3448,7 +3449,7 @@ html.a #u2etas {
background: var(--bg-d1); background: var(--bg-d1);
border: 1px solid var(--bg-u1); border: 1px solid var(--bg-u1);
border-width: 2px; border-width: 2px;
border-radius: .5em; border-radius: calc(var(--b-radius) * 1.6);
} }
html.c #u2foot:empty, html.c #u2foot:empty,
html.a #u2foot:empty { html.a #u2foot:empty {
@ -4670,7 +4671,7 @@ html.e #detree {
background: var(--bg-u2); background: var(--bg-u2);
border: 1px solid var(--bg-u5); border: 1px solid var(--bg-u5);
outline: none; outline: none;
border-radius: .3rem; border-radius: var(--b-radius);
box-shadow: 0 0 .3rem var(--bg-d3); box-shadow: 0 0 .3rem var(--bg-d3);
z-index: 3; z-index: 3;
} }
@ -4710,7 +4711,7 @@ html.e #detree {
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: .2em; border-radius: var(--b-radius);
padding: .2em .3em; padding: .2em .3em;
} }
@ -4738,7 +4739,7 @@ html.e #detree {
} }
#spaceUsed_bar, #spaceTotal_bar{ #spaceUsed_bar, #spaceTotal_bar{
height: .3em; height: .3em;
border-radius: .3em; border-radius: var(--b-radius);
background: var(--bg-u5); background: var(--bg-u5);
} }
#spaceUsed_bar{ #spaceUsed_bar{
@ -4759,7 +4760,7 @@ html.e #detree {
background: linear-gradient(transparent, var(--bg-u2)); background: linear-gradient(transparent, var(--bg-u2));
} }
.popup_button { .popup_button {
border-radius: .3em; border-radius: var(--b-radius);
margin: 0; margin: 0;
color: var(--btn-1-fg); color: var(--btn-1-fg);
text-align: left; text-align: left;
@ -4799,7 +4800,7 @@ html.e #detree {
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: .3em; border-radius: var(--b-radius);
padding: .5em; padding: .5em;
position: absolute; position: absolute;
display: block; display: block;