add flat theme

This commit is contained in:
ed 2022-04-14 16:57:51 +02:00
parent fd9d0e433d
commit 2dbed4500a
12 changed files with 643 additions and 444 deletions

View file

@ -14,7 +14,6 @@ save one of these as `.epilogue.html` inside a folder to customize it:
## example browser-css
point `--css-browser` to one of these by URL:
* [`browser.css`](browser.css) is a flat / minimal theme
* [`browser-icons.css`](browser-icons.css) adds filetype icons

View file

@ -1,130 +0,0 @@
#ops,
#ops a.act,
#tree,
#pctl a,
#treeh,
#u2cards a,
#u2cards a.act,
html.light #ops,
html.light #ops a.act,
html.light #tree,
html.light #ggrid>a,
html.light #u2cards a,
html.light #u2cards a.act {
background: transparent;
box-shadow: none;
}
#tree,
#files td,
#files tr:nth-child(2n+1) td,
.opbox h3,
#u2conf .txtbox,
html.light #files tbody td,
html.light #files tbody tr td:last-child,
html.light #files tr:nth-child(2n+1) td {
background: transparent;
border: none;
}
#path,
#ghead,
#ggrid>a,
html.light #path {
background: transparent;
box-shadow: none;
border: none;
}
#treeh,
#treepar,
#ghead,
#u2etas,
html.light #treeh,
html.light #treepar {
background: var(--bg);
}
#ops,
#u2cards a,
#u2tab td,
html.light #ops {
border-color: rgba(128,128,128,0.5);
}
#path {
margin-bottom: .5em;
}
#ghead {
padding: .2em 0;
}
#ops,
html.light #ops {
border-width: 1px 0 0 0;
}
#ops a.act,
html.light #ops a.act {
box-shadow: 0 0 1px rgba(128,128,128,0.8) inset;
padding-top: .25em;
}
.btn,
html.light .btn {
background: transparent;
box-shadow: 0 0 1px #999, 0 0 1px #999;
border-radius: .2em;
}
#tree li {
border-width: 1px 0 0 0;
}
html.light #tree li {
border-width: 0 0 1px 0;
}
#treepar,
html.light #treepar {
border-width: 0 0 .3em 0;
border-color: #999;
}
#files td {
box-shadow: 0 -1px 0 rgba(255,255,255,.1) inset;
}
html.light #files td {
box-shadow: 0 -1px 0 rgba(0,0,0,.1) inset;
}
#files tbody tr td:last-child {
border: none;
}
#u2cards a.act,
html.light #u2cards a.act {
font-weight: bold;
}
#barpos,
#barbuf,
#pvol {
box-shadow: 0 0 1px rgba(128,128,128,0.5);
border-radius: .2em;
background: none;
}
#wtoggle {
border-radius: .1em 0 0 0;
}
#u2btn,
#op_up2k.srch #u2btn,
html.light #u2btn {
background: transparent;
text-shadow: none;
box-shadow: none;
color: inherit;
}
#u2btn {
border: 2px solid #08a;
}
#op_up2k.srch #u2btn {
border-color: #b90;
}
html {
background: var(--bg) url('/wp/wallhaven-mdjrqy.jpg') center / cover no-repeat fixed;
}
html.light {
background: var(--bg) url('/wp/wallhaven-lqqoxq.jpg') center / cover no-repeat fixed;
}

View file

@ -548,6 +548,8 @@ def run_argparse(argv, formatter):
ap2.add_argument("-mtp", metavar="M=[f,]bin", type=u, action="append", help="read tag M using bin")
ap2 = ap.add_argument_group('ui options')
ap2.add_argument("--theme", metavar="NUM", type=int, default=0, help="default theme to use")
ap2.add_argument("--themes", metavar="NUM", type=int, default=4, help="number of themes installed")
ap2.add_argument("--js-browser", metavar="L", type=u, help="URL to additional JS to include")
ap2.add_argument("--css-browser", metavar="L", type=u, help="URL to additional CSS to include")
ap2.add_argument("--html-head", metavar="TXT", type=u, default="", help="text to append to the <head> of all HTML pages")

View file

