From 4d62b3478609ad4baa534df6d1eec9bd8cd2e05d Mon Sep 17 00:00:00 2001 From: ed Date: Mon, 19 Apr 2021 15:40:32 +0200 Subject: [PATCH] browser: add light mode --- copyparty/web/browser.css | 166 +++++++++++++++++++++++++++++++++++++ copyparty/web/browser.html | 11 ++- copyparty/web/browser.js | 18 ++++ copyparty/web/md.html | 4 +- copyparty/web/mde.html | 6 +- copyparty/web/splash.html | 2 +- copyparty/web/up2k.js | 4 +- copyparty/web/upload.css | 35 ++++++++ 8 files changed, 234 insertions(+), 12 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 7f0d0ff7..dff3abad 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -685,3 +685,169 @@ input[type="checkbox"]:checked+label { font-family: monospace, monospace; line-height: 2em; } + + + + + +html.light { + color: #333; + background: #eee; + text-shadow: none; +} +html.light #ops, +html.light .opbox, +html.light #srch_form { + background: #f7f7f7; + box-shadow: 0 0 .3em #ddd; + border-color: #f7f7f7; +} +html.light #ops a.act { + box-shadow: 0 .2em .2em #ccc; + background: #f7f7f7; + border-color: #07a; + padding-top: .4em; +} +html.light #op_cfg h3 { + border-color: #ccc; +} +html.light .tglbtn, +html.light #tree > a + a { + color: #666; + background: #ddd; + box-shadow: none; +} +html.light .tglbtn:hover, +html.light #tree > a + a:hover { + background: #caf; +} +html.light .tglbtn.on, +html.light #tree > a + a.on { + background: #4a0; + color: #fff; +} +html.light #srv_info { + color: #c83; + text-shadow: 1px 1px 0 #fff; +} +html.light #srv_info span { + color: #000; +} +html.light #treeul a+a { + background: inherit; + color: #06a; +} +html.light #treeul a.hl { + background: #07a; + color: #fff; +} +html.light #tree li { + border-color: #ddd #fff #f7f7f7 #fff; +} +html.light #tree ul { + border-color: #ccc; +} +html.light a, +html.light #ops a, +html.light #files tbody div a:last-child { + color: #06a; +} +html.light #files tbody { + background: #f7f7f7; +} +html.light #files { + box-shadow: 0 0 .3em #ccc; +} +html.light #files thead th { + background: #eee; +} +html.light #files tr+tr td { + border-top: 1px solid #ddd; +} +html.light #files td { + border-bottom: 1px solid #f7f7f7; +} +html.light #files tbody tr:last-child td { + border-bottom: .2em solid #ccc; +} +html.light #files td:nth-child(2n) { + color: #d38; +} +html.light #files tr:hover td { + background: #fff; +} +html.light #files tbody a.play { + color: #c0f; +} +html.light #files tr.play td { + background: #fc5; +} +html.light #files tr.play a { + color: #406; +} +html.light #files > thead > tr > th.min span { + background: linear-gradient(90deg, rgba(68,68,68,0), rgba(68,68,68,0.2) 70%, rgba(68,68,68,0.5)); +} +html.light #blocked { + background: #eee; +} +html.light #blk_play a, +html.light #blk_abrt a { + background: #fff; + box-shadow: 0 .2em .4em #ddd; +} +html.light #widget a { + color: #fc5; +} +html.light #files tr.sel:hover td { + background: #c37; +} +html.light #files tr.sel a { + color: #fff; +} +html.light input[type="checkbox"] + label { + color: #333; +} +.opview input[type="text"] { + background: #fff; + color: #333; + box-shadow: 0 0 2px #888; + border-color: #d38; +} +html.light #ops:hover #opdesc { + background: #fff; + box-shadow: 0 .3em 1em #ccc; +} +html.light #opdesc code { + background: #060; + color: #fff; +} +html.light #u2tab a>span, +html.light #files td div span { + color: #000; +} +html.light #files a:hover { + color: #000; + background: #fff; +} +html.light #path { + background: #f7f7f7; + text-shadow: none; + box-shadow: 0 0 .3em #bbb; +} +html.light #path a { + color: #333; +} +html.light #path a:not(:last-child)::after { + border-color: #ccc; + background: none; + border-width: .1em .1em 0 0; + margin: -.2em .3em -.2em -.3em; +} +html.light #path a:hover { + background: none; + color: #60a; +} +html.light #files tbody div a { + color: #d38; +} \ No newline at end of file diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index 01c15209..541c6202 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -39,14 +39,17 @@ {%- include 'upload.html' %}
-

key notation

-
+

switches

+
+ tooltips + lightmode +
{%- if have_zip %}

folder download

{%- endif %} -

tooltips

-
enable
+

key notation

+

diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 2a4f3d62..ace69031 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -1577,6 +1577,24 @@ function addcrc() { })(); +(function () { + var light = bcfg_get('lightmode', false); + + function freshen() { + document.documentElement.setAttribute("class", light ? "light" : ""); + } + + ebi('lightmode').onclick = function (e) { + ev(e); + light = !light; + bcfg_set('lightmode', light); + freshen(); + }; + + freshen(); +})(); + + var arcfmt = (function () { if (!ebi('arc_fmt')) return { "render": function () { } }; diff --git a/copyparty/web/md.html b/copyparty/web/md.html index 457d56d3..171d0dd8 100644 --- a/copyparty/web/md.html +++ b/copyparty/web/md.html @@ -138,10 +138,10 @@ var md_opt = { document.documentElement.setAttribute("class", dark ? "dark" : ""); btn.innerHTML = "go " + (dark ? "light" : "dark"); if (window.localStorage) - localStorage.setItem('darkmode', dark ? 1 : 0); + localStorage.setItem('lightmode', dark ? 0 : 1); }; btn.onclick = toggle; - if (window.localStorage && localStorage.getItem('darkmode') == 1) + if (window.localStorage && localStorage.getItem('lightmode') != 1) toggle(); })(); diff --git a/copyparty/web/mde.html b/copyparty/web/mde.html index e88c297f..eaf3fa3b 100644 --- a/copyparty/web/mde.html +++ b/copyparty/web/mde.html @@ -31,12 +31,12 @@ var md_opt = { var lightswitch = (function () { var fun = function () { - var dark = !!!document.documentElement.getAttribute("class"); + var dark = !document.documentElement.getAttribute("class"); document.documentElement.setAttribute("class", dark ? "dark" : ""); if (window.localStorage) - localStorage.setItem('darkmode', dark ? 1 : 0); + localStorage.setItem('lightmode', dark ? 0 : 1); }; - if (window.localStorage && localStorage.getItem('darkmode') == 1) + if (window.localStorage && localStorage.getItem('lightmode') != 1) fun(); return fun; diff --git a/copyparty/web/splash.html b/copyparty/web/splash.html index cec763ce..d59e18eb 100644 --- a/copyparty/web/splash.html +++ b/copyparty/web/splash.html @@ -38,7 +38,7 @@ diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js index a982b525..23e920ed 100644 --- a/copyparty/web/up2k.js +++ b/copyparty/web/up2k.js @@ -1333,14 +1333,14 @@ function up2k_init(have_crypto) { var obj = ebi('nthread'); if (dir.target) { - obj.style.background = '#922'; + clmod(obj, 'err', 1); var v = Math.floor(parseInt(obj.value)); if (v < 1 || v > 8 || v !== v) return; parallel_uploads = v; swrite('nthread', v); - obj.style.background = '#444'; + clmod(obj, 'err'); return; } diff --git a/copyparty/web/upload.css b/copyparty/web/upload.css index 8b52ea57..40278f2d 100644 --- a/copyparty/web/upload.css +++ b/copyparty/web/upload.css @@ -141,6 +141,9 @@ font-size: 1.2em; padding: .15em 0; } +#u2conf .txtbox.err { + background: #922; +} #u2conf a { color: #fff; background: #c38; @@ -238,3 +241,35 @@ float: right; margin-bottom: -.3em; } + + + + + +html.light #u2btn { + box-shadow: .4em .4em 0 #ccc; +} +html.light #u2cards span { + color: #000; +} +html.light #u2cards a { + background: linear-gradient(to bottom, #eee, #fff); +} +html.light #u2cards a.act { + background: inherit; +} +html.light #u2conf .txtbox { + background: #fff; + color: #444; +} +html.light #u2conf .txtbox.err { + background: #f96; + color: #300; +} +html.light #u2cdesc { + background: #fff; + border: none; +} +html.light #op_up2k.srch #u2btn { + border-color: #a80; +} \ No newline at end of file