diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 08a77b6d..a710516c 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -4603,9 +4603,9 @@ html.e #detree { .popup { visibility: hidden; width: fit-content; - background-color: var(--bg-u5); + background: var(--bg-u2); border: 1px solid var(--bg-u3); - box-shadow: 0 0 2px var(--txt-sh); + box-shadow: 0 .5em 1em var(--txt-sh); text-align: center; border-radius: .3em; padding: .5em; diff --git a/copyparty/web/splash.css b/copyparty/web/splash.css index b877d950..c2003a80 100644 --- a/copyparty/web/splash.css +++ b/copyparty/web/splash.css @@ -5,61 +5,145 @@ html { font-family: var(--font-main), sans-serif; touch-action: manipulation; } + +#homebtn { + font-size: x-large; + top: 1em; + left: 1em; + margin: 0 0 .3em 0; + padding: .4em .5em; + border-radius: .3em; + background: var(--bg-u2); + border-left: var(--bg-u5) solid 1px; + border-top: var(--bg-u5) solid 1px; + border-right: var(--bg-u5) solid 1px; + position: fixed; + z-index: 10; + box-shadow: 0 0 1em color-mix(var(--bg-max) 60%, transparent 40%); +} +#homebtn:hover, #homebtn:focus-visible { + background: var(--bg-u5); +} + +#outer { + inset: 0; + position: absolute; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} +#middle { + display: flex; + flex-direction: column; + margin: auto; + justify-content: center; +} #wrap { + position: relative; max-width: 40em; - margin: 2em auto; - padding: 2em 1em 3em 1em; + margin: 1.5em 2em; + margin-bottom: 3em; + padding: 1.5em; + padding-bottom: 0em; line-height: 1.3em; + background: var(--bg-u2); + border-radius: .5em; + border: var(--bg-u5) solid 1px; + box-shadow: 0 0 2em color-mix(var(--bg-max) 60%, transparent 40%); } #wrap.w { max-width: 96%; } h1 { - border-bottom: 1px solid #ccc; - margin: 1em 0 .4em 0; + margin: 1.5em 0 .4em 0; padding: 0; line-height: 1em; font-size: x-large; font-weight: normal; } +#top_L { + display: flex; +} +#l { + margin-top: 0; + text-align: center; +} +#login { + border: var(--bg-u5) solid 1px; + border-radius: .3em; + padding: 1em; + margin: 2em auto 0 auto; + max-width: 25em; +} li { margin: 1em 0; } +p { + margin: 0 .2em; +} #lo, a { - color: #047; - background: #fff; + color: #fff; + background: rgba(5, 92, 184, 0.69); text-decoration: none; white-space: nowrap; - border-bottom: 1px solid #8ab; + border-bottom: 2px solid rgb(3, 50, 112); border-radius: .2em; padding: .2em .6em; margin: 0 .3em; } +#lo:hover, #lo:focus-visible, +a:hover, a:focus-visible { + background: rgb(10, 134, 206); +} td a { margin: 0; } #wb, #w { color: #fff; - background: rgb(54, 153, 0); - border-color: rgb(106, 239, 34); + background: rgba(50, 158, 4, 0.69); + border-color: rgb(20, 90, 3); +} +#wb:hover, #wb:focus-visible, +#w:hover, #w:focus-visible { + background: rgb(93, 180, 12); } .af, .logout { float: right; margin: -.2em 0 0 .8em; } + +#a { + background: transparent; + border: var(--bg-u5) solid 1px; + font-weight: bold; + padding: .2em .5em; +} +#a:hover, #a:focus-visible { + background: var(--bg-u5); +} +html.y #a { + color: #222; +} #lo, .logout, a.r { - color: #c04; - border-color: #c7a; + background: rgba(230, 3, 3, 0.61); + border-color: rgb(178, 5, 66); } -a.g { - color: #0a0; - border-color: #3a0; - box-shadow: 0 .3em 1em #4c0; +#lo:hover, #lo:focus-visible, +.logout:hover, .logout:focus-visible, +a.r:hover, a.r:focus-visible { + background: rgb(209, 4, 4); +} +#a.g { + background: rgb(254, 207, 20); + border-color: rgb(224, 177, 7); + box-shadow: 0 .3em 1em rgba(240, 149, 3, 0.584); + color: #000; } #repl, #pb a { @@ -70,14 +154,14 @@ a.g { } #repl { position: fixed; - bottom: .25em; - left: .2em; + bottom: .5em; + left: .5em; } #pb { opacity: .5; position: fixed; - bottom: .25em; - right: .3em; + bottom: .5em; + right: .5em; } #pb span { opacity: .6; @@ -126,7 +210,7 @@ table { .agr a, .agr form { margin: 0 .5em 0 0; - line-height: 4em; + line-height: 2.5em; } .agr form, .agr input { @@ -200,48 +284,39 @@ html.z { html.z h1 { border-color: #777; } -html.z #lo, -html.z a { - color: #fff; - background: #057; - border-color: #37a; -} -html.z .logout, -html.z #lo, -html.z a.r { - background: rgb(163, 0, 3); - border-color: rgb(214, 27, 27); -} -html.z a.g { - background: #470; - border-color: #af4; - box-shadow: 0 .3em 1em #7d0; -} form { line-height: 2.5em; + display: flex; + flex-direction: column; + margin: auto; +} +#lp { + margin: 1em 0; + background: none; + padding: .5em; +} +#lp::placeholder { + font-size: medium; } #x, input { - color: #a50; - background: #fff; - border: 1px solid #a50; - border-radius: .3em; - padding: .25em .6em; - margin: 0 .3em 0 0; - font-size: 1em; -} -input::placeholder { - font-size: 1.2em; - font-style: italic; - letter-spacing: .04em; - opacity: 0.64; - color: #930; -} -#x, -html.z input { color: #fff; background: rgb(39, 130, 204); border-color: rgb(72, 182, 255); + border-radius: .3em; + padding: .4em .6em; + margin: 0; + font-size: 1em; +} +#x:hover, #x:focus-visible, +input:hover, input:focus-visible { + background: linear-gradient(-10deg, rgb(10, 77, 145), rgb(39, 130, 204)); +} +input::placeholder { + font-size: 1.2em; + letter-spacing: .04em; + opacity: 0.64; + color: #000; } html.z input::placeholder { color: #fff; @@ -259,11 +334,12 @@ html.bz .vols img { filter: sepia(0.8) hue-rotate(180deg); } -#homebtn { - font-size: x-large; - top: 1em; - left: 1em; - border-radius: .3em; - background: var(--bg-u5); - position: fixed; +@media (max-width: 55em){ + #homebtn { + position: initial; + display: inline-block; + } + #login { + margin-top: .7em; + } } diff --git a/copyparty/web/splash.html b/copyparty/web/splash.html index b00fad06..d28843ce 100644 --- a/copyparty/web/splash.html +++ b/copyparty/web/splash.html @@ -12,194 +12,200 @@ {{ html_head }} -🏠 - -
- {%- if not in_shr %} - auto-refresh - connect +
+
+
+ 🏠 - {%- if this.uname == '*' %} -