@ -2149,12 +2149,11 @@ class HttpCli(object):
free = humansize(sv.f_frsize * sv.f_bfree, True)
total = humansize(sv.f_frsize * sv.f_blocks, True)
srv_info.append(free + " free")
srv_info.append(total)
srv_info.append("{} free of {}".format(free, total))
except:
pass
srv_info = "</span> /// <span>".join(srv_info)
srv_info = "</span> // <span>".join(srv_info)
perms = []
if self.can_read:
@ -2227,6 +2226,8 @@ class HttpCli(object):
"readme": readme,
"title": html_escape(self.vpath, crlf=True),
"srv_info": srv_info,
"dtheme": self.args.theme,
"themes": self.args.themes,
}
if not self.can_read:
if is_ls:

View file

@ -70,6 +70,10 @@ class SvcHub(object):
self.log("root", m, c=3)
bri = "zy"[args.theme % 2 :][:1]
ch = "abcdefghijklmnopqrstuvwx"[int(args.theme / 2)]
args.theme = "{0}{1} {0} {1}".format(ch, bri)
# initiate all services to manage
self.asrv = AuthSrv(self.args, self.log)
if args.ls:

File diff suppressed because it is too large Load diff

View file

@ -134,6 +134,9 @@
<script>
var acct = "{{ acct }}",
perms = {{ perms }},
themes = {{ themes }},
dtheme = "{{ dtheme }}",
srvinf = "{{ srv_info }}",
def_hcols = {{ def_hcols|tojson }},
have_up2k_idx = {{ have_up2k_idx|tojson }},
have_tags_idx = {{ have_tags_idx|tojson }},
@ -147,7 +150,7 @@
readme = {{ readme|tojson }},
ls0 = {{ ls0|tojson }};
document.documentElement.setAttribute("class", localStorage.lightmode == 1 ? "light" : "dark");
document.documentElement.setAttribute("class", localStorage.theme || dtheme);
</script>
<script src="/.cpr/util.js?_={{ ts }}"></script>
<script src="/.cpr/browser.js?_={{ ts }}"></script>

View file

