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 }}