howdy stranger   (you're not logged in)

- {%- else %} - {%- if this.args.idp_logout %} - logout - {%- else %} - logout - {%- endif %} -

welcome back, {{ this.uname|e }}

- {%- endif %} - {%- endif %} + {%- if not in_shr %} + ↻ + Connect - {%- if msg %} -
- {{ msg }} -
- {%- endif %} - - {%- if ups %} -

incoming files:

- - - - {%- for u in ups %} - - {%- endfor %} - -
%speedetaidledirfile
{{ u[0] }}{{ u[1] }}{{ u[2] }}{{ u[3] }}{{ u[5]|e }}{{ u[6]|e }}
- {%- endif %} - - {%- if dls %} -

active downloads:

- - - - {%- for u in dls %} - - {%- endfor %} - -
%sentspeedetaidledirfile
{{ u[0] }}{{ u[1] }}{{ u[2] }}{{ u[3] }}{{ u[4] }}{{ u[5] }}{{ u[7]|e }}{{ u[8] }}
- {%- endif %} - - {%- if avol %} -

admin panel:

- -
- - - - - - -
scanning{{ scanning }}
hash-q{{ hashq }}
tag-q{{ tagq }}
mtp-q{{ mtpq }}
db-act{{ dbwt }}
- 		- - - - {%- for mp in avol %} - {%- if mp in vstate and vstate[mp] %} - + {%- if this.uname == '*' %} +

howdy stranger   (you're not logged in)

+ {%- else %} + {%- if this.args.idp_logout %} + Logout + {%- else %} + Logout + {%- endif %} +

welcome back, {{ this.uname|e }}

{%- endif %} + {%- endif %} + +
+ {%- if in_shr %} +

Unlock this share

+
+
+ + + + + {%- if ahttps %} + Switch to https + {%- endif %} +
+ +
+ {%- else %} + {%- if this.uname == '*' %} +

Login for more

+ {%- else %} +

Change account

+ {%- endif %} +
+ {%- if this.args.idp_login %} + + {%- endif %} + {%- if this.args.ao_have_pw %} +
+ + {%- if this.args.usernames %} + + + {%- else %} + + {%- endif %} + + + {%- if chpw %} + Change password + {%- endif %} +
+ + {%- endif %} +
+ {%- endif %} +
+ + {%- if msg %} +
+ {{ msg }} +
+ {%- endif %} + + {%- if ups %} +

Incoming files

+
volactionstatus
{{ mp }}rescan{{ vstate[mp] }}
+ + + {%- for u in ups %} + + {%- endfor %} + +
%SpeedEtaIdleDirFile
{{ u[0] }}{{ u[1] }}{{ u[2] }}{{ u[3] }}{{ u[5]|e }}{{ u[6]|e }}
+ {%- endif %} + + {%- if dls %} +

Active downloads

+ + + + {%- for u in dls %} + + {%- endfor %} + +
%SentSpeedEtaIdleDirFile
{{ u[0] }}{{ u[1] }}{{ u[2] }}{{ u[3] }}{{ u[4] }}{{ u[5] }}{{ u[7]|e }}{{ u[8] }}
+ {%- endif %} + + {%- if avol %} +

Admin panel

+
+ + + + + + +
scanning{{ scanning }}
hash-q{{ hashq }}
tag-q{{ tagq }}
mtp-q{{ mtpq }}
db-act{{ dbwt }}
+ 		+ + + + {%- for mp in avol %} + {%- if mp in vstate and vstate[mp] %} + + {%- endif %} + {%- endfor %} + +
volactionstatus
{{ mp }}rescan{{ vstate[mp] }}
+
+
+ Dump stack + Reload cfg +
+ {%- endif %} + + {%- if rvol %} +

You can browse

+
    + {%- for mp in rvol %} +
  • {{ mp }}
    • {%- endfor %} -
- -
- dump stack - reload cfg -
- {%- endif %} - - {%- if rvol %} -

you can browse:

-
    - {%- for mp in rvol %} -
  • {{ mp }}
    • - {%- endfor %} -
- {%- endif %} - - {%- if wvol %} -

you can upload to:

-
    - {%- for mp in wvol %} -
  • {{ mp }}
    • - {%- endfor %} -
- {%- endif %} - - {%- if in_shr %} -

unlock this share:

-
-
- - - - - {%- if ahttps %} - switch to https + {%- endif %} -
-
-
- {%- else %} - {%- if this.uname == '*' %} -

login for more:

- {%- else %} -

change account:

- {%- endif %} -
- {%- if this.args.idp_login %} - - {%- endif %} - {%- if this.args.ao_have_pw %} -
- - {%- if this.args.usernames %} - - - {%- else %} - + + {%- if wvol %} +

You can upload to

+
    + {%- for mp in wvol %} +
  • {{ mp }}
    • + {%- endfor %} +
{%- endif %} - - - {%- if chpw %} - change password - {%- endif %} -
-
- {%- endif %} + +

Other stuff

+
+ {%- if ahttps %} + Switch to https
+ {%- endif %} + + Show recent uploads
+ + {%- if this.uname != '*' and this.args.shr %} + Edit shares
+ {%- endif %} + + {%- if this.uname in this.args.idp_adm_set %} + View idp cache
+ {%- endif %} + + Reset client settings
+ + {%- if this.uname != '*' and not in_shr %} +
+ + +
+ {%- endif %} +
+
    + {%- if k304 or k304vis %} + {%- if k304 %} +
  • disable k304 (currently enabled) + {%- else %} +
  • enable k304 (currently disabled) + {%- endif %} +
    enabling k304 will disconnect your client on every HTTP 304, which can prevent some buggy proxies from getting stuck (suddenly not loading pages), but it will also make things slower in general
    • + {%- endif %} + + {%- if no304 or no304vis %} + {%- if no304 %} +
  • disable no304 (currently enabled) + {%- else %} +
  • enable no304 (currently disabled) + {%- endif %} +
    • + {%- endif %} +
+ +
- {%- endif %} - -

other stuff:

-
- {%- if ahttps %} - switch to https
- {%- endif %} - - show recent uploads
- - {%- if this.uname != '*' and this.args.shr %} - edit shares
- {%- endif %} - - {%- if this.uname in this.args.idp_adm_set %} - view idp cache
- {%- endif %} - - reset client settings
- - {%- if this.uname != '*' and not in_shr %} -
- - -
- {%- endif %} -
-
    - {%- if k304 or k304vis %} - {%- if k304 %} -
  • disable k304 (currently enabled) - {%- else %} -
  • enable k304 (currently disabled) - {%- endif %} -
    enabling k304 will disconnect your client on every HTTP 304, which can prevent some buggy proxies from getting stuck (suddenly not loading pages), but it will also make things slower in general
    • - {%- endif %} - - {%- if no304 or no304vis %} - {%- if no304 %} -
  • disable no304 (currently enabled) - {%- else %} -
  • enable no304 (currently disabled) - {%- endif %} -
    • - {%- endif %} -
-
π {%- if not this.args.nb %} diff --git a/copyparty/web/svcs.html b/copyparty/web/svcs.html index b11bf9ac..ba242776 100644 --- a/copyparty/web/svcs.html +++ b/copyparty/web/svcs.html @@ -13,9 +13,9 @@ {{ html_head }} -⬅️ - + ⬅️ +

browse files // control panel

diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css index 770b1a73..ac5db5d6 100644 --- a/copyparty/web/ui.css +++ b/copyparty/web/ui.css @@ -1,4 +1,6 @@ :root { + color-scheme: dark; + --font-main: sans-serif; --font-serif: serif; --font-mono: 'scp'; @@ -7,12 +9,16 @@ --fg-max: #fff; --bg-u2: #2b2b2b; --bg-u5: #444; + --bg-max: #080808; } html.y { + color-scheme: light; + --fg: #222; --fg-max: #000; --bg-u2: #f7f7f7; --bg-u5: #ccc; + --bg-max: #fff; } html.bz { --bg-u2: #202231;