@ -7,16 +7,16 @@ function dbg(msg) {
// toolbar
ebi('ops').innerHTML = (
'<a href="#" data-dest="" tt="close submenu">--</a>\n' +
'<a href="#" data-perm="read" data-dep="idx" data-dest="search" tt="search for files by attributes, path/name, music tags, or any combination of those$N$N&lt;code&gt;foo bar&lt;/code&gt; = must contain both foo and bar,$N&lt;code&gt;foo -bar&lt;/code&gt; = must contain foo but not bar,$N&lt;code&gt;^yana .opus$&lt;/code&gt; = start with yana and be an opus file$N&lt;code&gt;&quot;try unite&quot;&lt;/code&gt; = contain exactly «try unite»">🔎</a>\n' +
(have_del && have_unpost ? '<a href="#" data-dest="unpost" data-dep="idx" tt="unpost: delete your recent uploads">🧯</a>\n' : '') +
'<a href="#" data-dest="up2k">🚀</a>\n' +
'<a href="#" data-perm="write" data-dest="bup" tt="bup: basic uploader, even supports netscape 4.0">🎈</a>\n' +
'<a href="#" data-perm="write" data-dest="mkdir" tt="mkdir: create a new directory">📂</a>\n' +
'<a href="#" data-perm="read write" data-dest="new_md" tt="new-md: create a new markdown document">📝</a>\n' +
'<a href="#" data-perm="write" data-dest="msg" tt="msg: send a message to the server log">📟</a>\n' +
'<a href="#" data-dest="player" tt="media player options">🎺</a>\n' +
'<a href="#" data-dest="cfg" tt="configuration options">⚙️</a>\n' +
'<a href="#" data-dest="" tt="close submenu">--</a>' +
'<a href="#" data-perm="read" data-dep="idx" data-dest="search" tt="search for files by attributes, path/name, music tags, or any combination of those$N$N&lt;code&gt;foo bar&lt;/code&gt; = must contain both foo and bar,$N&lt;code&gt;foo -bar&lt;/code&gt; = must contain foo but not bar,$N&lt;code&gt;^yana .opus$&lt;/code&gt; = start with yana and be an opus file$N&lt;code&gt;&quot;try unite&quot;&lt;/code&gt; = contain exactly «try unite»">🔎</a>' +
(have_del && have_unpost ? '<a href="#" data-dest="unpost" data-dep="idx" tt="unpost: delete your recent uploads">🧯</a>' : '') +
'<a href="#" data-dest="up2k">🚀</a>' +
'<a href="#" data-perm="write" data-dest="bup" tt="bup: basic uploader, even supports netscape 4.0">🎈</a>' +
'<a href="#" data-perm="write" data-dest="mkdir" tt="mkdir: create a new directory">📂</a>' +
'<a href="#" data-perm="read write" data-dest="new_md" tt="new-md: create a new markdown document">📝</a>' +
'<a href="#" data-perm="write" data-dest="msg" tt="msg: send a message to the server log">📟</a>' +
'<a href="#" data-dest="player" tt="media player options">🎺</a>' +
'<a href="#" data-dest="cfg" tt="configuration options">⚙️</a>' +
'<div id="opdesc"></div>'
);
@ -84,10 +84,9 @@ ebi('op_up2k').innerHTML = (
'<div id="u2btn_ct">\n' +
' <div id="u2btn">\n' +
' <span id="u2bm"></span><br />\n' +
' drag/drop files<br />\n' +
' and folders here<br />\n' +
' (or click me)\n' +
' <span id="u2bm"></span>\n' +
' drop files / folders<br />\n' +
' here (or click me)\n' +
' </div>\n' +
'</div>\n' +
@ -121,8 +120,7 @@ ebi('op_up2k').innerHTML = (
'</table></div>\n' +
'<p id="u2flagblock"><b>the files were added to the queue</b><br />however there is a busy up2k in another browser tab,<br />so waiting for that to finish first</p>\n' +
'<p id="u2foot"></p>\n' +
'<p id="u2footfoot" data-perm="write">( you can use the <a href="#" id="u2nope">basic uploader</a> if you don\'t need lastmod timestamps, resumable uploads, or progress bars )</p>'
'<p id="u2foot"></p>'
);
@ -146,7 +144,6 @@ ebi('op_cfg').innerHTML = (
' <h3>switches</h3>\n' +
' <div>\n' +
' <a id="tooltips" class="tgl btn" href="#" tt="◔ ◡ ◔"> tooltips</a>\n' +
' <a id="lightmode" class="tgl btn" href="#">☀️ lightmode</a>\n' +
' <a id="griden" class="tgl btn" href="#" tt="toggle icons or list-view$NHotkey: G">田 the grid</a>\n' +
' <a id="thumbs" class="tgl btn" href="#" tt="in icon view, toggle icons or thumbnails$NHotkey: T">🖼️ thumbs</a>\n' +
' <a id="dotfiles" class="tgl btn" href="#" tt="show hidden files (if server permits)">dotfiles</a>\n' +
@ -154,6 +151,11 @@ ebi('op_cfg').innerHTML = (
' <a id="spafiles" class="tgl btn" href="#" tt="speedboost when not using the navpane;$Nturn it off if things arent loading somehow">spa</a>\n' +
' </div>\n' +
'</div>\n' +
'<div>\n' +
' <h3>themes</h3>\n' +
' <div id="themes">\n' +
' </div>\n' +
'</div>\n' +
(have_zip ? (
'<div><h3>folder download</h3><div id="arc_fmt"></div></div>\n'
) : '') +
@ -262,6 +264,8 @@ function goto(dest) {
fn();
}
clmod(document.documentElement, 'op_open', dest);
if (window['treectl'])
treectl.onscroll();
}
@ -3698,7 +3702,7 @@ var treectl = (function () {
treeh = winh - atop;
tree.style.top = top + 'px';
tree.style.height = treeh < 10 ? '' : Math.floor(treeh - 1) + 'px';
tree.style.height = treeh < 10 ? '' : Math.floor(treeh) + 'px';
}
}
timer.add(onscroll2, true);
@ -3966,7 +3970,8 @@ var treectl = (function () {
return;
}
ebi('srv_info').innerHTML = '<span>' + res.srvinf + '</span>';
srvinf = res.srvinf;
ebi('srv_info').innerHTML = ebi('srv_info2').innerHTML = '<span>' + res.srvinf + '</span>';
if (this.hpush && !showfile.active())
hist_push(this.top);
@ -4192,10 +4197,11 @@ function apply_perms(newperms) {
axs += '-Only';
}
ebi('acc_info').innerHTML = '<span' + aclass + axs + ' access</span>' + (acct != '*' ?
'<a href="/?pw=x">Logout ' + acct + '</a>' : '<a href="/?h">Login</a>');
ebi('acc_info').innerHTML = '<span id="srv_info2"><span>' + srvinf +
'</span></span><span' + aclass + axs + ' access</span>' + (acct != '*' ?
'<a href="/?pw=x">Logout ' + acct + '</a>' : '<a href="/?h">Login</a>');
var o = QSA('#ops>a[data-perm], #u2footfoot');
var o = QSA('#ops>a[data-perm]');
for (var a = 0; a < o.length; a++) {
var display = '';
var needed = o[a].getAttribute('data-perm').split(' ');
@ -4550,20 +4556,49 @@ var mukey = (function () {
})();
var light;
(function () {
var light, theme;
var settheme = (function () {
var ax = 'abcdefghijklmnopqrstuvwx';
theme = sread('theme') || 'a';
if (!/^[a-x][yz]/.exec(theme))
theme = dtheme;
light = !!(theme.indexOf('y') + 1);
function freshen() {
clmod(document.documentElement, "light", light);
clmod(document.documentElement, "dark", !light);
var cl = document.documentElement.getAttribute('class');
cl = cl.replace(/\b(light|dark|[a-z]{1,2})\b/g, '').replace(/ +/g, ' ');
document.documentElement.setAttribute('class', cl + ' ' + theme + ' ');
pbar.drawbuf();
pbar.drawpos();
vbar.draw();
showfile.setstyle();
var html = [], itheme = ax.indexOf(theme.charAt(0)) * 2 + (light ? 1 : 0);
for (var a = 0; a < themes; a++)
html.push('<a href="#" class="btn tgl' + (a == itheme ? ' on' : '') + '">' + a + '</a>');
ebi('themes').innerHTML = html.join('');
var btns = QSA('#themes a');
for (var a = 0; a < themes; a++)
btns[a].onclick = settheme;
}
bcfg_bind(window, 'light', 'lightmode', false, freshen);
function settheme(e) {
var i = e;
try { ev(e); i = e.target.textContent; } catch (ex) { }
light = i % 2 == 1;
var c = ax.charAt(Math.floor(i / 2)),
l = light ? 'y' : 'z';
theme = c + l + ' ' + c + ' ' + l + ' ' + (light ? 'light ' : 'dark ');
swrite('theme', theme);
freshen();
}
freshen();
return settheme;
})();

View file

@ -136,13 +136,13 @@ var md_opt = {
(function () {
var l = localStorage,
drk = l.lightmode != 1,
drk = l.light != 1,
btn = document.getElementById("lightswitch"),
f = function (e) {
if (e) { e.preventDefault(); drk = !drk; }
document.documentElement.setAttribute("class", drk? "dark":"light");
btn.innerHTML = "go " + (drk ? "light":"dark");
l.lightmode = drk? 0:1;
l.light = drk? 0:1;
};
btn.onclick = f;

View file

@ -34,11 +34,11 @@ var md_opt = {
var lightswitch = (function () {
var l = localStorage,
drk = l.lightmode != 1,
drk = l.light != 1,
f = function (e) {
if (e) drk = !drk;
document.documentElement.setAttribute("class", drk? "dark":"light");
l.lightmode = drk? 0:1;
l.light = drk? 0:1;
};
f();
return f;

View file

@ -97,7 +97,7 @@
<a href="#" id="repl">π</a>
<script>
document.documentElement.setAttribute("class", localStorage.lightmode == 1 ? "light" : "dark");
document.documentElement.setAttribute("class", localStorage.light == 1 ? "light" : "dark");
</script>
<script src="/.cpr/util.js?_={{ ts }}"></script>

View file

@ -644,12 +644,6 @@ function up2k_init(subtle) {
return false;
}
ebi('u2nope').onclick = function (e) {
ev(e);
setmsg(suggest_up2k, 'msg');
goto('bup');
};
setmsg(suggest_up2k, 'msg');
if (!String.prototype.format) {
@ -1476,7 +1470,6 @@ function up2k_init(subtle) {
min_filebuf = 1;
var td = Date.now() - t0;
if (td > 50) {
ebi('u2foot').innerHTML += "<p>excessive filereader latency (" + td + " ms), increasing readahead</p>";
min_filebuf = 32 * 1024 * 1024;
}
}
@ -2070,10 +2063,10 @@ function up2k_init(subtle) {
try {
var ico = uc.fsearch ? '🔎' : '🚀',
desc = uc.fsearch ? 'Search' : 'Upload';
desc = uc.fsearch ? 'S E A R C H' : 'U P L O A D';
clmod(ebi('op_up2k'), 'srch', uc.fsearch);
ebi('u2bm').innerHTML = ico + ' <sup>' + desc + '</sup>';
ebi('u2bm').innerHTML = ico + '&nbsp; <sup>' + desc + '</sup>';
}
catch (ex) { }