login screen new UI

This commit is contained in:
Til Schmitter 2026-04-20 19:48:39 +02:00
parent e363e60502
commit 69b6e01310
5 changed files with 333 additions and 245 deletions

View file

@ -4603,9 +4603,9 @@ html.e #detree {
.popup { .popup {
visibility: hidden; visibility: hidden;
width: fit-content; width: fit-content;
background-color: var(--bg-u5); background: var(--bg-u2);
border: 1px solid var(--bg-u3); 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; text-align: center;
border-radius: .3em; border-radius: .3em;
padding: .5em; padding: .5em;

View file

@ -5,61 +5,145 @@ html {
font-family: var(--font-main), sans-serif; font-family: var(--font-main), sans-serif;
touch-action: manipulation; 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 { #wrap {
position: relative;
max-width: 40em; max-width: 40em;
margin: 2em auto; margin: 1.5em 2em;
padding: 2em 1em 3em 1em; margin-bottom: 3em;
padding: 1.5em;
padding-bottom: 0em;
line-height: 1.3em; 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 { #wrap.w {
max-width: 96%; max-width: 96%;
} }
h1 { h1 {
border-bottom: 1px solid #ccc; margin: 1.5em 0 .4em 0;
margin: 1em 0 .4em 0;
padding: 0; padding: 0;
line-height: 1em; line-height: 1em;
font-size: x-large; font-size: x-large;
font-weight: normal; 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 { li {
margin: 1em 0; margin: 1em 0;
} }
p {
margin: 0 .2em;
}
#lo, #lo,
a { a {
color: #047; color: #fff;
background: #fff; background: rgba(5, 92, 184, 0.69);
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid #8ab; border-bottom: 2px solid rgb(3, 50, 112);
border-radius: .2em; border-radius: .2em;
padding: .2em .6em; padding: .2em .6em;
margin: 0 .3em; margin: 0 .3em;
} }
#lo:hover, #lo:focus-visible,
a:hover, a:focus-visible {
background: rgb(10, 134, 206);
}
td a { td a {
margin: 0; margin: 0;
} }
#wb, #wb,
#w { #w {
color: #fff; color: #fff;
background: rgb(54, 153, 0); background: rgba(50, 158, 4, 0.69);
border-color: rgb(106, 239, 34); border-color: rgb(20, 90, 3);
}
#wb:hover, #wb:focus-visible,
#w:hover, #w:focus-visible {
background: rgb(93, 180, 12);
} }
.af, .af,
.logout { .logout {
float: right; float: right;
margin: -.2em 0 0 .8em; 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, #lo,
.logout, .logout,
a.r { a.r {
color: #c04; background: rgba(230, 3, 3, 0.61);
border-color: #c7a; border-color: rgb(178, 5, 66);
} }
a.g { #lo:hover, #lo:focus-visible,
color: #0a0; .logout:hover, .logout:focus-visible,
border-color: #3a0; a.r:hover, a.r:focus-visible {
box-shadow: 0 .3em 1em #4c0; 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, #repl,
#pb a { #pb a {
@ -70,14 +154,14 @@ a.g {
} }
#repl { #repl {
position: fixed; position: fixed;
bottom: .25em; bottom: .5em;
left: .2em; left: .5em;
} }
#pb { #pb {
opacity: .5; opacity: .5;
position: fixed; position: fixed;
bottom: .25em; bottom: .5em;
right: .3em; right: .5em;
} }
#pb span { #pb span {
opacity: .6; opacity: .6;
@ -126,7 +210,7 @@ table {
.agr a, .agr a,
.agr form { .agr form {
margin: 0 .5em 0 0; margin: 0 .5em 0 0;
line-height: 4em; line-height: 2.5em;
} }
.agr form, .agr form,
.agr input { .agr input {
@ -200,48 +284,39 @@ html.z {
html.z h1 { html.z h1 {
border-color: #777; 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 { form {
line-height: 2.5em; 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, #x,
input { 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; color: #fff;
background: rgb(39, 130, 204); background: rgb(39, 130, 204);
border-color: rgb(72, 182, 255); 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 { html.z input::placeholder {
color: #fff; color: #fff;
@ -259,11 +334,12 @@ html.bz .vols img {
filter: sepia(0.8) hue-rotate(180deg); filter: sepia(0.8) hue-rotate(180deg);
} }
#homebtn { @media (max-width: 55em){
font-size: x-large; #homebtn {
top: 1em; position: initial;
left: 1em; display: inline-block;
border-radius: .3em; }
background: var(--bg-u5); #login {
position: fixed; margin-top: .7em;
}
} }

View file

@ -12,194 +12,200 @@
{{ html_head }} {{ html_head }}
</head> </head>
<a id="homebtn" href="/">🏠</a>
<body> <body>
<div id="wrap"> <div id="outer">
{%- if not in_shr %} <div id="middle">
<a id="a" href="{{ r }}/?h{{ re }}" class="af">auto-refresh</a> <div id="wrap">
<a id="v" href="{{ r }}/?hc" class="af">connect</a> <a id="homebtn" href="/">🏠</a>
{%- if this.uname == '*' %} {%- if not in_shr %}
<p id="b">howdy stranger &nbsp; <small>(you're not logged in)</small></p> <a id="a" href="{{ r }}/?h{{ re }}" class="af" tt="toggle auto-refresh"></a>
{%- else %} <a id="v" href="{{ r }}/?hc" class="af">Connect</a>
{%- if this.args.idp_logout %}
<a id="c" href="{{ this.args.idp_logout }}" class="logout">logout</a>
{%- else %}
<a id="c" href="{{ r }}/?pw=x" class="logout">logout</a>
{%- endif %}
<p><span id="m">welcome back,</span> <strong id="un">{{ this.uname|e }}</strong></p>
{%- endif %}
{%- endif %}
{%- if msg %} {%- if this.uname == '*' %}
<div id="msg"> <p id="b">howdy stranger &nbsp; <small>(you're not logged in)</small></p>
{{ msg }} {%- else %}
</div> {%- if this.args.idp_logout %}
{%- endif %} <a id="c" href="{{ this.args.idp_logout }}" class="logout">Logout</a>
{%- else %}
{%- if ups %} <a id="c" href="{{ r }}/?pw=x" class="logout">Logout</a>
<h1 id="aa">incoming files:</h1> {%- endif %}
<table class="vols"> <p><span id="m">welcome back,</span> <strong id="un">{{ this.uname|e }}</strong></p>
<thead><tr><th>%</th><th>speed</th><th>eta</th><th>idle</th><th>dir</th><th>file</th></tr></thead>
<tbody>
{%- for u in ups %}
<tr><td>{{ u[0] }}</td><td>{{ u[1] }}</td><td>{{ u[2] }}</td><td>{{ u[3] }}</td><td><a href="{{ r }}{{ u[4] }}">{{ u[5]|e }}</a></td><td>{{ u[6]|e }}</td></tr>
{%- endfor %}
</tbody>
</table>
{%- endif %}
{%- if dls %}
<h1 id="ae">active downloads:</h1>
<table class="vols">
<thead><tr><th>%</th><th>sent</th><th>speed</th><th>eta</th><th>idle</th><th></th><th>dir</th><th>file</th></tr></thead>
<tbody>
{%- for u in dls %}
<tr><td>{{ u[0] }}</td><td>{{ u[1] }}</td><td>{{ u[2] }}</td><td>{{ u[3] }}</td><td>{{ u[4] }}</td><td>{{ u[5] }}</td><td><a href="{{ r }}{{ u[6] }}">{{ u[7]|e }}</a></td><td>{{ u[8] }}</td></tr>
{%- endfor %}
</tbody>
</table>
{%- endif %}
{%- if avol %}
<h1>admin panel:</h1>
<table><tr><td> <!-- hehehe -->
<table class="num">
<tr><td>scanning</td><td>{{ scanning }}</td></tr>
<tr><td>hash-q</td><td>{{ hashq }}</td></tr>
<tr><td>tag-q</td><td>{{ tagq }}</td></tr>
<tr><td>mtp-q</td><td>{{ mtpq }}</td></tr>
<tr><td>db-act</td><td id="u">{{ dbwt }}</td></tr>
</table>
</td><td>
<table class="vols">
<thead><tr><th>vol</th><th id="t">action</th><th>status</th></tr></thead>
<tbody>
{%- for mp in avol %}
{%- if mp in vstate and vstate[mp] %}
<tr><td><a href="{{ r }}{{ mp }}{{ url_suf }}">{{ mp }}</a></td><td><a class="s" href="{{ r }}{{ mp }}?scan">rescan</a></td><td>{{ vstate[mp] }}</td></tr>
{%- endif %} {%- endif %}
{%- endif %}
<div id="login">
{%- if in_shr %}
<h1 id="z">Unlock this share</h1>
<div>
<form id="lf" method="post" enctype="multipart/form-data" action="{{ r }}/{{ qvpath }}">
<input type="hidden" id="la" name="act" value="login" />
<input type="password" id="lp" name="cppwd" placeholder="Password" />
<input type="hidden" name="uhash" id="uhash" value="x" />
<input type="submit" id="ls" value="Unlock" />
{%- if ahttps %}
<a id="w" href="{{ ahttps }}">Switch to https</a>
{%- endif %}
<div id="lm"></div>
</form>
</div>
{%- else %}
{%- if this.uname == '*' %}
<h1 id="l">Login for more</h1>
{%- else %}
<h1 id="l">Change account</h1>
{%- endif %}
<div>
{%- if this.args.idp_login %}
<ul><li>
<a href="{{ this.args.idp_login | replace("{dst}",r+"/"+qvpath) }}">{{ this.args.idp_login_t }}</a>
{%- if this.args.ao_have_pw %}or alternatively{%- endif %}
</li></ul>
{%- endif %}
{%- if this.args.ao_have_pw %}
<form id="lf" method="post" enctype="multipart/form-data" action="{{ r }}/{{ qvpath }}">
<input type="hidden" id="la" name="act" value="login" />
{%- if this.args.usernames %}
<input type="text" id="lu" name="uname" placeholder="Username" size="12" />
<input type="password" id="lp" name="cppwd" placeholder="Password" size="12" />
{%- else %}
<input type="password" id="lp" name="cppwd" placeholder="Password" />
{%- endif %}
<input type="hidden" name="uhash" id="uhash" value="x" />
<input type="submit" id="ls" value="Login" />
{%- if chpw %}
<a id="x" href="#">Change password</a>
{%- endif %}
<div id="lm"></div>
</form>
{%- endif %}
</div>
{%- endif %}
</div>
{%- if msg %}
<div id="msg">
{{ msg }}
</div>
{%- endif %}
{%- if ups %}
<h1 id="aa">Incoming files</h1>
<table class="vols">
<thead><tr><th>%</th><th>Speed</th><th>Eta</th><th>Idle</th><th>Dir</th><th>File</th></tr></thead>
<tbody>
{%- for u in ups %}
<tr><td>{{ u[0] }}</td><td>{{ u[1] }}</td><td>{{ u[2] }}</td><td>{{ u[3] }}</td><td><a href="{{ r }}{{ u[4] }}">{{ u[5]|e }}</a></td><td>{{ u[6]|e }}</td></tr>
{%- endfor %}
</tbody>
</table>
{%- endif %}
{%- if dls %}
<h1 id="ae">Active downloads</h1>
<table class="vols">
<thead><tr><th>%</th><th>Sent</th><th>Speed</th><th>Eta</th><th>Idle</th><th></th><th>Dir</th><th>File</th></tr></thead>
<tbody>
{%- for u in dls %}
<tr><td>{{ u[0] }}</td><td>{{ u[1] }}</td><td>{{ u[2] }}</td><td>{{ u[3] }}</td><td>{{ u[4] }}</td><td>{{ u[5] }}</td><td><a href="{{ r }}{{ u[6] }}">{{ u[7]|e }}</a></td><td>{{ u[8] }}</td></tr>
{%- endfor %}
</tbody>
</table>
{%- endif %}
{%- if avol %}
<h1>Admin panel</h1>
<table><tr><td> <!-- hehehe -->
<table class="num">
<tr><td>scanning</td><td>{{ scanning }}</td></tr>
<tr><td>hash-q</td><td>{{ hashq }}</td></tr>
<tr><td>tag-q</td><td>{{ tagq }}</td></tr>
<tr><td>mtp-q</td><td>{{ mtpq }}</td></tr>
<tr><td>db-act</td><td id="u">{{ dbwt }}</td></tr>
</table>
</td><td>
<table class="vols">
<thead><tr><th>vol</th><th id="t">action</th><th>status</th></tr></thead>
<tbody>
{%- for mp in avol %}
{%- if mp in vstate and vstate[mp] %}
<tr><td><a href="{{ r }}{{ mp }}{{ url_suf }}">{{ mp }}</a></td><td><a class="s" href="{{ r }}{{ mp }}?scan">rescan</a></td><td>{{ vstate[mp] }}</td></tr>
{%- endif %}
{%- endfor %}
</tbody>
</table>
</td></tr></table>
<div class="btns">
<a id="d" href="{{ r }}/?stack">Dump stack</a>
<a id="e" href="{{ r }}/?reload=cfg">Reload cfg</a>
</div>
{%- endif %}
{%- if rvol %}
<h1 id="f">You can browse</h1>
<ul>
{%- for mp in rvol %}
<li><a href="{{ r }}{{ mp }}{{ url_suf }}">{{ mp }}</a></li>
{%- endfor %} {%- endfor %}
</tbody> </ul>
</table>
</td></tr></table>
<div class="btns">
<a id="d" href="{{ r }}/?stack">dump stack</a>
<a id="e" href="{{ r }}/?reload=cfg">reload cfg</a>
</div>
{%- endif %}
{%- if rvol %}
<h1 id="f">you can browse:</h1>
<ul>
{%- for mp in rvol %}
<li><a href="{{ r }}{{ mp }}{{ url_suf }}">{{ mp }}</a></li>
{%- endfor %}
</ul>
{%- endif %}
{%- if wvol %}
<h1 id="g">you can upload to:</h1>
<ul>
{%- for mp in wvol %}
<li><a href="{{ r }}{{ mp }}{{ url_suf }}">{{ mp }}</a></li>
{%- endfor %}
</ul>
{%- endif %}
{%- if in_shr %}
<h1 id="z">unlock this share:</h1>
<div>
<form id="lf" method="post" enctype="multipart/form-data" action="{{ r }}/{{ qvpath }}">
<input type="hidden" id="la" name="act" value="login" />
<input type="password" id="lp" name="cppwd" placeholder=" password" />
<input type="hidden" name="uhash" id="uhash" value="x" />
<input type="submit" id="ls" value="Unlock" />
{%- if ahttps %}
<a id="w" href="{{ ahttps }}">switch to https</a>
{%- endif %} {%- endif %}
<div id="lm"></div>
</form> {%- if wvol %}
</div> <h1 id="g">You can upload to</h1>
{%- else %} <ul>
{%- if this.uname == '*' %} {%- for mp in wvol %}
<h1 id="l">login for more:</h1> <li><a href="{{ r }}{{ mp }}{{ url_suf }}">{{ mp }}</a></li>
{%- else %} {%- endfor %}
<h1 id="l">change account:</h1> </ul>
{%- endif %}
<div>
{%- if this.args.idp_login %}
<ul><li>
<a href="{{ this.args.idp_login | replace("{dst}",r+"/"+qvpath) }}">{{ this.args.idp_login_t }}</a>
{%- if this.args.ao_have_pw %}or alternatively:{%- endif %}
</li></ul>
{%- endif %}
{%- if this.args.ao_have_pw %}
<form id="lf" method="post" enctype="multipart/form-data" action="{{ r }}/{{ qvpath }}">
<input type="hidden" id="la" name="act" value="login" />
{%- if this.args.usernames %}
<input type="text" id="lu" name="uname" placeholder=" username" size="12" />
<input type="password" id="lp" name="cppwd" placeholder=" password" size="12" />
{%- else %}
<input type="password" id="lp" name="cppwd" placeholder=" password" />
{%- endif %} {%- endif %}
<input type="hidden" name="uhash" id="uhash" value="x" />
<input type="submit" id="ls" value="login" /> <h1 id="cc">Other stuff</h1>
{%- if chpw %} <div class="agr">
<a id="x" href="#">change password</a> {%- if ahttps %}
{%- endif %} <a id="wb" href="{{ ahttps }}">Switch to https</a><br />
<div id="lm"></div> {%- endif %}
</form>
{%- endif %} <a id="af" href="{{ r }}/?ru">Show recent uploads</a><br />
{%- if this.uname != '*' and this.args.shr %}
<a id="y" href="{{ r }}/?shares">Edit shares</a><br />
{%- endif %}
{%- if this.uname in this.args.idp_adm_set %}
<a id="ag" href="{{ r }}/?idp">View idp cache</a><br />
{%- endif %}
<a id="k" href="{{ r }}/?reset" class="r" onclick="localStorage.clear();return true">Reset client settings</a><br />
{%- if this.uname != '*' and not in_shr %}
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="act" value="logout" />
<input type="submit" id="lo" value="Logout “{{ this.uname|e }}” everywhere" />
</form>
{%- endif %}
</div>
<ul>
{%- if k304 or k304vis %}
{%- if k304 %}
<li><a id="h" href="{{ r }}/?cc&setck=k304=n">disable k304</a> (currently enabled)
{%- else %}
<li><a id="i" href="{{ r }}/?cc&setck=k304=y" class="r">enable k304</a> (currently disabled)
{%- endif %}
<blockquote id="j">enabling k304 will disconnect your client on every HTTP 304, which can prevent some buggy proxies from getting stuck (suddenly not loading pages), <em>but</em> it will also make things slower in general</blockquote></li>
{%- endif %}
{%- if no304 or no304vis %}
{%- if no304 %}
<li><a id="ab" href="{{ r }}/?cc&setck=no304=n">disable no304</a> (currently enabled)
{%- else %}
<li><a id="ac" href="{{ r }}/?cc&setck=no304=y" class="r">enable no304</a> (currently disabled)
{%- endif %}
<blockquote id="ad">enabling no304 will disable all caching; try this if k304 wasn't enough. This will waste a huge amount of network traffic!</blockquote></li>
{%- endif %}
</ul>
</div>
</div> </div>
{%- endif %}
<h1 id="cc">other stuff:</h1>
<div class="agr">
{%- if ahttps %}
<a id="wb" href="{{ ahttps }}">switch to https</a><br />
{%- endif %}
<a id="af" href="{{ r }}/?ru">show recent uploads</a><br />
{%- if this.uname != '*' and this.args.shr %}
<a id="y" href="{{ r }}/?shares">edit shares</a><br />
{%- endif %}
{%- if this.uname in this.args.idp_adm_set %}
<a id="ag" href="{{ r }}/?idp">view idp cache</a><br />
{%- endif %}
<a id="k" href="{{ r }}/?reset" class="r" onclick="localStorage.clear();return true">reset client settings</a><br />
{%- if this.uname != '*' and not in_shr %}
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="act" value="logout" />
<input type="submit" id="lo" value="logout “{{ this.uname|e }}” everywhere" />
</form>
{%- endif %}
</div>
<ul>
{%- if k304 or k304vis %}
{%- if k304 %}
<li><a id="h" href="{{ r }}/?cc&setck=k304=n">disable k304</a> (currently enabled)
{%- else %}
<li><a id="i" href="{{ r }}/?cc&setck=k304=y" class="r">enable k304</a> (currently disabled)
{%- endif %}
<blockquote id="j">enabling k304 will disconnect your client on every HTTP 304, which can prevent some buggy proxies from getting stuck (suddenly not loading pages), <em>but</em> it will also make things slower in general</blockquote></li>
{%- endif %}
{%- if no304 or no304vis %}
{%- if no304 %}
<li><a id="ab" href="{{ r }}/?cc&setck=no304=n">disable no304</a> (currently enabled)
{%- else %}
<li><a id="ac" href="{{ r }}/?cc&setck=no304=y" class="r">enable no304</a> (currently disabled)
{%- endif %}
<blockquote id="ad">enabling no304 will disable all caching; try this if k304 wasn't enough. This will waste a huge amount of network traffic!</blockquote></li>
{%- endif %}
</ul>
</div> </div>
<a href="#" id="repl" style="opacity: .4;">π</a> <a href="#" id="repl" style="opacity: .4;">π</a>
{%- if not this.args.nb %} {%- if not this.args.nb %}

View file

@ -13,9 +13,9 @@
{{ html_head }} {{ html_head }}
</head> </head>
<a id="homebtn" href="/?h">⬅️</a>
<body> <body>
<a id="homebtn" href="/?h">⬅️</a>
<div id="wrap" class="w"> <div id="wrap" class="w">
<div class="cn"> <div class="cn">
<p class="btns"><a href="/{{ rvp }}">browse files</a> // <a href="{{ r }}/?h">control panel</a></p> <p class="btns"><a href="/{{ rvp }}">browse files</a> // <a href="{{ r }}/?h">control panel</a></p>

View file

@ -1,4 +1,6 @@
:root { :root {
color-scheme: dark;
--font-main: sans-serif; --font-main: sans-serif;
--font-serif: serif; --font-serif: serif;
--font-mono: 'scp'; --font-mono: 'scp';
@ -7,12 +9,16 @@
--fg-max: #fff; --fg-max: #fff;
--bg-u2: #2b2b2b; --bg-u2: #2b2b2b;
--bg-u5: #444; --bg-u5: #444;
--bg-max: #080808;
} }
html.y { html.y {
color-scheme: light;
--fg: #222; --fg: #222;
--fg-max: #000; --fg-max: #000;
--bg-u2: #f7f7f7; --bg-u2: #f7f7f7;
--bg-u5: #ccc; --bg-u5: #ccc;
--bg-max: #fff;
} }
html.bz { html.bz {
--bg-u2: #202231; --bg-u2: #202231;