diff --git a/README.md b/README.md
index 133d962f..a9e7e17e 100644
--- a/README.md
+++ b/README.md
@@ -664,11 +664,15 @@ the main tabs in the ui
* `[🔎]` [search](#searching) by size, date, path/name, mp3-tags ...
* `[🧯]` [unpost](#unpost): undo/delete accidental uploads
* `[🚀]` and `[🎈]` are the [uploaders](#uploading)
+* `[📟]` send-msg: either to server-log or into textfiles if `--urlform save`
+* `[⚙️]` client config options
+
+
+## quick actions (+)
+
* `[📂]` mkdir: create directories
* `[📝]` new-file: create a new textfile
-* `[📟]` send-msg: either to server-log or into textfiles if `--urlform save`
-* `[🎺]` audio-player config options
-* `[⚙️]` general client config options
+* `[🚀]` upload: quick way to pick files for upload
## hotkeys
@@ -682,7 +686,7 @@ the browser has the following hotkeys (always qwerty)
* `G` toggle list / [grid view](#thumbnails) -- same as `田` bottom-right
* `T` toggle thumbnails / icons
* `ESC` close various things
-* `ctrl-K` delete selected files/folders
+* `ctrl-K/Del` delete selected files/folders
* `ctrl-X` cut selected files/folders
* `ctrl-C` copy selected files/folders to clipboard
* `ctrl-V` paste (move/copy)
@@ -737,9 +741,9 @@ the browser has the following hotkeys (always qwerty)
## navpane
-switching between breadcrumbs or navpane
+opening the navpane
-click the `🌲` or pressing the `B` hotkey to toggle between breadcrumbs path (default), or a navpane (tree-browser sidebar thing)
+clicking the `≡` or pressing the `B` hotkey toggles the navpane (tree-browser sidebar thing)
* `[+]` and `[-]` (or hotkeys `A`/`D`) adjust the size
* `[🎯]` jumps to the currently open folder
@@ -752,7 +756,7 @@ click the `🌲` or pressing the `B` hotkey to toggle between breadcrumbs path (
## thumbnails
-press `g` or `田` to toggle grid-view instead of the file listing and `t` toggles icons / thumbnails
+press `g` or use the view mode buttons in the top left to toggle grid-view instead of the file listing and `t` toggles icons / thumbnails
* can be made default globally with `--grid` or per-volume with volflag `grid`
* enable by adding `?imgs` to a link, or disable with `?imgs=0`
@@ -916,9 +920,7 @@ dropping files into the browser also lets you see if they exist on the server

-when you drag/drop files into the browser, you will see two dropzones: `Upload` and `Search`
-
-> on a phone? toggle the `[🔎]` switch green before tapping the big yellow Search button to select your files
+toggle the `[🔎]` switch in the upload options to search for files instead of uploading
the files will be hashed on the client-side, and each hash is sent to the server, which checks if that file exists somewhere
@@ -988,6 +990,8 @@ file selection: click somewhere on the line (not the link itself), then:
you can copy/move files across browser tabs (cut/copy in one tab, paste in another)
+you can drag/drop selected files into other folders
+
## shares
@@ -1164,7 +1168,7 @@ some highlights:
click the `play` link next to an audio file, or copy the link target to [share it](https://a.ocv.me/pub/demo/music/Ubiktune%20-%20SOUNDSHOCK%202%20-%20FM%20FUNK%20TERRROR!!/#af-1fbfba61&t=18) (optionally with a timestamp to start playing from, like that example does)
-open the `[🎺]` media-player-settings tab to configure it,
+open the `[⚙]` configuration options and go to the `[🎵]` media player section to configure it,
* "switches":
* `[🔁]` repeats one single song forever
* `[🔀]` shuffles the files inside each folder
@@ -1216,7 +1220,7 @@ you can use foobar2000, deadbeef, just about any standalone player should work -
alternatively, you can create the playlist using copyparty itself:
-* open the `[🎺]` media-player-settings tab and enable the `[📻]` create-playlist feature -- this adds two new buttons in the bottom-right tray, `[📻add]` and `[📻copy]` which appear when you listen to music, or when you select a few audiofiles
+* open the `[⚙]` configuration options, go to the `[🎵]` media player section and enable the `[📻]` create-playlist feature -- this adds two new buttons in the bottom-right tray, `[📻add]` and `[📻copy]` which appear when you listen to music, or when you select a few audiofiles
* click the `📻add` button while a song is playing (or when you've selected some songs) and they'll be added to "the list" (you can't see it yet)
@@ -1305,6 +1309,12 @@ see [./srv/expand/](./srv/expand/) for usage and examples
search by size, date, path/name, mp3-tags, ...
+by default, the `[🔍]` search button shows the folder search bar.
+
+search for files within a folder and optionally its subfolders.
+
+for extended search options, use the dropdown arrow to open the full search UI
+

when started with `-e2dsa` copyparty will scan/index all your files. This avoids duplicates on upload, and also makes the volumes searchable through the web-ui:
diff --git a/contrib/plugins/minimal-up2k.html b/contrib/plugins/minimal-up2k.html
index bc44cf7f..f437d04c 100644
--- a/contrib/plugins/minimal-up2k.html
+++ b/contrib/plugins/minimal-up2k.html
@@ -18,7 +18,7 @@
#ops, #tree, #path, #wfp, /* main tabs and navigators (tree/breadcrumbs) */
- #u2conf tr:first-child>td[rowspan]:not(#u2btn_cw), /* most of the config options */
+ #u2conf tr:first-child>td[rowspan], /* most of the config options */
#srch_dz, #srch_zd, /* the filesearch dropzone */
@@ -30,16 +30,12 @@
/* add some margins because now it's weird */
.opview {margin-top: 2.5em}
- #op_up2k {margin-top: 6em}
/* and embiggen the upload button */
#u2conf #u2btn, #u2btn {padding:1.5em 0}
/* adjust the button area a bit */
- #u2conf.w, #u2conf.ww {width: 35em !important; margin: 5em auto}
-
- /* a */
- #op_up2k {min-height: 0}
+ #u2conf.w {width: 35em !important; margin: 5em auto}
diff --git a/contrib/plugins/minimal-up2k.js b/contrib/plugins/minimal-up2k.js
index b3514aea..92689a25 100644
--- a/contrib/plugins/minimal-up2k.js
+++ b/contrib/plugins/minimal-up2k.js
@@ -39,20 +39,6 @@ var u2min = `
display: none !important;
}
#u2conf {margin:5em auto 0 auto !important}
-#u2conf.ww {width:70em}
-#u2conf.w {width:50em}
-#u2conf.w .c,
-#u2conf.w #u2btn_cw {text-align:left}
-#u2conf.w #u2btn_cw {width:70%}
-#u2etaw {margin:3em auto}
-#u2etaw.w {
- text-align: center;
- margin: -3.5em auto 5em auto;
-}
-#u2etaw.w #u2etas {margin-right:-37em}
-#u2etaw.w #u2etas.o {margin-top:-2.2em}
-#u2etaw.ww {margin:-1em auto}
-#u2etaw.ww #u2etas {padding-left:4em}
#u2etas {
background: none !important;
border: none !important;
diff --git a/contrib/plugins/rave.js b/contrib/plugins/rave.js
index c6fed874..8e4ea94c 100644
--- a/contrib/plugins/rave.js
+++ b/contrib/plugins/rave.js
@@ -119,7 +119,7 @@ body.untz {
if (--uofs >= 0) {
document.body.style.marginLeft = hrand() * uofs + 'px';
ebi('tree').style.marginLeft = hrand() * uofs + 'px';
- for (var a of QSA('#ops>a, #path>a, #pctl>a'))
+ for (var a of QSA('#ops>a, #path>a, .pctl>a'))
a.style.transform = 'translate(' + hrand() * uofs * 1 + 'px, ' + hrand() * uofs * 0.7 + 'px) rotate(' + Math.random() * uofs * 0.7 + 'deg)'
}
diff --git a/copyparty/__init__.py b/copyparty/__init__.py
index a698107c..6430e655 100644
--- a/copyparty/__init__.py
+++ b/copyparty/__init__.py
@@ -80,6 +80,7 @@ web/deps/marked.js
web/deps/mfusepy.py
web/deps/mini-fa.css
web/deps/mini-fa.woff
+web/deps/orbitron.woff2
web/deps/prism.css
web/deps/prism.js
web/deps/prismd.css
diff --git a/copyparty/__main__.py b/copyparty/__main__.py
index 60bd185e..338680ed 100644
--- a/copyparty/__main__.py
+++ b/copyparty/__main__.py
@@ -1904,12 +1904,12 @@ def add_og(ap):
def add_ui(ap, retry: int):
- THEMES = 10
+ THEMES = 12
ap2 = ap.add_argument_group("ui options")
ap2.add_argument("--grid", action="store_true", help="show grid/thumbnails by default (volflag=grid)")
- ap2.add_argument("--gsel", action="store_true", help="select files in grid by ctrl-click (volflag=gsel)")
+ ap2.add_argument("--no-gsel", action="store_true", help="ctrl-click in gridview will open-in-new-tab instead of select-file (volflag=-gsel)")
ap2.add_argument("--localtime", action="store_true", help="default to local timezone instead of UTC")
- ap2.add_argument("--ui-filesz", metavar="FMT", type=u, default="1", help="default filesize format; one of these: 0, 1, 2, 2c, 3, 3c, 4, 4c, 5, 5c, 6, 6c, 7, 7c, fuzzy (see UI)")
+ ap2.add_argument("--ui-filesz", metavar="FMT", type=u, default="6", help="default filesize format; one of these: 0, 1, 2, 2c, 3, 3c, 4, 4c, 5, 5c, 6, 6c, 7, 7c, fuzzy (see UI)")
ap2.add_argument("--gauto", metavar="PERCENT", type=int, default=0, help="switch to gridview if more than \033[33mPERCENT\033[0m of files are pics/vids; 0=disabled")
ap2.add_argument("--rcm", metavar="TXT", default="yy", help="rightclick-menu; two yes/no options: 1st y/n is enable-custom-menu, 2nd y/n is enable-double")
ap2.add_argument("--lang", metavar="LANG", type=u, default="eng", help="language, for example \033[32meng\033[0m / \033[32mnor\033[0m / ...")
@@ -1970,6 +1970,7 @@ def add_ui(ap, retry: int):
ap2.add_argument("--ui-noctxb", action="store_true", help="hide context-buttons in the UI (volflag=ui_noctxb)")
ap2.add_argument("--ui-norepl", action="store_true", help="hide repl-button in the UI (volflag=ui_norepl)")
ap2.add_argument("--have-unlistc", action="store_true", help=argparse.SUPPRESS)
+ ap2.add_argument("--gsel", action="store_true", default=True, help=argparse.SUPPRESS)
def add_debug(ap):
diff --git a/copyparty/httpcli.py b/copyparty/httpcli.py
index 246545fc..6a19307e 100644
--- a/copyparty/httpcli.py
+++ b/copyparty/httpcli.py
@@ -5291,7 +5291,7 @@ class HttpCli(object):
# chrome cannot handle more than ~2000 unique SVGs
# so url-param "raster" returns a png/webp instead
# (useragent-sniffing kinshi due to caching proxies)
- mime, ico = self.conn.hsrv.ico.get(txt, not small, "raster" in self.uparam)
+ mime, ico = self.conn.hsrv.ico.get(txt, not small, "raster" in self.uparam, self.uparam.get('a'))
lm = formatdate(self.E.t0)
self.reply(ico, mime=mime, headers={"Last-Modified": lm})
@@ -6652,7 +6652,7 @@ class HttpCli(object):
{
"lead": "",
"href": "%s/" % (x,),
- "ext": "---",
+ "ext": "",
"sz": 0,
"ts": 0,
"tags": e_d,
@@ -6861,7 +6861,7 @@ class HttpCli(object):
pass
if is_dir:
- return self.tx_svg("folder")
+ return self.reply(b"(no thumbnail)")
thp = None
if self.thumbcli and not nothumb:
@@ -6881,7 +6881,7 @@ class HttpCli(object):
elif th_fmt in ACODE2_FMT:
raise Pebkac(415)
- return self.tx_ico(rem)
+ return self.reply(b"(no thumbnail)")
elif self.can_write and th_fmt is not None:
return self.tx_svg("upload\nonly")
@@ -6976,15 +6976,20 @@ class HttpCli(object):
elif not self.can_write:
return self.tx_404(True)
+ srv_name = ""
srv_info = []
try:
if not self.args.nih:
+ srv_name = self.args.name_html
srv_info.append(self.args.name_html)
except:
self.log("#wow #whoa")
zi = vn.flags["du_iwho"]
+ h1 = ""
+ h2 = ""
+ space_used_percent = 0
if zi and (
zi == 9
or (zi == 7 and self.uname != "*")
@@ -7012,6 +7017,8 @@ class HttpCli(object):
h1 = humansize(free or 0)
h2 = humansize(total)
srv_info.append("{} free of {}".format(h1, h2))
+ if(total > 0):
+ space_used_percent = (total - (free or 0)) / total * 100
elif zs:
self.log("diskfree(%r): %s" % (abspath, zs), 3)
@@ -7062,6 +7069,9 @@ class HttpCli(object):
"files": [],
"taglist": [],
"srvinf": srv_infot,
+ "space_used_percent": space_used_percent,
+ "space_free": h1,
+ "space_total": h2,
"acct": self.uname,
"perms": perms,
"cfg": vn.js_ls,
@@ -7085,6 +7095,10 @@ class HttpCli(object):
"url_suf": url_suf,
"title": html_escape("%s %s" % (self.args.bname, self.vpath), crlf=True),
"srv_info": srv_infot,
+ "srv_name": srv_name,
+ "space_used_percent": space_used_percent,
+ "space_free": h1,
+ "space_total": h2,
"dtheme": self.args.theme,
}
@@ -7230,12 +7244,12 @@ class HttpCli(object):
margin = "DIR"
elif add_dk:
zs = absreal(fspath)
- margin = 'zip ' % (
+ margin = 'zip ' % (
quotep(href),
self.gen_fk(2, self.args.dk_salt, zs, 0, 0)[:add_dk],
)
else:
- margin = 'zip ' % (
+ margin = 'zip ' % (
quotep(href),
)
elif fn in hist:
@@ -7259,7 +7273,7 @@ class HttpCli(object):
)
if is_dir:
- ext = "---"
+ ext = ""
elif "." in fn:
ext = ptn_hr.sub("@", fn.rsplit(".", 1)[1])
if len(ext) > 16:
diff --git a/copyparty/ico.py b/copyparty/ico.py
index 820c53af..5b27027a 100644
--- a/copyparty/ico.py
+++ b/copyparty/ico.py
@@ -11,31 +11,32 @@ from .th_srv import HAVE_PIL, HAVE_PILF
from .util import BytesIO, html_escape # type: ignore
+RE_CSS_COLOR = re.compile(r"[^a-zA-Z0-9#()%.,/-]")
+
+
class Ico(object):
def __init__(self, args: argparse.Namespace) -> None:
self.args = args
- def get(self, ext: str, as_thumb: bool, chrome: bool) -> tuple[str, bytes]:
+ def get(self, ext: str, as_thumb: bool, png: bool, accent: str) -> tuple[str, bytes]:
"""placeholder to make thumbnails not break"""
bext = ext.encode("ascii", "replace")
ext = bext.decode("utf-8")
- zb = hashlib.sha1(bext).digest()[2:4]
- if PY2:
- zb = [ord(x) for x in zb] # type: ignore
-
- c1 = colorsys.hsv_to_rgb(zb[0] / 256.0, 1, 0.3)
- c2 = colorsys.hsv_to_rgb(zb[0] / 256.0, 0.8 if HAVE_PILF else 1, 1)
- ci = [int(x * 255) for x in list(c1) + list(c2)]
- c = "".join(["%02x" % (x,) for x in ci])
-
+
w = 100
h = 30
if as_thumb:
sw, sh = self.args.th_size.split("x")
h = int(100.0 / (float(sw) / float(sh)))
- if chrome:
+ if accent:
+ accent = RE_CSS_COLOR.sub("", accent)
+
+ # obsolete. 2000+ svgs slows chrome down massively, but no crash.
+ # further, unique svgs are only used for non-standard thumbnails,
+ # so it's unrealistic to see that many in use
+ if png & 0:
# cannot handle more than ~2000 unique SVGs
if HAVE_PILF:
# pillow 10.1 made this the default font;
@@ -48,11 +49,11 @@ class Ico(object):
h = int(128.0 * h / w)
w = 128
- img = Image.new("RGB", (w, h), "#" + c[:6])
+ img = Image.new("RGBA", (w, h), "#00000000")
pb = ImageDraw.Draw(img)
_, _, tw, th = pb.textbbox((0, 0), ext2, font_size=16)
xy = (int((w - tw) / 2), int((h - th) / 2))
- pb.text(xy, ext2, fill="#" + c[6:], font_size=16)
+ pb.text(xy, ext2, fill=accent, font_size=16)
img = img.resize((w * 2, h * 2), Image.NEAREST)
@@ -69,7 +70,7 @@ class Ico(object):
h = int(64.0 * h / w)
w = 64
- img = Image.new("RGB", (w, h), "#" + c[:6])
+ img = Image.new("RGBA", (w, h), "#00000000")
pb = ImageDraw.Draw(img)
try:
_, _, tw, th = pb.textbbox((0, 0), ext)
@@ -79,7 +80,7 @@ class Ico(object):
tw += len(ext)
cw = tw // len(ext)
x = ((w - tw) // 2) - (cw * 2) // 3
- fill = "#" + c[6:]
+ fill = accent
for ch in ext:
pb.text((x, (h - th) // 2), " %s " % (ch,), fill=fill)
x += cw
@@ -93,9 +94,9 @@ class Ico(object):
svg = """\
-
+
{}
+ fill="{}" font-family="monospace" font-size="14px" style="letter-spacing:.5px">{}
"""
@@ -109,6 +110,6 @@ class Ico(object):
else:
y = "50%"
- svg = svg.format(h, c[:6], y, c[6:], txt)
+ svg = svg.format(h, y, accent or '#000', txt)
return "image/svg+xml", svg.encode("utf-8")
diff --git a/copyparty/util.py b/copyparty/util.py
index 6396445f..40ea8785 100644
--- a/copyparty/util.py
+++ b/copyparty/util.py
@@ -450,7 +450,10 @@ if ANYWIN:
IMPLICATIONS.extend([["z", "zm4"]])
-UNPLICATIONS = [["no_dav", "daw"]]
+UNPLICATIONS = [
+ ["no_dav", "daw"],
+ ["no_gsel", "gsel"],
+]
DAV_ALLPROP_L = [
diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js
index 3bd2a53e..570338d9 100644
--- a/copyparty/web/baguettebox.js
+++ b/copyparty/web/baguettebox.js
@@ -28,7 +28,7 @@ window.baguetteBox = (function () {
onChange: null,
readDirRtl: false,
},
- overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnZoom, btnVmode, btnReadDir, btnClose,
+ overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnZoom, btnPixelated, btnVmode, btnReadDir, btnClose,
currentGallery = [],
currentIndex = 0,
isOverlayVisible = false,
@@ -303,21 +303,22 @@ window.baguetteBox = (function () {
if (!overlay) {
var ctr = mknod('div');
ctr.innerHTML = (
- '
' +
+ '
' +
'
' +
- '
< ' +
- '
> ' +
+ '
' +
+ '
' +
'
' +
- '
? ' +
- '
- ' +
- '
ltr ' +
- '
↶ ' +
- '
↷ ' +
- '
sel ' +
- '
⛶ ' +
- '
z ' +
- '
' +
- '
X ' +
+ '
✕ ' +
+ '
' +
+ '
⛶ ' +
+ '
↕ ' +
+ '
👾 ' +
+ '
☑️sel ' +
+ '
↷ ' +
+ '
↶ ' +
+ '
ltr ' +
+ '
- ' +
+ '
? ' +
'
'
);
overlay = ctr.firstChild;
@@ -335,11 +336,14 @@ window.baguetteBox = (function () {
btnSel = ebi('bbox-tsel');
btnFull = ebi('bbox-full');
btnZoom = ebi('bbzoom');
+ btnPixelated = ebi('bbpixelated');
btnVmode = ebi('bbox-vmode');
btnClose = ebi('bbox-close');
bcfg_bind(options, 'bbzoom', 'bbzoom', false, setzoom);
setzoom();
+ bcfg_bind(options, 'bbpixelated', 'bbpixelated', false, setpixelated);
+ setpixelated();
}
function halp() {
@@ -356,6 +360,7 @@ window.baguetteBox = (function () {
['R', 'rotate (shift=ccw)'],
['F', 'toggle fullscreen'],
['Z', 'toggle zoom/stretch'],
+ ['X', 'toggle pixelated rendering'],
['S', 'toggle file selection'],
['space, P, K', 'video: play / pause'],
['U', 'video: seek 10sec back'],
@@ -440,6 +445,8 @@ window.baguetteBox = (function () {
tglfull();
else if (kl == "z")
btnZoom.click();
+ else if (kl == "x")
+ btnPixelated.click();
else if (kl == "s")
tglsel();
else if (kl == "r")
@@ -553,6 +560,12 @@ window.baguetteBox = (function () {
btnState(btnZoom, sel);
}
+ function setpixelated() {
+ var sel = clgot(btnPixelated, 'on')
+ clmod(ebi('bbox-overlay'), 'pixelated', sel);
+ btnState(btnPixelated, sel);
+ }
+
function tglsel() {
var o = findfile()[3];
clmod(o.closest('tr'), 'sel', 't');
@@ -576,18 +589,14 @@ window.baguetteBox = (function () {
if (vsplit(files[a].vp)[1] == name)
sel = true;
- ebi('bbox-overlay').style.background = sel ?
- 'rgba(153,34,85,0.7)' : '';
+ clmod(ebi('bbox-overlay'), 'sel', sel);
img.style.borderRadius = sel ? '1em' : '';
btnState(btnSel, sel);
}
function btnState(btn, sel) {
- btn.style.color = sel ? '#fff' : '';
- btn.style.background = sel ? '#d48' : '';
- btn.style.textShadow = sel ? '1px 1px 0 #b38' : '';
- btn.style.boxShadow = sel ? '.15em .15em 0 #502' : '';
+ clmod(btn, 'on', sel);
}
function keyUpHandler(e) {
@@ -729,10 +738,12 @@ window.baguetteBox = (function () {
if (options.buttons === 'auto' && ('ontouchstart' in window || currentGallery.length === 1))
options.buttons = false;
- btnPrev.style.display = btnNext.style.display = (options.buttons ? '' : 'none');
+ QS('#bbox-next .btn').style.display = QS('#bbox-prev .btn').style.display = (options.buttons ? '' : 'none');
}
function showOverlay(chosenImageIndex) {
+ clmod(ebi('ggrid'), 'waiting', true);
+
if (options.noScrollbars) {
var a = document.documentElement.style.overflowY,
b = document.body.style.overflowY;
@@ -756,6 +767,7 @@ window.baguetteBox = (function () {
loadImage(currentIndex, function () {
preloadNext(currentIndex);
preloadPrev(currentIndex);
+ clmod(ebi('ggrid'), 'waiting', false);
});
show_buttons(0);
@@ -1233,9 +1245,7 @@ window.baguetteBox = (function () {
}
function show_buttons(v) {
- clmod(ebi('bbox-btns'), 'off', v);
- clmod(btnPrev, 'off', v);
- clmod(btnNext, 'off', v);
+ clmod(ebi('bbox-overlay'), 'immersive', v);
}
function bounceAnimation(direction) {
@@ -1297,11 +1307,11 @@ window.baguetteBox = (function () {
x = e.clientX - rc.left,
fx = x / (rc.right - rc.left);
- if (fx < 0.3)
- return showLeftImage();
+ // if (fx < 0.3)
+ // return showLeftImage();
- if (fx > 0.7)
- return showRightImage();
+ // if (fx > 0.7)
+ // return showRightImage();
show_buttons('t');
@@ -1367,4 +1377,18 @@ window.baguetteBox = (function () {
};
})();
+
+function init(){
+ if(thegrid != undefined && thegrid.dirty == false && thegrid.bbox != true){
+ console.log('bbox load')
+ thegrid.bagit();
+ }
+ else{
+ setTimeout(init, 100)
+ }
+}
+
+console.log('wait for grid init');
+init();
+
J_BBX = 2;
diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index fb3db76a..0151c3e3 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1,5 +1,7 @@
:root {
color-scheme: dark;
+ --transparent: transparent;
+ --font-mono: monospace;
--grid-sz: 10em;
--grid-ln: 3;
@@ -7,71 +9,50 @@
--sbw: 0.5em;
--sbh: 0.5em;
- --fg: #ccc;
- --fg-max: #fff;
- --fg2-max: #fff;
- --fg-weak: #bbb;
-
- --bg-u6: #4c4c4c;
- --bg-u5: #444;
- --bg-u4: #383838;
- --bg-u3: #333;
- --bg-u2: #2b2b2b;
- --bg-u1: #282828;
- --bg: #222;
- --bgg: var(--bg);
- --bg-d1: #1c1c1c;
- --bg-d2: #181818;
- --bg-d3: #111;
- --bg-max: #000;
-
- --tab-alt: #f5a;
- --row-alt: #282828;
-
- --scroll: #eb0;
+ --tab-alt: var(--a);
+ --row-alt: var(--bg-u1);
+
--sel-fg: var(--bg-d1);
--sel-bg: var(--fg);
- --a: #fc5;
- --a-b: #c90;
- --a-hil: #fd9;
- --a-dark: #e70;
- --a-gray: #666;
-
--btn-fg: var(--a);
+ --btn-bg-a: rgba(128,128,128,0.15);
+ --btn-bg-a: color-mix(in oklab, var(--bg-max) 85%, var(--fg-max) 20%);
--btn-bg: rgba(128,128,128,0.15);
+ --btn-bg: color-mix(in oklab, var(--bg-u5), transparent);
--btn-h-fg: var(--a-hil);
- --btn-h-bg: #805;
- --btn-1-fg: #400;
+ --btn-h-bg: color-mix(in oklab, var(--a-gray) 45%, var(--bg-max));
+ --btn-1-fg: var(--bg);
--btn-1-bg: var(--a);
--btn-h-bs: var(--btn-bs);
--btn-h-bb: var(--btn-bb);
--btn-1-bs: var(--btn-bs);
--btn-1-bb: var(--btn-bb);
--btn-1h-fg: var(--btn-1-fg);
- --btn-1h-bg: #fe8;
+ --btn-1h-bg: var(--a-hil);
--btn-1h-bs: var(--btn-1-bs);
+ --btn-bb: 1px solid var(--bg-u3);
--btn-1h-bb: var(--btn-1-bb);
--chk-fg: var(--tab-alt);
--txt-sh: var(--bg-d2);
- --txt-bg: var(--btn-bg);
+ --txt-bg: var(--btn-bg-a);
--op-aa-fg: var(--a);
--op-aa-bg: var(--bg-d2);
- --op-a-sh: rgba(0,0,0,0.5);
+ --op-a-sh: color-mix(in oklab, var(--bg-max) 50%, transparent 50%);
--u2-btn-b1: #999;
--u2-sbtn-b1: #999;
--u2-txt-bg: var(--bg-u5);
--u2-tab-bg: linear-gradient(to bottom, var(--bg), var(--bg-u1));
--u2-tab-b1: rgba(128,128,128,0.8);
- --u2-tab-1-fg: #fd7;
- --u2-tab-1-bg: linear-gradient(to bottom, #353, var(--bg) 80%);
- --u2-tab-1-b1: #7c5;
- --u2-tab-1-b2: #583;
- --u2-tab-1-sh: #280;
+ --u2-tab-1-fg: var(--a-hil);
+ --u2-tab-1-bg: var(--bg);
+ --u2-tab-1-b1: #999;
+ --u2-tab-1-b2: #999;
+ --u2-tab-1-sh: transparent;
--u2-b-fg: #fff;
- --u2-b1-bg: #c38;
+ --u2-b1-bg: #c83;
--u2-b2-bg: #d80;
--u2-inf-bg: #07a;
--u2-inf-b1: #0be;
@@ -81,8 +62,8 @@
--u2-err-b1: #d06;
--ud-b1: #888;
- --sort-1: #fb0;
- --sort-2: #d09;
+ --sort-1: var(--a);
+ --sort-2: var(--a-gray);
--sz-b: #aaa;
--sz-k: #4ff;
@@ -93,151 +74,73 @@
--srv-1: #aaa;
--srv-2: #a73;
- --srv-3: #f4c;
- --srv-3b: rgba(255,68,204,0.6);
+ --srv-3: #fc4;
+ --srv-3b: rgba(255,204,68,0.6);
- --tree-bg: #2b2b2b;
+ --tree-bg: var(--bg-u1);
--g-play-bg: #750;
- --g-play-b1: #c90;
- --g-play-b2: #da4;
- --g-play-sh: #b83;
-
- --g-sel-fg: #fff;
- --g-sel-bg: #925;
- --g-sel-b1: #e39;
- --g-sel-sh: #b36;
- --g-fsel-bg: #d39;
- --g-fsel-b1: #f4a;
- --g-fsel-ts: #804;
- --g-dfg: var(--srv-3);
- --g-fg: var(--a-hil);
+ --g-play-b1: var(--a-dark);
+ --g-play-b2: var(--a);
+
+ --g-sel-fg: var(--fg-max);
+ --g-sel-bg: color-mix(in xyz, var(--g-sel-b1) 30%, var(--bg) 70%);
+ --g-sel-b1: var(--a-dark);
+ --g-sel-sh: hsl(from var(--a) h calc(s * 1.05) calc(l * .3));
+ --g-fsel-bg: color-mix(in xyz, var(--g-sel-b1) 70%, var(--bg-max) 30%);
+ --g-fsel-b1: var(--a);
+ --g-fsel-ts: hsl(from var(--a) h calc(s * 1.05) calc(l * .3));
+ --g-dfg: #bbb;
+ --g-fg: var(--fg);
--g-bg: var(--bg-u2);
- --g-b1: var(--bg-u4);
+ --g-b1: var(--bg-u3);
--g-b2: var(--bg-u5);
--g-g1: var(--bg-u2);
--g-g2: var(--bg-u5);
- --g-f-bg: var(--bg-u4);
+ --g-f-bg: var(--bg-u3);
--g-f-b1: var(--bg-u5);
- --g-f-fg: var(--a-hil);
- --g-sh: rgba(0,0,0,0.3);
+ --g-f-fg: var(--fg-max);
+ --g-sh: color-mix(in oklab, var(--bg-max) 30%, transparent 70%);
--f-sh1: 0.33;
--f-sh2: 0.02;
--f-sh3: 0.2;
--f-h-b1: rgba(128,128,128,0.7);
- --f-play-bg: #fc5;
- --f-play-fg: #000;
- --f-sel-sh: #fc0;
+ --f-play-bg: var(--a-dark);
+ --f-play-fg: var(--fg-max);
+ --f-sel-sh: var(--a);
--f-gray: #999;
- --fm-off: #f6c;
- --mp-sh: var(--bg-d3);
- --mp-b-bg: rgba(0,0,0,0.2);
+ --fm-off: var(--a-hil);
+ --mp-sh: #1116;
+ --mp-b-bg: color-mix(in oklab, var(--bg-max) 20%, transparent 80%);
+
+ --scrl-hint: var(--bg-u2);
--err-fg: #fff;
--err-bg: #a20;
--err-b1: #f00;
--err-ts: #500;
}
-html.y {
- color-scheme: light;
-
- --fg: #222;
- --fg-max: #000;
- --fg-weak: #555;
-
- --bg-d3: #fff;
- --bg-d2: #fff;
- --bg-d1: #fff;
- --bg: #eaeaea;
- --bg-u1: #fff;
- --bg-u2: #f7f7f7;
- --bg-u3: #eaeaea;
- --bg-u4: #fff;
- --bg-u5: #ccc;
- --bg-u6: #ddd;
- --bg-max: #fff;
-
- --tab-alt: #c07;
- --row-alt: #f2f2f2;
-
- --scroll: #490;
-
- --a: #06a;
- --a-b: #08b;
- --a-hil: #058;
- --a-gray: #bbb;
- --a-dark: #c0f;
-
- --btn-fg: #555;
- --btn-h-fg: #222;
- --btn-h-bg: #caf;
- --btn-1-fg: #fff;
- --btn-1-bg: #4a0;
- --btn-1h-bg: #5c0;
- --chk-fg: var(--fg);
- --txt-sh: #aaa;
- --txt-bg: rgba(255,255,255,0.6);
-
- --op-a-sh: #fff;
-
- --u2-txt-bg: var(--bg-max);
- --u2-tab-1-sh: #0ad;
- --u2-tab-1-b1: #09c;
- --u2-tab-1-b2: #05a;
- --u2-tab-1-fg: var(--fg-max);
- --u2-tab-1-bg: inherit;
- --ud-b1: #bbb;
-
- --sort-1: #059;
- --sort-2: #f5d;
-
- --sz-b: #777;
- --sz-k: #380;
-
- --srv-1: #555;
- --srv-2: #c83;
- --srv-3: #c0a;
-
- --tree-bg: #fff;
- --g-fg: var(--a);
- --g-bg: var(--bg-u2);
- --g-b1: var(--bg-u6);
- --g-b2: var(--bg-u6);
- --g-g1: var(--bg-u2);
- --g-g2: var(--bg-u5);
- --g-f-bg: var(--bg-u4);
- --g-f-b1: var(--bg-u5);
- --g-sh: rgba(0,0,0,0.07);
-
- --f-sh1: 0.3;
- --f-sh2: 0.5;
- --f-sh3: 0.02;
-
- --f-sel-sh: #e80;
-
- --fm-off: #c4a;
- --mp-sh: #bbb;
- --mp-b-bg: transparent;
-
- text-shadow: none;
+html.y {
+ --scrl-hint: var(--bg);
}
-html.a {
+html.b {
--op-aa-sh: 0 0 .2em var(--bg-d3) inset;
- --btn-bs: 0 0 .2em var(--bg-d3);
+ --btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a) 40%, transparent), color-mix(in oklab, var(--btn-bg-a)70%, var(--a-gray)));
+ --btn-bs: .1em .2em .1em var(--mp-sh);
}
-html.az {
- --btn-1-bs: 0 0 .1em var(--fg) inset;
+html.bz {
+ --btn-1-bs: .05em .1em .2em var(--a-dark) inset;
}
-html.ay {
- --op-aa-sh: 0 .1em .2em #ccc;
- --op-aa-bg: var(--bg-max);
+html.by {
+ --btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a)80%, var(--a)), color-mix(in oklab, var(--btn-bg-a) 50%, transparent));
}
-html.b {
+
+html.a {
--btn-bs: 0 .05em 0 var(--bg-d3) inset;
--btn-1-bs: 0 .05em 0 var(--btn-1h-bg) inset;
@@ -251,7 +154,6 @@ html.b {
--op-aa-bg: rgba(255,255,255,0.06);
- --u2-sbtn-b1: #fc0;
--u2-txt-bg: transparent;
--u2-tab-1-sh: var(--bg);
--u2-b1-bg: rgba(128,128,128,0.15);
@@ -261,60 +163,11 @@ html.b {
--mp-b-bg: transparent;
}
html.bz {
- --fg: #cce;
- --fg-weak: #bbd;
-
- --bg-u5: #3b3f58;
- --bg-u4: #1e2130;
- --bg-u3: #1e2130;
- --bg-u1: #1e2130;
- --bg: #11121d;
- --bg-d1: #232536;
- --bg-d2: #34384e;
- --bg-d3: #34384e;
-
- --row-alt: #181a27;
-
- --a-b: #fb4;
-
- --btn-bg: #202231;
- --btn-h-bg: #2d2f45;
- --btn-1-bg: #eb6;
- --btn-1-fg: #000;
- --btn-1h-fg: #000;
- --btn-1h-bg: #ff9;
- --txt-sh: a;
-
- --u2-tab-b1: var(--bg-u5);
- --u2-tab-1-fg: var(--fg-max);
- --u2-tab-1-bg: var(--bg);
-
- --srv-1: #79b;
-
- --g-sel-bg: #ba2959;
- --g-fsel-bg: #e6336e;
-
- --f-h-b1: #34384e;
- --mp-sh: #11121d;
- /*--mp-b-bg: #2c3044;*/
- --f-play-bg: var(--btn-1-bg);
+ --a: #fc5;
}
-html.by {
- --bg: #f2f2f2;
-
- --row-alt: #f9f9f9;
-
- --scroll: var(--a);
-
- --btn-1-bg: #07a;
- --btn-1h-bg: var(--a-hil);
-
- --op-aa-bg: #fff;
-
- --u2-sbtn-b1: #c70;
- --u2-tab-1-b1: #999;
- --u2-tab-1-b2: #aaa;
- --u2-b-fg: #444;
+html.ay {
+ --a: #07c;
+ --bg: var(--bg-u2);
}
html.c {
font-weight: bold;
@@ -323,7 +176,7 @@ html.c {
--fg-weak: #cef;
--bg-u5: #409;
--bg-u2: linear-gradient(-35deg, #fd7233, #cd27a0, #5d47a5 49.5%, #16e9fb 50%, #3b6cc8 50.4%, #0e51ac);
- --bg: #37235d;
+ --bg: #376ac5;
--bg-u3: #407;
--a: #f9dc22;
@@ -331,10 +184,9 @@ html.c {
--tab-alt: #6ef;
--row-alt: #47237d;
- --scroll: #ff0;
--btn-fg: #fff;
- --btn-bg: #9019bf;
+ --btn-bg-a: #9019bf;
--btn-h-bg: #a039ff;
--chk-fg: #d90;
@@ -380,7 +232,6 @@ html.cy {
--tab-alt: #f00;
--row-alt: #fff;
- --scroll: #fff;
--btn-bg: #000;
--btn-fg: #ff0;
@@ -401,14 +252,14 @@ html.cy {
--g-sel-fg: #fff;
--g-sel-bg: #aaa;
--g-fsel-bg: #aaa;
+
+ --scrl-hint: #f00;
}
html.dz {
--fg: #4d4;
--fg-weak: #2a2;
- --bg-u6: #020;
--bg-u5: #050;
- --bg-u4: #020;
--bg-u3: #020;
--bg-u2: #020;
--bg-u1: #020;
@@ -420,10 +271,7 @@ html.dz {
--tab-alt: #6f6;
--row-alt: #030;
- --scroll: #0f0;
-
--a: #9f9;
- --a-b: #cfc;
--a-hil: #cfc;
--a-dark: #afa;
--a-gray: #2a2;
@@ -454,10 +302,6 @@ html.dz {
--tree-bg: #010;
- --g-sel-b1: #c37;
- --g-sel-sh: #b36;
- --g-fsel-b1: #d48;
-
--f-h-b1: #3b3;
text-shadow: none;
@@ -475,23 +319,19 @@ html.dy {
--bg: #fff;
--bg-u1: #fff;
--bg-u2: #fff;
- --bg-u3: #fff;
- --bg-u4: #fff;
+ --bg-u3: #000;
--bg-u5: #fff;
- --bg-u6: #fff;
--bg-max: #fff;
--tab-alt: #000;
--row-alt: #eee;
- --scroll: #000;
-
--a: #000;
- --a-b: #000;
--a-hil: #000;
--a-gray: #bbb;
--a-dark: #000;
+ --btn-bg: #fff;
--btn-fg: #000;
--btn-h-fg: #000;
--btn-h-bg: #fff;
@@ -526,6 +366,7 @@ html.dy {
--tree-bg: #fff;
--g-sel-bg: #000;
+ --g-sel-fg: #fff;
--g-fsel-bg: #444;
--g-fsel-ts: #000;
--g-fg: a;
@@ -548,6 +389,32 @@ html.dy {
--mp-sh: a;
--mp-b-bg: #fff;
}
+html.dy #files tr.sel a,
+html.dy #files tr.sel a.play {
+ color: #fff;
+}
+html.dy tr.play td:nth-child(1) a {
+ background: #fff;
+ border: #000 solid 1px;
+}
+html.dy #spaceUsed_bar {
+ background: #000;
+}
+html.dy #barpos {
+ border: var(--btn-bb);
+}
+html.dy #pathBar {
+ background: var(--bg);
+}
+html.dy #spaceTotal_bar,
+html.dy select,
+html.dy input {
+ border: #000 solid 1px !important;
+}
+html.dy h3 {
+ border-top: #000 solid 1px;
+ border-radius: 0 !important;
+}
* {
line-height: 1.2em;
}
@@ -557,13 +424,24 @@ html.dy {
text-shadow: none;
}
html,body,tr,th,td,#files,a,#blogout {
- color: inherit;
+ /* color: inherit; */
background: none;
font-weight: inherit;
font-size: inherit;
padding: 0;
border: none;
}
+body {
+ background: #e4edf8;
+}
+@supports (background: var(--bg)) {
+ body {
+ background: none;
+ }
+}
+#files {
+ margin-top: .2em;
+}
html {
color: var(--fg);
background: var(--bgg);
@@ -587,7 +465,7 @@ pre, code, tt, #doc, #doc>code {
left: -10em;
color: var(--bg);
}
-html .ayjump:focus {
+html .ayjump:focus-visible {
z-index: 80386;
color: #fff;
color: var(--a-hil);
@@ -606,56 +484,119 @@ html .ayjump:focus {
#path * {
font-size: 1em;
}
+#pathBar {
+ display: flex;
+ margin: 0;
+ align-content: center;
+ position: sticky;
+ z-index: 11;
+ background: linear-gradient(to bottom, var(--bg), transparent);
+ padding: .6em .5em;
+ top: 0;
+ margin: 0 -.6em;
+}
+#wfp.shifted {
+ margin-left: 2em;
+}
#path {
color: var(--fg);
text-shadow: 1px 1px 0 var(--bg-max);
font-weight: normal;
+ display: block;
+ margin: 0 .5em 0 0;
+ width: calc(100% - .5em);
+ padding: 0 .2em;
+ font-size: 1.2em;
+ white-space: nowrap;
+ overflow-x: auto;
+ overflow-y: hidden;
+ background: var(--bg-u2);
+ border-radius: 5px;
+ border-radius: var(--radius);
+}
+#pathBar #folder_search {
+ margin: 0;
+ height: calc(100% - .5em);
+ width: calc(100% - .6em);
+ right: 0;
+}
+#qs_btns {
+ position: absolute;
+ right: .2em;
+ top: .1em;
+ font-size: 1.3em;
+ cursor: pointer;
+}
+#qs_btns a {
+ background: color-mix(in oklab, var(--txt-bg), transparent);
+ width: 1em;
display: inline-block;
- padding: .35em .5em .2em .5em;
- margin: 1.3em 0 -.2em 0;
- font-size: 1.4em;
+ text-align: center;
+ border-radius: 5px;
+ border-radius: var(--radius);
+}
+#qs_btns a:hover {
+ background: var(--bg);
}
html.y #path {
text-shadow: none;
}
+#path a.dtarget {
+ text-shadow: var(--f-sel-sh) 0 0 5px;
+ background: color-mix(in oklab, var(--a), transparent);
+}
#path #entree {
margin-left: -.7em;
}
#files {
+ overflow-x: auto;
+ display: block;
z-index: 1;
top: -.3em;
border-spacing: 0;
position: relative;
+ margin: .2em -.5em;
+ padding: 0 .5em;
}
#files tbody a {
display: block;
- padding: .5em 0;
- margin: -.3em 0;
+ padding: .5em;
scroll-margin-top: 45vh;
}
#files tr {
scroll-margin-top: 25vh;
scroll-margin-bottom: 20vh;
}
+.td_w {
+ width: 30em;
+ max-width: 30em;
+}
+.td_s {
+ width: 14em;
+ max-width: 14em;
+}
#files tbody div a {
color: var(--tab-alt);
}
a, #blogout, #files tbody div a:last-child {
- color: var(--a);
+ color: var(--fg);
padding: .2em;
text-decoration: none;
}
+#goh,
#blogout {
margin: -.2em;
+ text-shadow: 1px 1px 0px var(--bg-max);
}
-#blogout:hover,
+input[type=submit]:hover,
+#goh:hover,
a:hover {
color: var(--a-hil);
background: var(--a-h-bg);
}
#files a:hover {
color: var(--fg-max);
- background: var(--bg-d3);
+ background: color-mix(in oklab, var(--a) 20%, transparent);
text-decoration: underline;
}
#files thead th {
@@ -668,13 +609,13 @@ a:hover {
}
.s0:after,
.s1:after {
- content: '⌄';
- margin-left: -.15em;
+ content: '▾';
+ /* margin-left: -.15em; */
}
.s0r:after,
.s1r:after {
- content: '⌃';
- margin-left: -.15em;
+ content: '▴';
+ /* margin-left: -.15em; */
}
.s0:after,
.s0r:after {
@@ -689,8 +630,14 @@ a:hover {
}
#files tbody tr:hover td,
#files tbody tr:hover td+td {
- background: var(--bg-d1);
- box-shadow: 0 1px 0 var(--bg-u5) inset, 0 -1px 0 var(--bg-u5) inset;
+ background: color-mix(in oklab, var(--a) 15%, transparent);
+}
+a.dir {
+ color: var(--a);
+}
+tr.dir td:nth-child(2) a::before {
+ content: "📁";
+ margin: 0 .1em 0 -.2em;
}
#files thead th {
padding: .3em;
@@ -702,9 +649,10 @@ html.y #files thead th {
box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
html #files.hhpick thead th {
- color: #f7d;
- background: #000;
- box-shadow: .1em .2em 0 #f6c inset, -.1em -.1em 0 #f6c inset;
+ color: rgb(0, 0, 0);
+ background: #df5555;
+ text-shadow: none;
+ border: red solid 2px;
}
#files td {
margin: 0;
@@ -714,6 +662,9 @@ html #files.hhpick thead th {
word-wrap: break-word;
overflow: hidden;
}
+#files td:has(a) {
+ padding: 0;
+}
#files tr.fade a {
color: #999;
color: rgba(255, 255, 255, 0.4);
@@ -733,11 +684,11 @@ html.y #files tr.fade a {
box-shadow: 1px 0 0 0 rgba(128,128,128,var(--f-sh1)) inset, 0 1px 0 rgba(0,0,0,var(--f-sh3)) inset, 0 -1px 0 rgba(0,0,0,var(--f-sh3)) inset;
}
#files td:first-child {
- border-radius: .25em 0 0 .25em;
+ border-radius: var(--radius) 0 0 var(--radius);
white-space: nowrap;
}
#files td:last-child {
- border-radius: 0 .25em .25em 0;
+ border-radius: 0 var(--radius) var(--radius) 0;
}
#files tbody td:nth-child(3) {
font-family: 'scp', monospace, monospace;
@@ -768,36 +719,44 @@ html.y #files span.fsz_P { font-weight: bold }
#files .srch_hdr a {
display: inline;
}
+#files tr.dtarget {
+ box-shadow: 0 0 5px 0 var(--f-sel-sh) inset;
+ background: color-mix(in oklab, var(--a), transparent);
+}
+#files tr.dtarget td {
+ background: none;
+}
#path a {
- padding: 0 .35em;
+ padding: .4em .35em;
position: relative;
+ display: inline-block;
+ height: 100%;
z-index: 1;
/* ie: */
border-bottom: .1em solid #777\9;
margin-right: 1em\9;
}
-#path a:first-child {
- padding-left: .8em;
-}
#path i {
- width: 1.05em;
- height: 1.05em;
- margin: -.5em .15em -.15em -.7em;
+ width: 2em;
+ height: 2.5em;
+ margin: -1em .3em -1em -1.7em;
display: inline-block;
- border: 1px solid rgba(255,224,192,0.3);
- border-width: .05em .05em 0 0;
- transform: rotate(45deg);
- background: linear-gradient(45deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.35));
+ transform: skew(-25deg);
+ border-right: #222 solid 2px;
+ border-right: var(--bg) solid 2px;
+ background: linear-gradient(70deg, transparent 40%, color-mix(in oklab, var(--bg-max) 25%, transparent) 75%, color-mix(in oklab, var(--bg-max) 35%, transparent));
}
-html.y #path i {
- background: none;
- border-color: rgba(0,0,0,0.2);
- border-width: .1em .1em 0 0;
+html.b #path i {
+ border-right: var(--bg) solid 1px;
}
#path a:hover {
color: var(--fg-max);
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
}
+html.a #ggrid>a.dir:before,
+html.a #path i {
+ background: none;
+}
html.y #path a:hover {
background: none;
}
@@ -811,23 +770,28 @@ html.y #path a:hover {
display: none;
}
.logue.raw {
+ background: #ccc;
+ background: var(--transparent);
white-space: pre;
font-family: 'scp', 'consolas', monospace;
font-family: var(--font-mono), 'scp', 'consolas', monospace;
}
+.iframe {
+ background: none;
+}
#doc>iframe,
.logue>iframe {
background: var(--bgg);
border: 1px solid var(--bgg);
border-width: 0 .3em 0 .3em;
- border-radius: .5em;
+ border-radius: var(--radius);
visibility: hidden;
- margin: 0 -.3em;
- width: 100%;
+ margin: 0 .3em;
+ width: calc(100% - 1em);
height: 0;
}
-#doc>iframe.focus,
-.logue>iframe.focus {
+#doc>iframe.focus-visible,
+.logue>iframe.-visible {
box-shadow: 0 0 .1em .1em var(--a);
}
#pro.logue>iframe {
@@ -852,14 +816,7 @@ html.y #path a:hover {
.mdo>h1:first-child,
.mdo>h2:first-child,
.mdo>h3:first-child {
- margin-top: 1.5rem;
-}
-.mdo {
- max-width: 52em;
-}
-.mdo.sb,
-.logue.mdo>iframe {
- max-width: 54em;
+ margin-top: 0.5rem;
}
.mdo,
.mdo * {
@@ -874,14 +831,15 @@ html.y #path a:hover {
}
#srv_info,
#acc_info {
- position: absolute;
+ position: relative;
font-size: .8em;
- top: .5em;
+ bottom: 18.5em;
}
#srv_info {
left: 2em;
padding-right: .5em;
}
+#accessType,
#acc_info,
#srv_info span,
#srv_info2 span {
@@ -891,18 +849,18 @@ html.y #path a:hover {
padding: 0;
}
#srv_info2 {
- display: none;
+ display: block;
}
#acc_info {
- right: 2em;
+ left: 2em;
}
#acc_info > span:not([id]) {
color: var(--srv-1);
- margin-right: .6em;
+ margin-left: .6em;
}
#acc_info span.warn {
color: var(--srv-3);
- border-bottom: 1px solid var(--srv-3b);
+ border-top: 1px solid var(--srv-3b);
}
#flogout {
display: inline;
@@ -917,23 +875,37 @@ html.dz #flogout {
border-left: .2em solid var(--bg-u5);
}
#repl {
+ opacity: .3;
padding: .33em;
}
+#repl:hover{
+ opacity: 1;
+}
#files a.doc {
color: var(--a-gray);
}
#files a.doc.bri {
color: var(--tab-alt);
}
-#files a.play {
+tr td:nth-child(1) a {
+ border-radius: var(--radius);
+}
+/* #files a.play {
color: var(--a-dark);
padding: .3em;
margin: -.3em;
+} */
+tr.play td:nth-child(2) a::before {
+ content: "▶";
+}
+tr.play td:nth-child(1) a {
+ background: var(--btn-1-bg);
+ color:var(--btn-1-fg);
+ text-shadow: none;
}
-#files tbody tr.play td,
+/* #files tbody tr.play td,
#files tbody tr.play td+td,
#files tbody tr.play div a {
- background: #fc0;
background: var(--f-play-bg);
color: var(--f-play-fg);
text-shadow: none;
@@ -946,7 +918,7 @@ html.dz #flogout {
background: var(--btn-1h-bg);
box-shadow: var(--btn-1h-bs);
border-bottom: var(--btn-1h-bb);
-}
+} */
#ggrid {
margin: -.2em -.5em;
}
@@ -965,7 +937,8 @@ html.dz #flogout {
width: var(--grid-sz);
vertical-align: top;
overflow-wrap: break-word;
- border-radius: .3em;
+ border-radius: 5px;
+ border-radius: var(--radius);
padding: .3em;
margin: .5em;
color: var(--g-fg);
@@ -974,47 +947,153 @@ html.dz #flogout {
border-top: 1px solid var(--g-b2);
box-shadow: 0 .1em .3em var(--g-sh);
}
-#ggrid>a:focus,
+#ggrid>a:focus-visible,
#ggrid>a:hover {
color: var(--g-f-fg);
background: var(--g-f-bg);
border-color: var(--g-f-b1);
box-shadow: 0 .1em .3em var(--g-sh);
+ .gselchk {
+ display: block;
+ }
+}
+#ggrid>a.play .thumb,
+#ggrid>a.play img {
+ background: var(--bg-u2);
}
+#ggrid>a .thumb,
#ggrid>a img {
- border-radius: .2em;
+ z-index: 1;
+ border-radius: 5px;
+ border-radius: var(--radius);
max-width: 10em;
- max-width: var(--grid-sz);
- max-height: 8em;
- max-height: calc(var(--grid-sz)/1.25);
+ max-width: calc(var(--grid-sz) - 4px);
margin: 0 auto;
display: block;
+ width: 100%;
+ height: calc(var(--grid-sz) - 2.5em);
+ object-fit: cover;
+}
+#ggrid>a img {
+ position: absolute;
+ opacity: 0;
+}
+#ggrid>a.dir .thumb,
+#ggrid>a.dir img {
+ max-width: calc(var(--grid-sz) - 20px);
+ margin: 10px auto 0 auto;
+}
+#ggrid.noupscale>a img {
+ width: auto;
+ height: auto;
+}
+#ggrid.noupscale.gallery.nocrop>a img {
+ object-fit: scale-down;
}
#ggrid.nocrop>a img {
max-height: 20em;
max-height: calc(var(--grid-sz)*2);
+ object-fit: contain;
+ height: 100%;
+}
+
+.imgcontainer {
+ display: flex;
+ overflow: hidden;
+ position: relative;
+ border-radius: 5px;
+ border-radius: var(--radius);
+ box-sizing: border-box;
+ margin: -3px -2px;
+ padding: 4px 3px;
+ justify-content: center;
+}
+.th_ext {
+ z-index: 2;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+ width: calc(100% - 8px);;
+ top: 50%;
+ top: calc(55% - .5em);
+ color: var(--a);
+ text-shadow: none;
+ font-family: monospace;
+ font-family: var(--font-mono);
+}
+#ggrid>a.thumbed .thumb,
+#ggrid>a.thumbed .th_ext,
+.thumbed .thumb,
+.thumbed .th_ext {
+ display: none !important;
+}
+#ggrid > a.thumbed img,
+.thumbed img,
+.thumbed #mu_th img {
+ position: static;
+ opacity: 1;
+}
+.sel .gselchk {
+ display: block;
+}
+.srch_hdr .gselchk {
+ display: none !important;
+}
+.gselchk {
+ position: absolute;
+ display: none;
+ top: .3em;
+ right: .3em;
+ z-index: 4;
+ font-size: 1.15em;
+ width: 1em;
+ height: 1em;
+ opacity: .69;
+}
+
+@keyframes rotate {
+ 100% {
+ transform: rotate(1turn);
+ }
}
-#ggrid>a.dir:before {
+
+.play .imgcontainer::before {
+ content: '';
+ box-sizing: border-box;
+ position: absolute;
+ left: -50%;
+ top: -50%;
+ width: 200%;
+ height: 200%;
+ background-repeat: no-repeat;
+ background-size: 50% 50%, 50% 50%;
+ background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+ background-image: linear-gradient(var(--a-hil), var(--a-hil)), linear-gradient(transparent, transparent), linear-gradient(var(--a-hil), var(--a-hil)), linear-gradient(transparent, transparent);
+ animation: rotate 10s linear infinite;
+}
+html:not(.e) #ggrid>a.thumbed.dir:before {
content: '📂';
}
#ggrid>a.dir>span {
- color: var(--g-dfg);
+ color: var(--g-fg);
}
#ggrid>a.au:before {
content: '▶';
}
#ggrid>a:before {
+ z-index: 4;
display: block;
position: absolute;
padding: .3em 0;
margin: -.4em;
text-shadow: 0 0 .1em var(--bg-max);
background: linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2));
- border-radius: .3em;
+ border-radius: 5px;
+ border-radius: var(--radius);
font-size: 2em;
transition: font-size .15s, margin .15s;
}
-#ggrid>a:focus:before,
+#ggrid>a:focus-visible:before,
#ggrid>a:hover:before {
font-size: 2.5em;
margin: -.2em;
@@ -1022,25 +1101,22 @@ html.dz #flogout {
#ggrid>a[tt] {
background: linear-gradient(135deg, var(--g-g1) 95%, var(--g-g2) 95%);
}
-#ggrid>a[tt]:focus,
+#ggrid>a[tt]:focus-visible,
#ggrid>a[tt]:hover {
background: var(--g-f-bg);
}
#ggrid>a.play,
#ggrid>a[tt].play {
color: var(--g-sel-fg);
- background: #fc0;
- background: var(--g-play-bg);
border-color: var(--g-play-b1);
border-top: 1px solid var(--g-play-b2);
- box-shadow: 0 .1em 1.2em var(--g-play-sh);
}
#files tbody tr.sel td,
#files tbody tr.sel span,
#ggrid>a.sel,
#ggrid>a[tt].sel {
color: var(--g-sel-fg);
- background: #f3c;
+ background: #8af;
background: var(--g-sel-bg);
border-color: var(--g-sel-b1);
}
@@ -1054,49 +1130,45 @@ html.dz #flogout {
transition: all 0.2s cubic-bezier(.2, 2.2, .5, 1); /* https://cubic-bezier.com/#.4,2,.7,1 */
}
#files tbody tr.sel:hover td,
-#files tbody tr.sel:focus td,
+#files tbody tr.sel:focus-visible td,
#ggrid>a.sel:hover,
-#ggrid>a.sel:focus {
+#ggrid>a.sel:focus-visible {
color: var(--g-sel-fg);
background: var(--g-fsel-bg);
border-color: var(--g-fsel-b1);
text-shadow: 1px 1px 0 var(--g-fsel-ts);
}
-#ggrid>a.sel img,
-#ggrid>a.play img {
- opacity: .7;
- filter: contrast(130%) brightness(107%);
-}
#ggrid>a.sel img {
box-shadow: 0 0 1em var(--g-sel-sh);
}
-#ggrid>a.play img {
- box-shadow: 0 0 1em var(--g-play-sh);
-}
#ggrid a {
scroll-margin-top: 25vh;
scroll-margin-bottom: 20vh;
}
+#ggrid a.dtarget {
+ box-shadow: 0 0 5px 0 var(--f-sel-sh);
+ background: color-mix(in oklab, var(--a), transparent);
+}
#files tr.sel a,
#files tr.sel a.play {
- color: var(--fg2-max);
+ color: var(--fg-max);
}
#files tr.sel a:hover {
color: var(--fg-max);
text-shadow: none;
}
#files tr.sel a.play.act {
- text-shadow: 0 0 1px var(--fg2-max);
+ text-shadow: 0 0 1px var(--fg-max);
}
-#files tr:focus {
+#files tr:focus-visible {
outline: none;
position: relative;
}
-#files tr:focus td+td {
+#files tr:focus-visible td+td {
background: var(--bg-d3);
box-shadow: 0 .2em 0 var(--f-sel-sh), 0 -.2em 0 var(--f-sel-sh);
}
-#files tr:focus:not(.play):not(.sel) td:first-child {
+#files tr:focus-visible:not(.play):not(.sel) td:first-child {
background: var(--bg-d3);
box-shadow: -.2em .2em 0 var(--f-sel-sh), -.2em -.2em 0 var(--f-sel-sh);
}
@@ -1108,43 +1180,65 @@ html.dz #flogout {
font-size: 1.4em;
left: 0;
right: 0;
- bottom: -6em;
- height: 6em;
- width: 100%;
- z-index: 3;
+ bottom: 0;
+ z-index: 11;
touch-action: none;
+ box-shadow: 0 0 .5em var(--mp-sh);
}
#widget.anim {
- transition: bottom 0.15s;
+ transition: margin-left 0; /* can't set this above 0 due to onwidgetresize */
}
-#widget.open {
- box-shadow: 0 0 1em rgba(0,48,64,0.2);
- bottom: 0;
+#widget.anim #widgeti {
+ transition: height 0.15s;
}
-html.y #widget.open {
- border-top: .2em solid var(--bg-u2);
+#widget.open #widgeti{
+ /* box-shadow: 0 0 1em rgba(0,48,64,0.2); */
+ display: block;
}
-#widgeti {
- position: relative;
- z-index: 10;
- width: 100%;
- height: 100%;
+
+#pbarthinpos {
+ display: none;
+ align-content: center;
+ padding: .2em .5em;
+ padding-bottom: 0;
+ height: 2em;
}
-#fshr,
-#wtgrid,
-#wtico {
+#widget.thin #pctl{
+ display: flex;
+}
+#widget.thin #pbarthinpos{
+ display: block;
+}
+#widget.thin #trackname {
+ margin-right: auto;
+ width: stretch;
+ width: -moz-available;
+}
+
+#np_inf {
+ height: 0;
+}
+#fshr {
position: relative;
font-size: .9em;
top: -.04em;
+ margin-right: .3em;
}
#wtgrid {
- font-size: .75em;
+ padding: 0;
+}
+.btn.svgIcon {
+ width: 1.5em;
+ height: 1.5em;
padding: .1em;
- top: -.12em;
}
-#wtico {
- cursor: pointer;
+.btn.svgIcon.gb_grd,
+.btn.svgIcon.gb_glr {
+ width: 1.7em;
+ height: 1.7em;
+ padding: 0;
}
+
@keyframes spin {
100% {transform: rotate(360deg)}
}
@@ -1152,43 +1246,161 @@ html.y #widget.open {
0% {opacity: 0}
100% {opacity: 1}
}
-#wtoggle {
- position: absolute;
- white-space: nowrap;
- top: -1em;
- right: 0;
- height: 1em;
- font-size: 2em;
- line-height: 1em;
- text-align: center;
- text-shadow: none;
- box-shadow: 0 0 .5em var(--mp-sh);
- border-radius: .3em 0 0 0;
- padding: 0 0 0 .1em;
- color: var(--fg-max);
-}
+#wtico,
+.open #up_quick_more,
#wtoggle,
#widgeti {
- background: #fff;
- background: var(--bg-u3);
+ background: #cde;
+ background: var(--bg-u2);
+ border: 1px solid #222;
+ border: 1px solid var(--bg-u3);
+}
+#widgeti {
+ position: relative;
+ display: none;
+ border-width: 1px 0 0 0;
+}
+#wtico {
+ display: inline-block;
+ cursor: pointer;
+ line-height: 1.2em;
+ vertical-align: bottom;
+ padding: .05em .5em .1em .3em;
+ border-radius: var(--radius) 0 0 0;
+ pointer-events: all;
+ border-width: 1px 0 0 1px;
+}
+#wstack {
+ display: block;
+ position: absolute;
+ text-wrap-mode: nowrap;
+ text-wrap: nowrap;
+ width: 100%;
+ bottom: 100%;
+ right: 0;
+ font-size: 2em;
+ text-align: right;
+ color: var(--fg-max);
+ pointer-events: none;
+}
+#wstack div {
+ pointer-events: all;
+ vertical-align: bottom;
+}
+#wtoggle {
+ display: inline-block;
+ text-wrap-mode: nowrap;
+ text-wrap: nowrap;
+ text-align: center;
+ max-width: calc(100% - 3.5em);
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin: 0 .1em .1em .2em;
+ box-shadow: 0 0 .5em var(--mp-sh);
+ border-radius: var(--radius);
+}
+#up_quick {
+ display: inline-block;
+ position: relative;
+ margin: 0 .2em .2em .1em;
+ font-size: .7em;
+ border-radius: 10px;
+ border-radius: var(--radius);
+ background: #cde;
+ background: var(--bg-u2);
+}
+#up_quick_more {
+ position: absolute;
+ bottom: 100%;
+ right: -2px;
+ font-weight: bold;
+ box-shadow: 0 0 .5em color-mix(in oklab, var(--a) 20%, transparent);
+ border-radius: 10px;
+ border-radius: var(--radius);
+ text-align: right;
+}
+.open #up_quick_more {
+ box-shadow: 0 0 .5em color-mix(in oklab, var(--mp-sh) 20%, transparent);
+}
+#up_quick_more {
+ display: none;
+ min-width: 4em;
+ font-weight: normal;
+ margin-bottom: .2em;
+ text-wrap-mode: wrap;
+ text-wrap: nowrap;
+}
+#up_quick_more.vis {
+ display: block;
+}
+#up_quick_more a:hover {
+ background: var(--btn-h-bg);
+}
+#up_quick_more a {
+ position: static;
+ font-size: large;
+ display: block;
+ text-wrap-mode: nowrap;
+ text-wrap: nowrap;
+ padding: .5em;
+ cursor: pointer;
+ border-radius: 10px;
+ border-radius: var(--radius);
+}
+#up_quick .overlay_plus {
+ right: .3em;
+ margin-top: -1.5em;
+}
+#up_quick .btn{
+ transition: all .25s;
+ margin: -1px;
+ border: none;
+ 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);
+}
+html:not(.e):not(.d) #up_quick .btn.on {
+ /* transform: rotate(-90deg); */
+ box-shadow: -.05em .02em .3em color-mix(in oklab, var(--a) 20%, transparent);
+}
+#up_quick .btn .rotatable {
+ transition: all .20s;
+ transform: rotate(-45deg);
+
+ background: none;
+
+ font-size: 1.2em;
+ line-height: .9em;
+}
+#up_quick .btn.on .rotatable {
+ transform: none;
}
#wfs, #wfm, #wzip, #wnp, #wm3u {
display: none;
}
#wfs, #wzip, #wnp, #wm3u {
- margin-right: .2em;
+ margin-left: .2em;
padding-right: .2em;
- border: 1px solid var(--bg-u5);
- border-width: 0 .1em 0 0;
+ border: 0 solid var(--bg-u5);
}
#wzip1 {
- margin-right: .2em;
+ margin-right: 0em;
+}
+#wzip {
+ margin-left: 0 !important;
+ padding-left: 0 !important;
+ margin-right: 0 !important;
+ padding-right: 0 !important;
}
#wfm.act+#wzip1+#wzip,
#wfm.act+#wzip1+#wzip+#wnp {
margin-left: .2em;
padding-left: .2em;
- border-left-width: .1em;
+ border-left-width: 2px;
}
#wfs.act,
#wfm.act {
@@ -1197,6 +1409,7 @@ html.y #widget.open {
#wtoggle,
#wtoggle * {
line-height: 1em;
+ vertical-align: middle;
}
#wtoggle.sel #wzip,
#wtoggle.m3u #wm3u,
@@ -1207,19 +1420,17 @@ html.y #widget.open {
#wtoggle.sel.np #wnp {
display: none;
}
-#wfm a,
-#wnp a,
-#wm3u a,
-#zip1,
-#wzip a {
+#wtoggle a {
font-size: .5em;
- padding: 0 .3em;
+ padding: .7em .5em;
margin: -.3em .1em;
- position: relative;
display: inline-block;
}
-#zip1 {
- font-size: .38em;
+#wtoggle #zip1 {
+ padding: .5em;
+ margin: -.1em .1em;
+ vertical-align: top;
+ white-space: nowrap;
}
#wm3u a {
margin: -.2em .1em;
@@ -1230,18 +1441,36 @@ html.y #widget.open {
text-align: right;
line-height: 1.3em;
padding: 0 .3em 0 0;
- border-width: 0 .25em 0 0;
+ border-width: 0 2px 0 0;
}
#wfm span,
#wm3u span,
#zip1 span,
#wnp span {
- font-size: .6em;
+ font-size: .7em;
display: block;
}
-#zip1 span {
- font-size: .9em;
+
+.unfun #wfm span,
+.unfun #wm3u span,
+.unfun #zip1 span,
+.unfun #wnp span {
+ font-size: 1em;
+}
+
+.unfun #wtoggle a {
+ font-size: .45em;
+}
+
+.unfun #up_quick_more a:after {
+ content: "+"
+}
+
+.unfun #up_quick_more a span,
+.unfun #favico_onpage {
+ display: none;
}
+
#wnp span {
font-size: .7em;
}
@@ -1275,79 +1504,125 @@ html.y #widget.open {
font-size: .4em;
margin: -.3em .1em;
}
-#wtoggle.sel .l1 {
- top: -.6em;
- padding: .4em .3em;
+#trackname {
+ font-size: small;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-left: .3em;
+ padding: 1.2em 0;
+ min-height: 1em;
+}
+#progbar {
+ display: none;
+ margin: 0 .3em;
+ font-size: 20px;
+}
+#progbar.vis {
+ display: block;
+}
+#altprogbar {
+ display: none;
+ grid-template-columns: max-content auto max-content;
+ text-align: center;
+}
+#altprogbar.vis {
+ display: grid;
+}
+#altprogbar span {
+ font-size: 16px;
+ font-family: monospace;
+ font-family: var(--font-mono);
+ color: var(--fg-weak);
+ margin: .3em;
+ align-self: center;
+}
+#sliderpos {
+ width: 100%;
}
#barpos,
#barbuf {
+ border-radius: var(--radius);
position: absolute;
- bottom: 1em;
- left: 1em;
- height: 2em;
- border-radius: 9em;
- width: calc(100% - 2em);
+ top: 0;
+ height: 100%;
+ width: 100%;
}
#barbuf {
background: var(--mp-b-bg);
- z-index: 21;
}
#barpos {
box-shadow: -.03em -.03em .7em rgba(0,0,0,0.5) inset;
- z-index: 22;
+ border: var(--a-dark) solid 1px;
}
#pctl {
- position: absolute;
- top: .5em;
- left: 1em;
+ display: flex;
+ display: grid;
+ grid-template-columns: max-content max-content max-content 20% auto max-content max-content max-content;
+ align-items: center;
+ margin-right: .4em;
+ margin-left: .1em;
+ padding: .1em;
}
-#pctl a {
- display: inline-block;
- font-size: 1.25em;
- width: 1.3em;
- height: 1.2em;
- text-align: center;
- border-radius: .3em;
+.pctl .icon {
+ width: 1.5em;
+ height: 1.5em;
+}
+.pctl .icon.btn {
+ padding: .2em;
+ margin: .1em;
+}
+#favico_onpage svg {
+ margin: -1px 7px 0 0;
+ vertical-align: top;
+ height: 1.5em;
+}
+.pctl svg {
+ width: 1.5em;
+ height: 1.5em;
+}
+.pctl .btn {
+ font-size: 1em;
+ padding: 0;
+ opacity: .4;
+ cursor: pointer;
+}
+.pctl .btn.on {
+ opacity: 1;
}
#pvol {
- position: absolute;
- top: .7em;
- right: 1em;
- height: 1.6em;
border-radius: 9em;
- max-width: 12em;
- width: calc(100% - 10.5em);
+ max-width: 9em;
+ height: .5em;
+ aspect-ratio: 8;
background: rgba(0,0,0,0.2);
+ border: 1px solid var(--bg-u1);
+ margin-left: .3em;
+ transition: opacity .15s;
}
-#widget.cmp {
- height: 1.6em;
- bottom: -1.6em;
+#pvolbg {
+ height: 1.3em;
+ padding: .3em;
+ cursor: pointer;
+ align-items: center;
+ display: flex;
}
-#widget.cmp.open {
- bottom: 0;
+#pvolbg svg {
+ height: 1.3em;
}
-#widget.cmp #wtoggle {
- font-size: 1.2em;
+#widget.cmp #wstack {
+ font-size: 1.4em;
}
-#widget.cmp #fshr,
-#widget.cmp #wtgrid {
+#widget.cmp #fshr {
display: none;
}
-#widget.cmp #pctl {
- top: 0;
- left: 0;
- font-size: .75em;
-}
-#widget.cmp #pctl a {
- margin: 0;
+#widget.cmp #widgeti {
+ font-size: .7em;
}
#widget.cmp #barpos,
#widget.cmp #barbuf {
- height: 1.6em;
- width: calc(100% - 11em);
border-radius: 0;
- left: 5em;
- top: 0;
}
#widget.cmp #pvol {
top: 0;
@@ -1355,27 +1630,136 @@ html.y #widget.open {
max-width: 5.8em;
border-radius: 0;
}
+
+#music {
+ margin: 0;
+ border-radius: 0;
+ border: none;
+ background: #ccc;
+ background: var(--bg-u2);
+}
+#music a {
+ cursor: pointer;
+}
+html.f #mu_outer,
+html.b #mu_outer {
+ background: color-mix(in oklab, var(--bg-u2) 70%, transparent);
+ backdrop-filter: blur(32px);
+}
+#h_music {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+#mu_outer {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+#mu_inner {
+ align-content: center;
+ text-align: center;
+ position: relative;
+ width: 100%;
+}
+#mu_th {
+ cursor: default !important;
+ display: flex;
+ position: relative;
+ height: 35vh;
+}
+#mu_th svg {
+ margin: 0 auto;
+}
+#mu_th span {
+ font-size: 8vh;
+}
+#mu_th img {
+ opacity: 0;
+ margin: 0 auto;
+ position: absolute;
+ max-width: 100%;
+ object-fit: scale-down;
+}
+#mu_tn {
+ display: block;
+ margin-top: .5em;
+ min-height: 2em;
+ font-size: 1.3em;
+}
+#mu_pbc {
+ font-size: 1.6em;
+}
+#mu_pbb {
+ height: 3em;
+ margin: .5em auto;
+ width: 80vw;
+ display: block;
+ position: relative;
+ align-content: center;
+ text-align: left;
+}
+#mu_vol {
+ position: absolute;
+ right: 1em;
+ bottom: 1em;
+ font-size: 1.2em;
+}
+
+
.opview {
display: none;
+ margin-bottom: 1em;
}
+.opview.splitsub {
+ margin-bottom: 0;
+}
+#acc_cbopen:checked+span,
.opview.act {
display: block;
}
+#op_search.opview.act {
+ display: none;
+}
+#op_search.opview.act.vis {
+ display: block;
+}
+#ops input[type=submit],
#ops a {
+ /* fallback if emojis don't render */
+ border: #777 solid 1px;
+ border-radius: 5px;
+
+ border: var(--transparent) solid 0px;
+ color: #07c;
color: var(--a);
- text-shadow: 1px 1px 1px var(--op-a-sh);
font-size: 1.5em;
- padding: .25em .4em;
+ padding: .15em .4em;
margin: 0;
}
+.unfun #ops a {
+ font-size: 1.2em;
+}
+.unfun #srchfolder_div {
+ left: 5.2em;
+}
+#opa_mkd {
+ display: none;
+}
+#ops a.vis {
+ display: block;
+}
#ops a.act {
color: #fff;
color: var(--op-aa-fg);
- background: #000;
+ background: rgb(85, 144, 255);
background: var(--op-aa-bg);
- border-radius: 0 0 .2em .2em;
- border-bottom: .3em solid var(--a-b);
+ border-radius: 0 0 5px 5px;
+ border-radius: 0 0 var(--radius) var(--radius);
+ border-bottom: .3em solid var(--a);
box-shadow: var(--op-aa-sh);
+ margin: -1px 0 -.35em 0;
+ padding-top: .2em;
}
#ops a svg {
width: 1.75em;
@@ -1385,43 +1769,110 @@ html.y #widget.open {
html.y #ops svg circle {
stroke: black;
}
+#srv_name {
+ padding-top: .5em;
+ padding-bottom: .3em;
+ margin-left: 2.2em;
+ font-size: x-large;
+ text-wrap-mode: nowrap;
+ text-wrap: nowrap;
+ display: block;
+ line-height: 1.5em;
+}
+#favico_onpage {
+ display: none;
+}
+@supports (text-wrap: nowrap) {
+ #favico_onpage {
+ display: inline-block;
+ }
+}
+#treeToggleBtn{
+ z-index: 30;
+ position: fixed;
+ top: 0;
+ left: 0;
+ margin: .5em;
+ padding: 0;
+ width: 2em;
+ height: 2em;
+ vertical-align: bottom;
+}
#ops {
- padding: .3em .6em;
+ padding: 0 .5em;
white-space: nowrap;
+ display: flex;
+ height: 2.5em;
+ border-radius: 5px;
+ border-radius: var(--radius);
+ background: var(--bg-u2);
}
#noie {
color: #b60;
margin: 0 0 0 .5em;
}
+.pfp {
+ /* aspect-ratio: 1 / 1; */
+ min-width: 1.25em;
+
+ background: #ccc;
+ color: #000;
+
+ background: var(--btn-1-bg);
+ box-shadow: var(--btn-1-bs);
+ color: var(--bg);
+
+ border: var(--btn-bg-a) solid 1px;
+ border-radius: var(--radius);
+ justify-content: center;
+ display: flex;
+ text-shadow: none;
+}
+.pfp.placeholder {
+ text-shadow: 1px 1px 0 var(--bg-half), 1px -1px 0 var(--bg-half), -1px -1px 0 var(--bg-half), -1px 1px 0 var(--bg-half);
+}
+#op_acc:not(.act) {
+ display: none;
+}
.opbox {
padding: .5em;
- border-radius: 0 .3em .3em 0;
- border-width: 1px 1px 1px 0;
+ border-radius: 5px;
+ border-radius: var(--radius);
+ border-width: 1px;
max-width: 41em;
- max-width: min(41em, calc(100% - 2.6em));
}
.opbox input {
position: relative;
- margin: .5em;
+ margin: .2em;
}
-#op_cfg input[type=text] {
- top: -.3em;
+#op_bup {
+ margin: 0;
+ border-radius: 0 0 var(--radius) var(--radius);
}
+#op_cfg {
+ display: none;
+}
+#pathBar input[type=text],
.opview select,
-.opview input[type=text] {
+.opview input[type=text],
+.opview input[type=color],
+.opview input[type=date] {
color: var(--fg);
background: var(--txt-bg);
border: none;
box-shadow: 0 0 2px var(--txt-sh);
border-bottom: 1px solid #999;
border-color: var(--a);
- border-radius: .2em;
+ border-radius: 5px;
+ border-radius: var(--radius);
padding: .2em .3em;
+ font-size: medium;
+ min-width: 3em;
+ margin: .3em;
+ font-family: var(--font-main);
}
-.opview select {
- padding: .3em;
- margin: .2em .4em;
- background: var(--bg-u3);
+input[type=color] {
+ vertical-align: bottom;
}
.opview input.err {
color: var(--err-fg);
@@ -1436,7 +1887,7 @@ input[type="checkbox"]+label {
}
input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
- color: #0e0;
+ color: rgb(9, 185, 9);
color: var(--btn-1-bg);
}
input[type="checkbox"]:checked+label {
@@ -1453,10 +1904,20 @@ html.dz input {
cursor: pointer;
}
.opview input.i {
- width: calc(100% - 16.2em);
+ width: calc(100% - 12em);
+}
+input.eq_gain[type=range]{
+ writing-mode: vertical-lr;
+ direction: rtl;
+ color: var(--a);
+}
+input.eq_gain[type=text]{
+ width: 2em;
+ min-width: 0;
+ margin: 0 .15em .5em .15em;
+ text-align: center;
}
input.drc_v,
-input.eq_gain,
input.ssconf_v {
width: 3em;
text-align: center;
@@ -1477,13 +1938,6 @@ input.ssconf_v {
padding: 0;
}
#au_ss,
-#au_drc,
-#au_eq {
- display: block;
- margin-top: .5em;
- padding: 1.3em .3em;
-}
-#au_ss,
#au_drc {
padding: .4em .3em;
}
@@ -1492,9 +1946,6 @@ input.ssconf_v {
height: 1em;
overflow: hidden;
}
-#ico1 {
- cursor: pointer;
-}
@@ -1521,9 +1972,9 @@ input.ssconf_v {
}
#srch_q {
white-space: pre;
- color: var(--a-b);
+ color: var(--a);
min-height: 1em;
- margin: .2em 0 -1em 1.6em;
+ margin-top: .2em;
}
#srch_q.err {
color: var(--srv-3);
@@ -1541,10 +1992,25 @@ input.ssconf_v {
width: 100%;
display: block;
}
-#files td div span {
- color: var(--fg-max);
- padding: 0 .4em;
- font-weight: bold;
+
+#wfp{
+ margin: 0 .3em 0 0;
+ white-space: nowrap;
+ display: flex;
+}
+#wfp .btn {
+ min-width: 1.3em;
+ width: 1.3em;
+ height: 1.3em;
+ font-size: 1em;
+ padding: .15em;
+ margin: 0 .1em 0 0;
+}
+
+#files td div span {
+ color: var(--fg-max);
+ padding: 0 .4em;
+ font-weight: bold;
font-style: italic;
}
#files td div a:hover {
@@ -1562,40 +2028,56 @@ input.ssconf_v {
border-collapse: collapse;
width: 100%;
}
+
#wrap {
- margin: 1.8em 1.5em 0 1.5em;
- min-height: 70vh;
- padding-bottom: 7em;
+ padding: 0 .6em 10em .6em;
+ min-height: calc(100vh - 10em);
}
#tree {
display: none;
- position: absolute;
+ position: fixed;
+ top: 0;
left: 0;
bottom: 0;
- top: 7em;
overflow-x: hidden;
overflow-y: auto;
-ms-scroll-chaining: none;
overscroll-behavior-y: none;
- box-shadow: 0 0 1em var(--bg-d2), 0 -1px 0 rgba(128,128,128,0.3);
+ box-shadow: 0 0 1em var(--mp-sh), 0 -1px 0 rgba(128,128,128,0.3);
+ border: 1px solid var(--bg-u3);
+ transition: width .05s;
+ z-index: 20;
+ padding-bottom: 3em;
+ border-width: 0 1px 0 0;
}
+#files,
+#wtoggle,
+#ghead,
#tree,
+.splitsub,
+.modalsplit,
html {
- scrollbar-color: var(--scroll) var(--bg-u3);
+ scrollbar-color: var(--a) var(--bg-u3);
}
-#treeh {
+#treesuperh {
position: sticky;
- z-index: 1;
top: 0;
- height: 2.2em;
- line-height: 2.2em;
+ z-index: 1;
background: var(--tree-bg);
+}
+#treeh {
+ line-height: 2.2em;
border-bottom: 1px solid var(--bg-d3);
- overflow: hidden;
+ display: block;
+ padding: .3em .5em;
+ text-wrap-mode: nowrap;
+ text-wrap: nowrap;
+ overflow-x: auto;
+ overflow-y: hidden;
}
#treepar {
- z-index: 1;
position: fixed;
+ z-index: 1;
background: #fff;
background: var(--tree-bg);
left: -.96em;
@@ -1607,8 +2089,8 @@ html {
#treepar.off {
display: none;
}
-.np_open #thx_ff {
- padding: 4.5em 0;
+#thx_ff {
+ padding: 1em 0;
/* widget */
}
#tree::-webkit-scrollbar-track,
@@ -1616,10 +2098,7 @@ html {
background: var(--bg-u3);
}
#tree::-webkit-scrollbar-thumb {
- background: var(--scroll);
-}
-#tree:hover {
- z-index: 2;
+ background: var(--a);
}
#treeul {
position: relative;
@@ -1631,22 +2110,23 @@ html {
background: #eee;
background: var(--btn-bg);
box-shadow: var(--btn-bs);
+ border: 1px solid var(--bg-u3);
border-bottom: var(--btn-bb);
- border-radius: .3em;
+ border-radius: 5px;
+ border-radius: var(--radius);
padding: .2em .4em;
font-size: 1.2em;
margin: .2em;
display: inline-block;
- white-space: pre;
+ text-wrap-mode: wrap;
+ white-space-collapse: preserve;
position: relative;
- top: -.12em;
+ vertical-align: top;
+ cursor: pointer;
}
html.c .btn,
-html.a .btn {
- border-radius: .2em;
-}
-html.dz .btn {
- font-size: 1em;
+html.b .btn {
+ border-radius: var(--radius);
}
.btn:hover {
color: var(--btn-h-fg);
@@ -1655,9 +2135,9 @@ html.dz .btn {
border-bottom: var(--btn-h-bb);
}
.tgl.btn.on {
- background: #000;
+ background: rgb(85, 144, 255);
background: var(--btn-1-bg);
- color: #fff;
+ color: #222;
color: var(--btn-1-fg);
text-shadow: none;
box-shadow: var(--btn-1-bs);
@@ -1694,6 +2174,10 @@ html.dz .btn {
margin-left: -.25em;
z-index: 3;
}
+#tree li a.dtarget {
+ box-shadow: 0 0 5px 0 var(--f-sel-sh) inset;
+ background: color-mix(in oklab, var(--a) 30%, transparent);
+}
#tree ul a.sel {
background: #000;
background: var(--bg-d3);
@@ -1701,11 +2185,15 @@ html.dz .btn {
color: #fff;
color: var(--fg-max);
}
+#tree .ntree a + a.hl:hover {
+ background: var(--btn-1h-bg);
+}
#tree ul a.hl {
color: #fff;
color: var(--btn-1-fg);
- background: #000;
+ background: rgb(85, 144, 255);
background: var(--btn-1-bg);
+ box-shadow: var(--btn-1-bs);
text-shadow: none;
}
#tree ul a.ld::before {
@@ -1724,8 +2212,12 @@ html.dz .btn {
color: var(--fg-max);
}
#tree ul a {
- border-radius: .3em;
+ border-radius: var(--radius);
display: inline-block;
+ vertical-align: middle;
+}
+.ntree a {
+ padding: .3em .2em;
}
.ntree a+a {
width: calc(100% - 2.2em);
@@ -1735,25 +2227,21 @@ html.dz .btn {
min-height: 1.4em;
white-space: nowrap;
}
-#tree.nowrap .ntree a+a:hover {
- background: rgba(16, 16, 16, 0.67);
- min-width: calc(var(--nav-sz) - 2em);
- width: auto;
+#docul a:hover {
+ color: var(--btn-h-fg);
}
-html.y #tree.nowrap .ntree a+a:hover {
- background: rgba(255, 255, 255, 0.67);
- color: var(--fg-max);
+#tree .ntree a + a:hover {
+ background: var(--btn-h-bg);
+ color: var(--btn-h-fg);
}
-#docul a:hover,
-#tree .ntree a+a:hover {
- background: var(--bg-d2);
- color: var(--fg-max);
+#tree .ntree a + a.hl:hover {
+ color: var(--btn-1-fg);
}
.ntree a:first-child {
font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
font-size: 1.2em;
- line-height: 0;
+ line-height: .7em;
}
.dumb_loader_thing {
display: block;
@@ -1766,7 +2254,7 @@ html.y #tree.nowrap .ntree a+a:hover {
animation: 1s linear .15s infinite forwards spin, .2s ease .15s 1 forwards fadein;
position: fixed;
top: .3em;
- z-index: 9;
+ z-index: 31;
}
#dlt_t {
left: 0;
@@ -1780,9 +2268,9 @@ html.y #tree.nowrap .ntree a+a:hover {
white-space: nowrap;
}
#files th:hover .cfg {
- display: block;
+ display: none;
width: 1em;
- border-radius: .2em;
+ border-radius: var(--radius);
margin: -1.2em auto 0 auto;
background: var(--bg-u5);
}
@@ -1817,7 +2305,6 @@ html.y #tree.nowrap .ntree a+a:hover {
#op_unpost,
#srch_form {
max-width: none;
- margin-right: 1.5em;
}
.opwide>div {
display: inline-block;
@@ -1831,14 +2318,11 @@ html.y #tree.nowrap .ntree a+a:hover {
margin: 0 .4em;
padding: 0;
}
-#op_cfg>div>div>span {
- display: inline-block;
- padding: .2em .4em;
-}
.opbox h3 {
margin: .8em 0 0 .6em;
padding: 0;
}
+.disabled,
#thumbs,
#au_prescan,
#au_fullpre,
@@ -1847,39 +2331,89 @@ html.y #tree.nowrap .ntree a+a:hover {
#u2tdate {
opacity: .3;
}
-#griden.on+#thumbs,
-#au_preload.on+#au_prescan,
-#au_preload.on+#au_prescan+#au_fullpre,
-#au_os_ctl.on+#au_os_seek,
-#au_os_ctl.on+#au_os_seek+#au_osd_cv,
-#u2turbo.on+#u2tdate {
+.disabled {
+ cursor: default;
+}
+#up_quick.disabled {
+ display: none;
+}
+.setting:has(#griden.on)+.setting #thumbs,
+.setting:has(#au_preload.on)+.setting #au_prescan,
+.setting:has(#au_preload.on)+.setting #au_prescan,
+.setting:has(#au_preload.on)~.setting #au_fullpre,
+.setting:has(#au_os_ctl.on)+.setting #au_os_seek,
+.setting:has(#au_os_ctl.on)+.setting #au_os_seek,
+.setting:has(#au_os_ctl.on)~.setting #au_osd_cv,
+.setting:has(#u2turbo.on)+.setting #u2tdate {
opacity: 1;
}
#wraptree.on+#hovertree {
display: none;
}
.ghead {
+ position: sticky;
background: #fff;
background: var(--bg-u2);
- border-radius: .3em;
- padding: .2em .5em;
+ border-radius: 5px;
+ border-radius: var(--radius);
+ padding: 0 .2em;
line-height: 2.3em;
margin-bottom: 1.5em;
-}
-#hdoc,
-#ghead {
- position: sticky;
- top: -.3em;
- z-index: 2;
+ z-index: 10;
+ margin-top: 0;
+ top: 3.7em;
+ transition: opacity .15s;
}
.ghead .btn {
position: relative;
top: 0;
}
+#gridsel.temp {
+ animation: pulsating 1s alternate infinite;
+}
+
+@keyframes pulsating {
+ 0% {
+ border-color: var(--btn-bg);
+ background: var(--btn-bg);
+ }
+
+ 100% {
+ border-color: var(--btn-1-bg);
+ background: color-mix(in oklab, var(--btn-1-bg) 30%, transparent);
+ }
+}
+#twig,
+#gridchop a:first-child,
+#gridzoom a:first-child {
+ line-height: 1.1em;
+ padding-bottom: .3em;
+}
.ghead>span {
white-space: pre;
padding-left: .3em;
}
+.ghead details {
+ display: inline-block;
+ background: transparent;
+ box-shadow: var(--btn-bs);
+}
+.ghead summary {
+ background: var(--btn-bg);
+}
+.ghead details .setting {
+ position: absolute;
+ background: var(--bg-u2);
+ border: 1px solid var(--bg-u3);
+ border-bottom: var(--btn-bb);
+ border-radius: var(--radius);
+ max-width: 11em;
+ max-height: 30vh;
+ overflow-y: auto;
+}
+#hcol_content:has(#hcolsh.on) {
+ margin-top: 3.5em;
+}
#tailbtns {
display: none;
}
@@ -1949,6 +2483,9 @@ html.y #tree.nowrap .ntree a+a:hover {
#rui td input[type="text"] {
width: 100%;
}
+input[type="text"].invalid {
+ border-color: var(--err-b1);
+}
#rui #rn_n_d,
#rui #rn_n_s,
#shui td.exs input[type="text"] {
@@ -1988,14 +2525,16 @@ html.y #tree.nowrap .ntree a+a:hover {
background: var(--bg);
margin: -1em 0 .5em 0;
padding: 1em 0 1em 0;
- border-radius: .3em;
+ border-radius: var(--radius);
+ overflow: auto;
+ box-shadow: 0 0 .3em var(--bg-d2);
+ background: var(--bg-u2);
}
#doc.wrap {
white-space: pre-wrap;
}
-html.y #doc {
- box-shadow: 0 0 .3em var(--bg-u5);
- background: #f7f7f7;
+#bdoc {
+ margin-top: .3em;
}
#docul {
position: relative;
@@ -2003,10 +2542,16 @@ html.y #doc {
#docul li.bn {
text-align: center;
padding: .5em;
+ white-space: normal;
}
#docul li.bn span {
- font-weight: bold;
- color: var(--fg-max);
+ color: var(--fg-weak);
+ vertical-align: middle;
+ text-shadow: none;
+}
+#docul li a {
+ display: inline;
+ padding: 0 !important;
}
#doc.prism {
padding-left: 3em;
@@ -2025,7 +2570,7 @@ html.y #doc {
line-height: 1.5em;
}
#doc .line-highlight {
- border-radius: .3em;
+ border-radius: var(--radius);
box-shadow: 0 0 .5em rgba(128,128,128,0.2);
background: linear-gradient(90deg, var(--bg-d3), var(--bg));
}
@@ -2039,21 +2584,19 @@ html.y #doc .line-highlight {
display: block;
}
#seldoc.sel {
- color: var(--fg2-max);
+ color: var(--fg-max);
background: #f0f;
background: var(--g-sel-b1);
}
#pvol,
#barbuf,
#barpos,
-a.btn,
+.btn,
#u2btn,
-#u2conf label,
#rui label,
#modal-ok,
#modal-ng,
-#ops,
-#ico1 {
+#ops {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -2087,6 +2630,11 @@ a.btn,
text-shadow: 1px 0 0 var(--fg), -1px 0 0 var(--fg), 0 -1px 0 var(--fg);
}
html.noscroll,
+html.noscroll .modalsplit,
+html.noscroll .splitsub,
+html.noscroll #treeh,
+html.noscroll .ghead,
+html.noscroll #wtoggle,
html.noscroll .sbar {
scrollbar-width: none;
}
@@ -2142,13 +2690,16 @@ html.noscroll .sbar::-webkit-scrollbar {
left: 0;
width: 100%;
height: 100%;
- z-index: 10;
+ z-index: 50;
background: rgba(0, 0, 0, 0.8);
transition: opacity .3s ease;
}
#bbox-overlay.visible {
opacity: 1;
}
+#bbox-overlay.sel {
+ background: color-mix(in oklab, var(--a-dark) 70%, transparent);
+}
.full-image {
display: inline-block;
position: relative;
@@ -2175,6 +2726,11 @@ html.noscroll .sbar::-webkit-scrollbar {
vertical-align: middle;
transition: transform .23s, left .23s, top .23s, width .23s, height .23s;
}
+.immersive .full-image img,
+.immersive .full-image video {
+ max-height: 100%;
+ margin-bottom: 0;
+}
.full-image img.asap,
.full-image video.asap {
transition: none;
@@ -2185,6 +2741,17 @@ html.noscroll .sbar::-webkit-scrollbar {
height: 100%;
object-fit: contain;
}
+#bbox-overlay:has(video) {
+ #bbox-next,
+ #bbox-prev {
+ height: 0;
+ }
+}
+#bbox-overlay.pixelated .full-image img,
+#bbox-overlay.pixelated .full-image video {
+ -ms-interpolation-mode: nearest-neighbor;
+ image-rendering: pixelated;
+}
html.bb_fsc .full-image img,
html.bb_fsc .full-image video {
max-height: 100%;
@@ -2203,6 +2770,10 @@ html.bb_fsc figcaption {
.full-image video {
background: #222;
}
+#bbox-overlay.immersive figcaption {
+ opacity: 0;
+ pointer-events: none;
+}
.full-image figcaption {
display: block;
position: fixed;
@@ -2212,10 +2783,11 @@ html.bb_fsc figcaption {
white-space: normal;
color: var(--fg);
z-index: 1;
+ transition: opacity .15s;
}
#bbox-overlay figcaption a {
background: rgba(0, 0, 0, 0.6);
- border-radius: .4em;
+ border-radius: var(--radius);
padding: .3em .6em;
}
html.y #bbox-overlay figcaption a {
@@ -2259,61 +2831,76 @@ html.y #bbox-overlay figcaption a {
@keyframes eog {
0% {filter: brightness(1.5)}
}
-#bbox-next,
-#bbox-prev {
- top: 50%;
- top: calc(50% - 30px);
- width: 44px;
- height: 60px;
- transition: background-color .3s ease, color .3s ease, left .3s ease, right .3s ease;
+#bbox-overlay #bbox-next,
+#bbox-overlay #bbox-prev {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ width: 70px;
+ left: 0;
+ cursor: pointer;
}
-#bbox-btns button {
- transition: background-color .3s ease, color .3s ease;
+#bbox-overlay #bbox-next {
+ right: 0;
+ left: auto;
}
-#bbox-btns {
- transition: top .3s ease;
+#bbox-overlay #bbox-next:hover a,
+#bbox-overlay #bbox-prev:hover a {
+ background: #fff2;
+ background: var(--btn-h-bg);
}
-.bbox-btn {
+#bbox-overlay #bbox-next a,
+#bbox-overlay #bbox-prev a {
position: fixed;
+ top: 50%;
+ top: calc(50% - 30px);
+ width: 30px;
+ height: 60px;
+ transition: opacity .3s ease;
+ text-align: center;
+ line-height: 60px;
}
-#bbox-next.off {
- right: -2.6em;
+#bbox-btns .btn {
+ cursor: pointer;
+ direction: ltr;
}
-#bbox-prev.off {
- left: -2.6em;
+#bbox-overlay.immersive #bbox-next a,
+#bbox-overlay.immersive #bbox-prev a {
+ opacity: 0;
}
-#bbox-btns.off {
- top: -2.2em;
+#bbox-overlay.immersive #bbox-btns {
+ opacity: 0;
+ top: -3.5em;
+ pointer-events: none;
}
-#bbox-overlay button {
+#bbox-overlay .btn {
cursor: pointer;
- outline: none;
- padding: 0 .3em;
- margin: 0 .4em;
- border: 0;
- border-radius: 15%;
- background: rgba(50, 50, 50, 0.5);
- color: rgba(255,255,255,0.7);
+ padding: 0 .4em;
+ margin: 0 .1em .3em .1em;
font-size: 1.4em;
- line-height: 1.4em;
+ line-height: 2em;
vertical-align: top;
font-variant: small-caps;
+ color: var(--fg);
}
-#bbox-overlay button:focus,
-#bbox-overlay button:hover {
- color: rgba(255,255,255,0.9);
- background: rgba(50, 50, 50, 0.9);
+#bbox-overlay .btn.on {
+ color: var(--bg);
+}
+#bbox-overlay .btn:hover {
+ opacity: 1 !important;
}
-#bbox-next {
+#bbox-next a {
right: 1%;
}
-#bbox-prev {
+#bbox-prev a {
left: 1%;
}
#bbox-btns {
top: .5em;
- right: 2%;
+ right: .2em;
position: fixed;
+ direction: rtl;
+ transition: top .3s ease, opacity .3s ease;
}
#bbox-halp {
color: var(--fg-max);
@@ -2322,7 +2909,7 @@ html.y #bbox-overlay figcaption a {
position: absolute;
top: 0;
left: 0;
- z-index: 20;
+ z-index: 51;
padding: .4em;
}
#bbox-halp td {
@@ -2385,22 +2972,212 @@ html.y #bbox-overlay figcaption a {
+/* modals */
+.modalcontent{
+ display: grid;
+ grid-template-rows: max-content auto;
+ margin: 5vh 5vw;
+ border-radius: 10px;
+ border-radius: var(--radius);
+ border: var(--a) solid 1px;
+ background: #fff;
+ background: var(--bg);
+ max-width: 66.6em;
+ position: relative;
+ overflow: auto;
+ box-shadow: .1em .2em 1em var(--mp-sh);
+}
+html.c .modalcontent {
+ background: var(--bg-u2);
+}
+.modalheader {
+ display: flex;
+ align-items: center;
+ margin: 0;
+ padding: .7em 3em .7em .7em;
+ background: var(--ttlbar);
+ font-size: large;
+ font-weight: bold;
+ color: var(--fg);
+}
+.modalheader:hover {
+ color: var(--fg);
+}
+.winbtn,
+.close{
+ position: absolute;
+ cursor: default;
+ top: 0;
+ right: 0;
+ margin: .3em;
+ color: var(--fg);
+ height: 1.8em;
+ aspect-ratio: 1 / 1;
+ text-align: center;
+ display: block;
+ padding: 0;
+ align-content: center;
+}
+.winbtn {
+ right: 2.3em;
+}
+.winbtn span {
+ font-family: initial;
+ font-size: small;
+ vertical-align: middle;
+}
+
+.closepane {
+ position: absolute;
+ cursor: default;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: none !important;
+}
+
+/* settings */
+.modalsplit {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ min-height: 0;
+}
+.splitsub {
+ display: block;
+ overflow-y: auto;
+ padding: 0 .5em 5em .5em;
+}
+.divider{
+ background: var(--a);
+ width: 1px;
+ margin: 1em 0;
+}
+.divider_h {
+ background: var(--bg);
+ height: 1px;
+ margin: .3em 0;
+}
+#s_nav .btn::after{
+ position: absolute;
+ content: ">";
+ right: .5em;
+}
+#s_nav .btn{
+ display: block;
+ padding-right: 2em;
+ border: 1px solid var(--bg-u3);
+ color: var(--fg);
+}
+#s_nav .btn:hover{
+ color: var(--a-hil);
+}
+#s_nav .sub {
+ margin-left: 1em;
+}
+#s_nav .sub:before {
+ content: "";
+ width: 2px;
+ background: var(--bg-u3);
+ position: absolute;
+ left: -.5em;
+ top: -.2em;
+ bottom: -.1em;
+}
+.s_section {
+ border-radius: var(--radius);
+ margin-bottom: 1.5em;
+}
+.s_section .setting:last-child {
+ border-radius: 0 0 5px 5px;
+ border-radius: 0 0 var(--radius) var(--radius);
+}
+.setting{
+ padding: .5em;
+ border: var(--bg-u5) solid 1px;
+ border-top: 0;
+ overflow-x: auto;
+ position: relative;
+}
+.modal .setting:hover{
+ background: var(--bg-u1);
+}
+.s_desc{
+ margin: 0 .3em;
+ font-size: medium;
+ color: var(--fg-weak);
+}
+#s_list h3{
+ background-color: var(--bg-u5);
+ border-radius: 5px 5px 0 0;
+ border-radius: var(--radius) var(--radius) 0 0;
+ padding: .5em;
+ margin: 0;
+}
+#s_list .sub_section h3 {
+ background: none;
+ border-top: var(--bg-u5) solid 1px;
+ border-radius: 0;
+ margin: 0 -.4em;
+ text-align: center;
+}
+
+.modal.vis.unmodal {
+ position: static;
+ max-height: 50vh;
+ z-index: 1;
+}
+.modal.vis.unmodal .modalcontent {
+ width: 100%;
+ max-width: none;
+ margin: 0;
+}
+.modal.vis.unmodal .closepane,
+.modal.vis.unmodal .close {
+ display: none;
+}
+.modal.vis.unmodal .splitsub {
+ margin-bottom: .5em;
+}
+
+#cfg.unmodal .sub_section,
+#cfg.unmodal #s_nav,
+#cfg.unmodal .divider,
+#cfg.unmodal .s_desc {
+ display: none;
+}
+
+#cfg.unmodal .setting,
+#cfg.unmodal #s_list {
+ display: inline-block;
+ display: contents;
+ border: none;
+}
+
+#cfg.unmodal .s_section {
+ margin: 0 .3em;
+}
+.c {
+ display: inline-block;
+}
/* upload.css */
-#op_up2k {
- padding: 0 1em 1em 1em;
-}
-#drops {
+.modal {
display: none;
- z-index: 3;
+ z-index: 40;
background: rgba(48, 48, 48, 0.7);
}
-#drops.vis,
+.modal.vis,
.dropzone {
+ /* fallback */
display: block;
+ overflow-y: auto;
+
+ display: flex;
+ justify-content: center;
position: fixed;
top: 0;
left: 0;
@@ -2412,26 +3189,27 @@ html.y #bbox-overlay figcaption a {
display: table;
left: 10%;
width: 78%;
- height: 26%;
+ height: 78%;
margin: 0;
font-size: 3em;
font-weight: bold;
text-shadow: .05em .05em .1em #333;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 0 0 #999;
- border: .5em solid var(--ud-b1);
- border-radius: .5em;
- border-width: 1vw;
+ border: .1em solid var(--ud-b1);
+ border-radius: 10px;
+ border-radius: var(--radius);
+ border-width: 2px;
color: #fff;
transition: all 0.12s;
}
.dropdesc.hl.ok {
border-color: #fff;
- box-shadow: 0 0 1em .4em #cf5, 0 0 1em #000 inset;
+ box-shadow: 0 0 1em .4em var(--a), 0 0 1em #000 inset;
background: rgba(24, 24, 24, 0.7);
left: 8%;
width: 82%;
- height: 32%;
+ height: 82%;
margin: -3vh 0;
}
.dropdesc.hl.err {
@@ -2473,26 +3251,32 @@ html.y #bbox-overlay figcaption a {
}
.dropzone {
z-index: 80386;
- height: 50%;
+ height: 100%;
}
#up_dz {
- bottom: 50%;
+ position: absolute;
+ bottom: 0;
}
#srch_dz {
- top: 50%;
+ position: absolute;
+ top: 0;
}
#up_zd {
+ position: absolute;
top: 12%;
+ bottom: 12%;
}
#srch_zd {
+ position: absolute;
+ top: 12%;
bottom: 12%;
}
.dropdesc span {
color: #fff;
- background: #490;
- border-bottom: .3em solid #6d2;
+ background: var(--a-dark);
+ border-bottom: .3em solid var(--a);
text-shadow: 1px 1px 1px #000;
- border-radius: .3em;
+ border-radius: var(--radius);
padding: .4em .8em;
font-size: .4em;
}
@@ -2512,6 +3296,11 @@ html.y #bbox-overlay figcaption a {
background: var(--bg-u5);
border: 0px solid var(--bg-u5);
}
+#up_status_h {
+ margin: -1.8em .5em 0 .5em;
+ position: absolute;
+ z-index: 1;
+}
#u2err.err {
color: var(--a-dark);
padding: .5em;
@@ -2524,35 +3313,38 @@ html.y #bbox-overlay figcaption a {
#u2btn {
line-height: 1.3em;
border: .15em dashed var(--u2-btn-b1);
- border-radius: .4em;
+ border-radius: var(--radius);
text-align: center;
- font-size: 1.5em;
- margin: .5em auto;
- padding: .8em 0;
- width: 16em;
+ font-size: 1.3em;
+ padding: 1em 2em;
cursor: pointer;
+ box-shadow: .4em .4em 0 var(--bg-d1);
}
-#op_up2k.srch #u2btn {
- border-color: var(--u2-sbtn-b1);
+#u2btn sup {
+ font-size: 1.1em;
}
-#u2conf.ww #u2btn {
- line-height: 1em;
- padding: .5em 0;
- margin: -2em 1em -3em 0;
+#u2btn:hover {
+ background: linear-gradient(var(--a) 0%, var(--a) 20%, color-mix(in oklab, transparent 85%, var(--a) 15%));
+ border-color: var(--bg);
+ border-style: solid;
+ color: var(--fg-max);
}
-#u2conf #u2btn {
- padding: .4em 0;
- margin: -2em 0;
- font-size: 1.25em;
- width: 100%;
- max-width: 12em;
- display: inline-block;
+#u2c3t {
+ margin: 1em 0;
}
-#u2conf #u2btn_cw {
- text-align: right;
+#op_up2k {
+ display: block;
+ padding-top: .5em;
+}
+#op_up2k.srch #u2btn {
+ border-color: var(--u2-sbtn-b1);
+}
+#up2k_qs {
+ margin-top: .5em;
}
#u2bm {
- display: block;
+ display: flex;
+ justify-content: center;
}
#u2bm sup {
font-weight: bold;
@@ -2573,7 +3365,6 @@ html.y #bbox-overlay figcaption a {
#u2tabw {
min-height: 0;
transition: min-height .2s;
- margin: 2em 0;
}
#u2tabw.na>table {
display: none;
@@ -2601,23 +3392,11 @@ html.y #bbox-overlay figcaption a {
#u2tab td:nth-child(3) {
width: 40%;
}
-#u2tab.up.ok td:nth-child(3),
-#u2tab.up.bz td:nth-child(3),
-#u2tab.up.q td:nth-child(3) {
- width: 18em;
-}
@media (max-width: 65em) {
#u2tab {
font-size: .9em;
}
}
-@media (max-width: 50em) {
- #u2tab.up.ok td:nth-child(3),
- #u2tab.up.bz td:nth-child(3),
- #u2tab.up.q td:nth-child(3) {
- width: 16em;
- }
-}
#op_up2k.srch td.prog {
font-family: sans-serif;
font-family: var(--font-main), sans-serif;
@@ -2632,7 +3411,6 @@ html.y #bbox-overlay figcaption a {
width: 17em;
cursor: pointer;
text-align: center;
- white-space: nowrap;
display: inline-block;
font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
@@ -2648,53 +3426,35 @@ html.y #bbox-overlay figcaption a {
display: unset;
}
#u2etaw {
- width: 18em;
- font-size: .94em;
- margin: 1.8em auto .5em auto;
+ display: flex;
+ justify-content: center;
}
#u2etas.o #u2etaw {
width: 21em;
}
#u2cards {
- padding: 1em 1em .42em 1em;
- margin: 0 auto;
- white-space: nowrap;
text-align: center;
- overflow: hidden;
- min-width: 24em;
-}
-#u2cards.w {
- width: 48em;
- text-align: left;
-}
-#u2cards.ww {
- display: inline-block;
-}
-#u2etaw.w {
- width: 55em;
- text-align: right;
- margin: 2em auto -2.7em auto;
-}
-#u2etaw.ww {
- margin: -1em 2em 1em 1em;
+ overflow-y: hidden;
+ overflow-x: auto;
}
#u2cards a {
+ display: inline-block;
padding: .2em 1em;
+ padding-bottom: .3em;
background: var(--u2-tab-bg);
border: 1px solid #999;
border-color: var(--u2-tab-b1);
border-width: 0 0 1px 0;
}
#u2cards a:first-child {
- border-radius: .4em 0 0 0;
+ border-radius: var(--radius) 0 0 0;
}
#u2cards a:last-child {
- border-radius: 0 .4em 0 0;
+ border-radius: 0 var(--radius) 0 0;
}
#u2cards a.act {
- padding-bottom: .5em;
border-width: 1px 1px .1em 1px;
- border-radius: .3em .3em 0 0;
+ border-radius: var(--radius) var(--radius) 0 0;
margin-left: -1px;
background: var(--u2-tab-1-bg);
box-shadow: 0 -.17em .67em var(--u2-tab-1-sh);
@@ -2712,104 +3472,23 @@ html.y #bbox-overlay figcaption a {
text-align: center;
min-width: 1.3em;
}
-#u2conf {
- margin: 1em auto;
- width: 30em;
-}
-#u2conf.w {
- width: 51em;
-}
-#u2conf.ww {
- width: 82em;
-}
-#u2conf.ww #u2c3w {
- width: 29em;
-}
-#u2conf.ww #u2c3w.s {
- width: 39em;
-}
-#u2conf .c,
-#u2conf .c * {
- text-align: center;
- line-height: 1em;
- margin: 0;
- padding: 0;
- border: none;
-}
-#u2conf .txtbox {
- width: 3em;
- color: var(--fg-max);
- background: var(--u2-txt-bg);
- border: 1px solid #777;
- font-size: 1.2em;
- padding: .15em 0;
- height: 1.05em;
-}
-#u2conf .txtbox.err {
- color: var(--err-fg);
- background: var(--err-bg);
-}
-#u2conf a.b {
- color: var(--u2-b-fg);
- background: var(--u2-b1-bg);
- text-decoration: none;
- border-radius: .1em;
- font-size: 1.5em;
- padding: .1em 0;
- margin: 0 -1px;
- width: 1.5em;
- height: 1em;
- display: inline-block;
- position: relative;
- bottom: -0.08em;
-}
-#u2conf input+a.b {
- background: var(--u2-b2-bg);
-}
-html.b #u2conf a.b:hover {
- background: var(--btn-h-bg);
-}
-#u2conf .c label {
- font-size: 1.6em;
- width: 2em;
- height: 1em;
- padding: .4em 0;
- display: block;
- border-radius: .25em;
-}
-#u2conf input[type="checkbox"] {
- position: relative;
- opacity: .02;
- top: 2em;
-}
-#u2conf input[type="checkbox"]+label,
-#u2conf input[type="checkbox"]:checked+label {
- position: relative;
- cursor: pointer;
- background: var(--btn-bg);
- box-shadow: var(--btn-bs);
- border-bottom: var(--btn-bb);
- text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000;
+#u2conft {
+ width: max-content;
}
-#u2conf input[type="checkbox"]:checked+label {
- background: var(--btn-1-bg);
- box-shadow: var(--btn-1-bs);
- border-bottom: var(--btn-1-bb);
+#u2conf details[open] {
+ border-bottom: none;
+ border-radius: var(--radius) var(--radius) 0 0;
}
-#u2conf input[type="checkbox"]+label:hover {
- background: var(--btn-h-bg);
- box-shadow: var(--btn-h-bs);
- border-bottom: var(--btn-h-bb);
+details .setting {
+ border-left: none;
+ border-right: none;
}
-#u2conf input[type="checkbox"]:checked+label:hover {
- background: var(--btn-1h-bg);
- box-shadow: var(--btn-1h-bs);
- border-bottom: var(--btn-1h-bb);
+.c input[type=checkbox] {
+ position: absolute;
+ opacity: 0;
}
-#op_up2k.srch #u2conf td:nth-child(2)>*,
-#op_up2k.srch #u2conf td:nth-child(3)>* {
- background: #777;
- border-color: var(--fg);
+#u2conf.srch #multitask,
+#u2conf.srch #potato {
box-shadow: none;
opacity: .2;
}
@@ -2880,7 +3559,7 @@ html.b #u2conf a.b:hover {
#u2tab span.err {
color: #fff;
padding: .22em;
- border-radius: .2em;
+ border-radius: var(--radius);
border: 2px solid #f0f;
}
#u2tab span.inf {
@@ -2905,10 +3584,45 @@ html.b #u2conf a.b:hover {
}
.fsearch_explain {
color: var(--a-dark);
- padding-left: .7em;
+ padding: .7em;
font-size: 1.1em;
line-height: 0;
}
+details {
+ border: var(--bg-u3) solid 1px;
+ border-radius: var(--radius);
+ margin: .3em;
+}
+details:not(.open) .setting {
+ display: none;
+}
+summary {
+ cursor: pointer;
+ background: #ccc;
+ background: var(--bg-u1);
+ color: var(--a);
+ padding: .3em;
+ border-radius: var(--radius);
+ font-size: large;
+}
+.modal summary:hover {
+ background: var(--bg-u3);
+}
+#actionsArea {
+ position: relative;
+ height: max-content;
+ margin-left: auto;
+}
+#srchfolder_div {
+ display: none;
+ position: absolute;
+ left: 3.8em;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ padding: .2em;
+ margin-left: .3em;
+}
@@ -2920,57 +3634,29 @@ html.b #u2conf a.b:hover {
-
-html.c #path,
-html.a #path {
- border-radius: 0 .3em .3em 0;
-}
-html.c #pctl a,
-html.a #pctl a {
- background: rgba(0,0,0,0.1);
- margin-right: .5em;
- box-shadow: -.02em -.02em .3em rgba(0,0,0,0.2) inset;
-}
-html.d #pctl,
-html.b #pctl {
- left: .5em;
-}
-html.d #ops,
-html.c #ops,
-html.a #ops {
- margin: 1.7em 1.5em 0 1.5em;
- border-radius: .3em;
- border-width: 1px 0;
-}
-html.c .opbox,
-html.a .opbox {
- margin: 1.5em 0 0 0;
-}
html.dz .opview input.i {
width: calc(100% - 18em);
}
-html.c #tree,
-html.c #treeh,
-html.a #tree,
-html.a #treeh {
- border-radius: 0 .3em 0 0;
+#tree,
+#treesuperh {
+ background: #fff;
background: var(--bg-u2);
}
html.c #treepar,
-html.a #treepar {
+html.b #treepar {
background: var(--bg-u2);
}
html.c #tree li,
-html.a #tree li {
+html.b #tree li {
border-top: 1px solid var(--bg-u5);
border-bottom: 1px solid var(--bg-d3);
}
html.c #tree li:last-child,
-html.a #tree li:last-child {
+html.b #tree li:last-child {
border-bottom: none;
}
html.c .opbox h3,
-html.a .opbox h3 {
+html.b .opbox h3 {
border-bottom: 1px solid var(--bg-u5);
}
html.c #ops,
@@ -2979,212 +3665,162 @@ html.c #path,
html.c #srch_form,
html.c .ghead,
-html.a #ops,
-html.a .opbox,
-html.a #path,
-html.a #srch_form,
-html.a .ghead {
- background: var(--bg-u2);
+html.b #ops,
+html.b .opbox,
+html.b #path,
+html.b #srch_form,
+html.b .ghead {
+ background: #c1d1ed;
+ background: var(--btn-bg);
border: 1px solid var(--bg-u3);
- box-shadow: 0 0 .3em var(--bg-d3);
+ border-bottom: var(--btn-bb);
+ box-shadow: var(--btn-bs);
}
-html.c #u2btn,
-html.a #u2btn {
- color: #eee;
- background: var(--bg-u5);
- background: -moz-linear-gradient(top, #367 0%, #489 50%, #38788a 51%, #367 100%);
- background: -webkit-linear-gradient(top, #367 0%, #489 50%, #38788a 51%, #367 100%);
- background: linear-gradient(to bottom, #367 0%, #489 50%, #38788a 51%, #367 100%);
- box-shadow: .4em .4em 0 var(--bg-d3);
- border: 1px solid #222;
+
+html.b .ghead,
+html.b #wfp .btn:not(:hover),
+html.b #treeToggleBtn:not(:hover):not(.on),
+html.b #ops,
+html.b #path,
+html.b #wtoggle,
+html.b #up_quick_more,
+html.b #up_quick_btn:not(:hover):not(.on)
+
+html.cz .ghead,
+html.cz #wfp .btn:not(:hover),
+html.cz #treeToggleBtn:not(:hover):not(.on),
+html.cz #ops,
+html.cz #path,
+html.cz #wtoggle,
+html.cz #up_quick_more,
+html.cz #up_quick_btn:not(:hover):not(.on) {
+ backdrop-filter: blur(10px);
+ background: var(--btn-bg);
+}
+
+html.c .modal .setting:hover {
+ background: color-mix(in oklab, var(--bg-u5) 30%, transparent);
}
-html.ay #u2btn {
+html.by #u2btn {
box-shadow: .4em .4em 0 #ccc;
}
html.dz #u2btn {
letter-spacing: -.033em;
}
-html.c #u2conf.ww #u2btn,
-html.a #u2conf.ww #u2btn {
- margin: -2em .5em -3em 0;
- padding: .9em 0;
-}
-html.c #op_up2k.srch #u2btn,
-html.a #op_up2k.srch #u2btn {
- background: linear-gradient(to bottom, #ca3 0%, #fd8 50%, #fc6 51%, #b92 100%);
- text-shadow: 1px 1px 1px #fc6;
- color: #333;
-}
-html.c #u2conf #u2btn,
-html.a #u2conf #u2btn {
- padding: .6em 0;
- margin-top: -2.6em;
-}
html.c #u2etas,
-html.a #u2etas {
+html.b #u2etas {
background: var(--bg-d1);
border: 1px solid var(--bg-u1);
- border-width: .1em 0;
- border-radius: .5em;
- border-width: .25em 0;
-}
-html.c #u2cards,
-html.a #u2cards {
- margin: 0 auto -1em auto;
+ border-width: 2px;
+ border-radius: var(--radius);
}
html.c #u2foot:empty,
-html.a #u2foot:empty {
+html.b #u2foot:empty {
margin-bottom: -1em;
}
-html.ay #ops,
-html.ay .opbox,
-html.ay #path,
-html.ay #doc,
-html.ay #srch_form,
-html.ay .ghead,
-html.ay #u2etas {
+html.by #ops,
+html.by .opbox,
+html.by #path,
+html.by #doc,
+html.by #srch_form,
+html.by .ghead,
+html.by #u2etas {
border-color: var(--bg-u2);
box-shadow: 0 0 .3em var(--bg-u5);
}
-html.ay #tree li,
-html.ay #treepar {
- border-color: #f7f7f7 var(--bg-max) #ddd var(--bg-max);
+html.by #tree li,
+html.by #treepar {
+ border-color: var(--bg) var(--bg-max) #ddd var(--bg-max);
}
-html.ay #path {
- background: #f7f7f7;
- box-shadow: 0 0 .3em #bbb;
-}
-html.ay #treeh,
-html.ay #treepar {
- background: #f7f7f7;
+html.by #treesuperh,
+html.by #treepar {
+ background: var(--bg);
border-color: #ddd;
}
-html.ay #tree {
+html.by #tree {
border-color: #ddd;
box-shadow: 0 0 1em #ddd;
- background: #f7f7f7;
+ background: var(--bg);
}
-html.b #path {
- margin: .3em 0;
- line-height: 1.7em;
-}
-html.b.op_open #path {
- margin-top: .2em;
-}
-html.b #srv_info {
- display: none;
-}
-html.b #srv_info2 {
- display: inline-block;
-}
-html.b #srv_info2:after {
- content: '//';
- margin: 0 .4em;
-}
-html.b #acc_info {
- right: .5em;
-}
-html.b #wtoggle {
- border-radius: .1em 0 0 0;
-}
-html.d #barpos,
-html.d #barbuf,
-html.d #pvol,
html.b #barpos,
html.b #barbuf,
html.b #pvol {
- border-radius: .2em;
+ border-radius: calc(var(--radius) * 3);
}
-html.b #barpos {
+html.a #barpos {
box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
-html.by #barpos {
+html.ay #barpos {
box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
}
-html.b #ops {
- max-width: 1em;
- margin-bottom: 1.7em;
- position: relative;
- z-index: 2;
-}
-html.b #ops a {
+html.a #pathBar {
background: var(--bg);
}
-html.b .opview {
- margin: 1em 0;
-}
-html.b #srch_q {
+html.a #srch_q {
margin: .2em 0 0 1.6em;
}
-html.b #srch_q:empty {
+html.a #srch_q:empty {
margin-bottom: -1em;
}
-html.b #op_up2k {
- margin-top: 3em;
-}
-html.b #tree {
+html.a #tree {
box-shadow: 0 -1px 0 rgba(128,128,128,0.4);
}
-html.bz #tree {
+html.az #tree {
box-shadow: 0 -1px 0 var(--bg-d3);
}
-html.b #treeh,
-html.b #tree li {
+html.a #treeh,
+html.a #tree li {
border: none;
}
-html.b #tree li {
+html.a #tree li {
margin-left: .8em;
}
-html.b #docul a,
-html.b .ntree a {
+html.a #docul a,
+html.a .ntree a {
padding: .6em .2em;
}
-html.b #treepar {
+html.dy *,
+html.cy *,
+html.a * {
+ box-shadow: none !important;
+}
+html.a #path,
+html.a #ops {
+ background: color-mix(in oklab, var(--bg-u5), transparent);
+}
+html.a #treepar {
margin-left: .63em;
width: calc(.1em + var(--nav-sz) - var(--sbw));
border-bottom: .2em solid var(--f-h-b1);
}
-html.b #wrap {
- margin-top: 2em;
+html.d #path i,
+html.a #path i {
+ border-right: var(--a) solid 2px;
+ height: 1.5em;
+ margin: -.4em .3em -.4em -1.7em;
}
-html.by .ghead,
-html.bz .ghead {
+html.dy .ghead,
+html.a .ghead {
background: var(--bg);
padding: .2em 0;
+ border-bottom: var(--btn-bb);
+ border-radius: 0;
+ margin: 0 -.5em;
+ padding-left: .5em;
+ padding-right: .5em;
}
-html.b #files td {
- padding: .5em .7em;
-}
-html.b .btn {
- top: -.1em;
-}
-html.b #op_up2k.srch sup {
- color: #fc0;
-}
-html.by #u2btn sup {
- color: #06b;
-}
-html.by #op_up2k.srch sup {
- color: #b70;
+html.a #files tbody a {
+ padding: .7em;
}
-html.bz #u2cards a.act {
+html.az #u2cards a.act {
box-shadow: 0 -.1em .2em var(--bg-d2);
}
-html.b #u2conf {
- margin: 2em auto 0 auto;
-}
-html.b #u2conf .txtbox {
- border: none;
-}
-html.b #u2conf a.b {
- border-radius: .2em;
-}
-html.by #u2cards a.act {
+html.ay #u2cards a.act {
border-width: 2px;
}
@@ -3192,16 +3828,21 @@ html.by #u2cards a.act {
+html.cy .pfp {
+ color: #f00;
+}
+html.cy #path a:hover {
+ color: #f00;
+}
html.cy .mdo a {
background: #f00;
}
html.cy #wrap,
html.cy #acc_info a,
-html.cy #op_up2k,
html.cy #files,
html.cy #files a,
html.cy #files tbody div a:last-child {
- color: #000;
+ color: #f00;
}
html.cy #u2tab a,
html.cy #u2cards a {
@@ -3216,6 +3857,19 @@ html.cy #barbuf {
html.cy #pvol {
filter: hue-rotate(4deg) contrast(2.2);
}
+html.cy #path i {
+ background: transparent;
+}
+html.cy #up_quick_btn.on:not(:hover) {
+ background: #f00;
+}
+html.cy .ghead span {
+ color: #f00;
+}
+html.cy #s_list h3 {
+ background: #ff0;
+ color: #000;
+}
@@ -3230,95 +3884,352 @@ html.d #treepar {
-
-@media (max-width: 32em) {
- #u2conf {
- font-size: .9em;
- }
+/* basically a mobile / phone layout */
+#pathBar.thin {
+ display: block;
+}
+#pathBar.thin #path {
+ position: relative;
+ height: 2.2em;
+ margin: .5em 0 0 0;
+ z-index: -1;
+}
+#pathBar.thin #path a {
+ padding-top: .45em;
+}
+#pathBar.thin #wfp.shifted {
+ margin-left: 2.5em;
+}
+#pathBar.thin #actionsArea {
+ position: absolute;
+ top: .6em;
+ right: .6em;
+}
+html.e #pathBar.thin #path {
+ margin: 0;
+}
+html:not(.e) #wrap.thin .ghead {
+ top: 7em;
+ padding: .3em;
+}
+html:not(.e) #wrap.thin #ghead {
+ text-wrap-mode: nowrap;
+ text-wrap: nowrap;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+html.cz #wrap.thin .ghead{
+ top: 7.4em;
}
-@media (max-width: 28em) {
- #u2conf {
- font-size: .8em;
+html.dy #wrap.thin .ghead,
+html.a #wrap.thin .ghead {
+ top: 6.9em;
+ margin-left: -.5em;
+ margin-right: -.5em;
+}
+#wrap.thin .td_w {
+ width: calc(100vw - 8.5em);
}
+#wrap.thin .td_s {
+ width: calc(50vw - 5em);
+}
+html:not(.e) #treeh:not(.noa):after,
+html:not(.e) #wrap.thin #ghead:not(.noa)::after {
+ content: "";
+ position: sticky;
+ right: -.5em;
+ background: linear-gradient(to left, var(--scrl-hint), transparent);
+ width: 3em;
+ height: 3.5em;
+ display: inline-block;
+ margin: -1.4em -0.5em -1.6em -1.4em;;
+ pointer-events: none;
+}
+html.a #wrap.thin #ghead:not(.noa)::after {
+ background: linear-gradient(to left, var(--bg), transparent);
}
-@media (min-width: 70em) {
- #barpos,
- #barbuf {
- width: calc(100% - 21em);
- left: 9.8em;
- top: .7em;
- height: 1.6em;
- bottom: auto;
+html.e #wrap.thin .ghead {
+ top: 5.1em;
+}
+@media (max-width: 50em){
+ #path {
+ position: relative;
+ height: 2.2em;
+ margin: .5em 0 0 0;
+ z-index: -1;
}
- html.d #barpos,
- html.b #barpos,
- html.d #barbuf,
- html.b #barbuf {
- width: calc(100% - 19em);
- left: 8em;
+ html.dy .ghead,
+ html.a .ghead,
+ html.dy #wrap.thin .ghead,
+ html.a #wrap.thin .ghead {
+ top: 7.2em;
+ padding-left: 1em;
}
- #widget {
- bottom: -3.2em;
- height: 3.2em;
+ html:not(.f) .ntree a + a {
+ padding: .6em .2em;
}
- #pvol {
- max-width: 9em;
+ #files tbody a {
+ padding: .8em;
}
- html.d #ops,
- html.b #ops {
- padding-left: 1.7em;
+ html:not(.e) body {
+ font-size: 1.1em;
}
- html.d .opview,
- html.b .opview {
- margin: 1em;
+ html:not(.e) #treeToggleBtn {
+ margin: .8em;
}
- html.d #path,
- html.b #path {
- padding-left: 1.3em;
+ html:not(.e):not(.f) #srv_name {
+ padding-top: .9em;
+ padding-bottom: .6em;
+ margin-left: 2.9em;
}
-}
-@media (max-width: 35em) {
- #ops>a[data-dest="new_md"],
- #ops>a[data-dest="msg"] {
- display: none;
+ html.fz #srv_name {
+ padding-top: .9em !important;
+ padding-bottom: .6em;
+ margin-left: 3em !important;
+ }
+ #widget, #wrap {
+ margin-left: 0 !important;
+ }
+ #widget {
+ font-size: 1.4em;
}
- #op_mkdir.act+div,
- #op_mkdir.act+div+div {
+ #pathBar {
display: block;
- margin-top: 1em;
+ padding: .5em 1em;
+ padding-top: 1em;
+ margin-left: -1em;
+ margin-right: -1em;
}
-}
-@media (max-width: 54em) {
- html.b #ops {
- margin-top: 1.7em;
+ #actionsArea,
+ #pathBar.thin #actionsArea {
+ position: absolute;
+ top: 1em;
+ right: 1em;
}
-}
-@supports (display: grid) and (gap: 1em) {
- #ggrid {
- display: grid;
- margin: 0em 0.25em;
- padding: unset;
- grid-template-columns: repeat(auto-fit,var(--grid-sz));
- justify-content: center;
- gap: 1em;
+ html.fy #actionsArea,
+ html.fy #pathBar.thin #actionsArea {
+ right: 0;
+ }
+ #folder_search {
+ margin: .5em 1em 0 .2em;
+ }
+ html:not(.e) #wrap {
+ padding-left: 1em;
+ padding-right: 1em;
+ }
+ #wfp {
+ margin-left: .1em;
+ }
+ #gfiles {
+ margin: 0em -0.5em;
+ }
+ #ghead {
+ margin: 0 .5em 1em .5em;
+ }
+ .modalsplit {
+ display: block;
+ overflow-y: auto;
+ padding-bottom: 5em;
+ }
+ .splitsub {
+ padding-bottom: .5em;
+ }
+ .divider {
+ display: none;
+ }
+ #up_status_h {
+ margin: .5em .5em 0 .5em;
+ position: inherit;
+ }
+ #u2btn {
+ padding: 1em .3em;
+ }
+ #pctl {
+ padding: .2em .5em .5em .5em;
+ }
+ #pvol {
+ border: .7em solid var(--bg-u3);
+ transform: rotate(-90deg);
+ position: fixed;
+ bottom: 4em;
+ right: -.7em;
+ opacity: 0;
+ pointer-events: none;
+ box-shadow: 0 0 .5em var(--mp-sh);
+ }
+ #music #pvol {
+ position: absolute;
+ bottom: 3.5em;
+ right: -1.7em;
+ }
+ #pvolbg:hover #pvol {
+ display: block;
+ opacity: 1;
+ pointer-events: all;
+ }
+ #up_quick_more a {
+ padding: 1em;
+ }
+ #up_quick .overlay_plus {
+ right: 1em;
+ }
+ #s_nav .btn {
+ padding: .5em;
+ padding-right: 2em;
+ }
+ #wfp,
+ #wfp.shifted,
+ #pathBar.thin #wfp,
+ #pathBar.thin #wfp.shifted {
+ margin-left: 2em;
+ }
+ #wrap.thin .ghead {
+ top: 7em;
+ }
+ html.cy .ghead,
+ html.b .ghead,
+ html.cy #wrap.thin .ghead,
+ html.b #wrap.thin .ghead {
+ top: 7.3em;
+ }
+ html.cz .ghead,
+ html.cz #wrap.thin .ghead {
+ top: 7.7em;
+ }
+ .gselchk {
+ font-size: 1.4em;
+ top: 5px;
+ right: 5px;
}
+ html:not(.e):not(.f) #mu_outer {
+ padding: 1em;
+ }
+ #mu_pbb {
+ width: 100%;
+ }
+ html:not(.e):not(.f) #mu_inner {
+ margin: -.5em;
+ }
+}
- html.b #ggrid {
- padding: 0 0 2em 0;
- gap: 1em 1.5em;
+@media (max-width: 31em) {
+ #ops a {
+ padding-left: .25em;
+ padding-right: .25em;
+ }
+ #srchfolder_div {
+ left: 3.2em;
+ }
+}
+@media (max-width: 37em) {
+ #wfp #gon,
+ #wfp #gop {
+ display: none;
+ }
+}
+@media (max-width: 54em) {
+ #opa_msg {
+ display: none;
+ }
+}
+
+/* prevent load of new thumbnails */
+#ggrid.waiting a:not(.thumbed) img {
+ display: none;
+}
+@supports (display: grid) and (gap: 1em) {
+ #ggrid {
+ display: grid;
+ margin: .5em;
+ padding: unset;
+ grid-template-columns: repeat(auto-fit,var(--grid-sz));
+ justify-content: center;
+ gap: 1em;
}
#ggrid > a {
margin: unset;
padding: unset;
- }
+ }
- #ggrid>a>span {
+ #ggrid > a > span {
text-align: center;
padding: .2em .2em .15em .2em;
+ user-select: text;
}
+ /*cropped gallery*/
+ #ggrid.gallery {
+ gap: 2px 3px;
+ margin: .2em -.5em;
+ }
+
+ #ggrid.gallery a::before {
+ padding: .1em 0;
+ margin: .3em;
+ }
+
+ #ggrid.gallery a.img.thumbed {
+ max-height: none;
+ }
+
+ #ggrid.gallery a.img.thumbed span:not(.th_ext) {
+ display: none;
+ }
+
+ #ggrid.gallery a.img.thumbed .thumb,
+ #ggrid.gallery a.img.thumbed img {
+ max-height: none;
+ height: calc(var(--grid-sz) - 8px);
+ }
+}
+
+/*uncropped gallery*/
+#ggrid.gallery.nocrop {
+ text-align: center;
+ display: block;
+ margin: .2em -.5em;
}
+#ggrid.gallery.nocrop a::before {
+ padding: .1em 0;
+ margin: .3em;
+}
+
+#ggrid.gallery.nocrop a {
+ margin-bottom: .2em;
+}
+
+#ggrid.gallery.nocrop a .thumb,
+#ggrid.gallery.nocrop a img {
+ height: calc(var(--grid-sz) - 1.5em);
+}
+
+#ggrid.gallery.nocrop a.img.thumbed {
+ min-width: calc(var(--grid-sz) / 2);
+ width: auto;
+}
+
+#ggrid.gallery.nocrop a.img.thumbed .thumb {
+ height: var(--grid-sz);
+}
+
+#ggrid.gallery.nocrop a.img.thumbed img {
+ max-width: 100%;
+ height: var(--grid-sz);
+}
+
+#ggrid.gallery.nocrop a.img.thumbed span:not(.th_ext) {
+ display: none;
+}
+
+#ggrid.gallery.nocrop a.dir .thumb,
+#ggrid.gallery.nocrop a.dir img {
+ height: calc(var(--grid-sz) - 1.5em - 10px);
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+
@@ -3332,14 +4243,16 @@ html.d #treepar {
#ggrid>a:before,
#widget.anim,
+ #tree,
#u2tabw,
+ #up_quick,
.dropdesc,
.dropdesc b,
.dropdesc>div>div {
transition: none;
}
- #bbox-next,
- #bbox-prev,
+ #bbox-next a,
+ #bbox-prev a,
#bbox-btns {
transition: background-color .3s ease, color .3s ease;
}
@@ -3356,7 +4269,7 @@ html.ey {
--fg-max: #0000ff;
--fg-weak: #0000ff;
--bg: #c6c3c6;
- --bg-d3: #ff0;
+ --bg-d3: #7eb8f591;
--bg-d2: var(--w3);
--bg-d1: var(--bg);
--bg-u2: var(--bg);
@@ -3367,10 +4280,8 @@ html.ey {
--g-sel-bg: #00f;
--g-fsel-b1: #fff;
--row-alt: var(--w);
- --scroll: var(--silver);
--f-sel-sh: transparent;
--a: #000;
- --a-b: #fff;
--a-hil: #fff;
--a-h-bg: var(--bg);
--a-dark: var(--a);
@@ -3405,7 +4316,6 @@ html.ey {
--white: #fff;
--grey: grey;
--silver: silver;
- --transparent: transparent;
--shadow-color-1: #0a0a0a;
--shadow-color-2: #808080;
--border-dashed-black: 1px dashed var(--black);
@@ -3468,10 +4378,8 @@ html.ez {
--g-sel-bg: #00f;
--g-fsel-b1: #fff;
--row-alt: #555555;
- --scroll: #555555;
--f-sel-sh: transparent;
--a: var(--fg);
- --a-b: var(--fg);
--a-hil: var(--fg);
--btn-1h-bg: var(--bg-d3);
--a-h-bg: var(--bg);
@@ -3546,38 +4454,74 @@ html.ez {
html.e {
text-shadow: none;
+ --bg-u1: #0002;
+ --g-sel-fg: #fff;
+}
+html.e * {
+ --radius: 0;
+ border-radius: 0 !important;
+}
+html.e #ggrid > a.sel {
+ box-shadow: none;
+}
+html.e #files tr.sel a, #files tr.sel a.play {
+ color: #fff;
+}
+html.e tr.play td:nth-child(1) a {
+ background: var(--g-fsel-bg);
+ color: #fff;
+}
+html.e .pfp {
+ background: transparent;
+ color: var(--fg);
+}
+html.e .modalcontent {
+ border-color: var(--fg);
+}
+html.e .divider {
+ background: var(--fg);
+}
+html.e #s_nav .sub::before {
+ background: var(--fg);
+}
+html.e #h_music {
+ right: 0;
+ color: #fff;
}
+html.e #wfp {
+ padding-left: .3em;
+}
+html.e details[open] summary:hover,
html.e #files,
-html.e #u2conf input[type="checkbox"]:hover + label,
html.e .tgl.btn.on:hover,
html.e body {
background: var(--bg);
}
-html.e #pctl a,
+html.e summary,
+html.e .pctl a,
html.e #repl,
-html.e #u2conf a,
-html.e #u2conf input[type="checkbox"] + label,
html.e #wfp a,
html.e .btn,
html.e .eq_step,
html.e input[type="submit"] {
box-shadow: var(--shadow-outset);
- border-radius: var(--radius);
background: var(--bg);
border: 0;
}
+html.e #ops {
+ background: transparent;
+}
+html.e details[open] summary,
a.s0r,
html.e #ghead a.s0,
-html.e #u2conf input[type="checkbox"]:checked + label,
html.e .tgl.btn.on,
html.e input[type="submit"]:active {
box-shadow: var(--shadow-inset) !important;
}
+html.e summary:hover,
html.e #ops a:hover,
-html.e #pctl a:hover,
+html.e .pctl a:hover,
html.e #repl:hover,
-html.e #u2conf a:hover,
-html.e #u2conf input[type="checkbox"]:hover + label,
html.e #wfp a:hover,
html.e .btn:hover,
html.e .eq_step:hover,
@@ -3596,9 +4540,9 @@ input[type="text"]:focus {
html.e tr:focus {
box-shadow: none;
}
-html.e #pctl a:focus,
+html.e summary:focus,
+html.e .pctl a:focus,
html.e #repl:hover,
-html.e #u2conf input[type="checkbox"]:focus + label,
html.e #wfp a:focus,
html.e .btn:focus,
html.e .eq_step:focus {
@@ -3626,9 +4570,6 @@ html.e #files thead th {
#files td {
background: var(--w2);
}
-html.e #files tr {
- background-color: var(--black);
-}
html.e #srv_info span,
html.e label {
color: var(--btn-fg) !important;
@@ -3637,15 +4578,29 @@ html.e #acc_info {
background: var(--transparent);
color: var(--white);
height: 2em;
- left: 1em;
+ right: 1em;
width: fit-content;
}
html.e #acc_info,
html.e #ops,
html.e #srv_info {
- display: flex;
align-items: center;
}
+html.e .overlay_plus {
+ margin-top: -.3em;
+ text-shadow: none;
+}
+html.e #spaceUsed_bar {
+ background: var(--ttlbar);
+}
+html.e #h_up2k,
+html.e #up_status_h,
+html.e #h_cfg {
+ color: #fff;
+}
+html.e .modalheader:hover {
+ background: var(--ttlbar);
+}
html.e #acc_info span.warn,
html.e #acc_info a {
color: var(--white);
@@ -3676,12 +4631,6 @@ html.e #u2cards a.act {
}
html.e #u2btn {
border: var(--border-dashed-black);
- border-radius: var(--border-radius);
- transform: translateY(30%);
-}
-html.e #ops,
-html.e #ops a {
- border-radius: var(--radius);
}
@media only screen and (max-width: 600px) {
html.e #acc_info {
@@ -3689,9 +4638,9 @@ html.e #ops a {
color: var(--white);
height: fit-content;
align-items: center;
- top: 3.2em;
- right: 1em;
- left: auto;
+ bottom: 9.2em;
+ left: 1em;
+ right: auto;
display: flex;
gap: 0.2em;
}
@@ -3700,14 +4649,23 @@ html.e #ops a {
}
}
html.e #ops {
- background: var(--ttlbar);
- /*HC*/
- box-shadow: inset 0-1px grey, inset 0-2px var(--shadow-color-1);
- height: 2em;
- gap: 0.6em;
- padding: 0.2em;
- flex-direction: row-reverse;
- margin-bottom: 1.2em;
+ /*HC*/
+ gap: 0.6em;
+ font-size: larger;
+ padding: 0;
+ height: 2em;
+}
+html.e #srchfolder_div {
+ left: 2em;
+ top: -.1em;
+ bottom: -.6em;
+}
+html.e #qs_btns {
+ right: 0.7em;
+ top: .3em;
+}
+html.e .under {
+ border: var(--fg) solid 1px;
}
html.e #srch_form,
html.e .opbox {
@@ -3715,10 +4673,13 @@ html.e .opbox {
padding-top: 1em;
max-width: 100vw;
}
+html.e #srv_name {
+ padding-top: .2em;
+ margin-left: 1.4em;
+}
html.e #ghead,
html.e #ops a {
align-items: center;
- display: flex;
}
html.e #ops a {
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
@@ -3726,13 +4687,11 @@ html.e #ops a {
padding: 0;
box-shadow: var(--shadow-outset);
background: var(--bg);
- aspect-ratio: 1/1;
justify-content: center;
font-size: 1.25em;
- z-index: 4;
}
-html.e #blogout:focus,
-html.e #ops a:focus {
+html.e #blogout:focus-visible,
+html.e #ops a:focus-visible {
outline: 1px dashed var(--w) !important;
}
@@ -3740,20 +4699,13 @@ html.e #blogout:hover {
text-decoration: underline;
}
-html.e #ops > a:not(:first-child).act {
- height: 1.4em;
- width: 1.4em;
- padding-bottom: 0.3em;
- margin-top: 0.3em;
+html.e #ops a.act {
+ border-bottom: 0;
+ margin-top: -.6em;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: var(--shadow-inset-left), var(--shadow-inset-top),
var(--shadow-inset-right);
- z-index: 6;
-}
-html.e #ops a.act {
- box-shadow: var(--shadow-inset);
- border-bottom: 0;
}
html.e a:active {
border: 0;
@@ -3762,32 +4714,17 @@ html.e :focus,
html.e :focus + label {
border: 0 !important;
outline-offset: 1px;
- border-radius: var(--radius) !important;
box-shadow: inherit;
}
-html.e #opa_x {
- text-shadow: 0 0 0 var(--transparent) !important;
- color: var(--bg) !important;
- display: flex;
-}
-html.e #opa_x:before {
- content: "⨯";
- color: var(--fg) !important;
- margin-top: -0.1em;
- font-size: 1.75em;
- position: absolute;
-}
html.e .opbox {
- margin: -1.2em 0 0;
+ margin: -.3em 0 0;
box-shadow: var(--shadow-inset-bottom), var(--shadow-inset-left),
var(--shadow-inset-right);
border-radius: var(--radius);
- z-index: 5;
background: var(--bg);
}
html.e #srch_form {
margin: 0;
- border-radius: var(--radius);
}
html.e #op_unpost {
max-width: 100vw;
@@ -3837,7 +4774,6 @@ html.e select {
box-shadow: var(--shadow-input) !important;
box-sizing: border-box;
padding: 3px 4px;
- border-radius: var(--radius);
border: 0;
}
html.e #gfiles {
@@ -3853,20 +4789,20 @@ html.e #ggrid {
box-shadow: var(--shadow-input);
padding: 1.5em;
margin: 0;
- overflow-x: scroll;
+ overflow-x: auto;
}
html.e #ghead {
margin: 0;
justify-content: flex-end;
gap: 0.4em;
- padding: 0;
- overflow: auto;
- top: 0px;
- border-radius: 0px;
+ padding-top: .2em;
+ top: 2.3em;
}
html.e #ghead a {
margin: 0;
- border-radius: var(--radius);
+}
+html.e #treeToggleBtn {
+ margin: 0;
}
html.e ::-webkit-scrollbar,
html.e::-webkit-scrollbar {
@@ -3880,7 +4816,7 @@ html.e::-webkit-scrollbar-button,
html.e::-webkit-scrollbar-thumb {
width: 16px !important;
height: 16px !important;
- background: var(--scroll) !important;
+ background: var(--a) !important;
/*HC*/
box-shadow: var(--shadow-outset);
border: 1px solid !important;
@@ -3930,8 +4866,9 @@ html.e #tree {
}
html.e #tree {
background: var(--bg);
- padding-left: 0.4em;
+ /* padding-left: 0.4em; */
padding-top: 0;
+ padding-bottom: 0;
margin-left: var(--negative-space);
}
html.e.noscroll #tree {
@@ -3942,10 +4879,8 @@ html.e.noscroll #tree {
html.e #treeh {
background: var(--bg);
box-shadow: var(--shadow-outset-top), var(--shadow-outset-bottom);
- width: calc(1.5em + var(--nav-sz) - var(--sbw));
height: 2.4em;
border: none;
- top: -2px;
display: flex;
align-items: center;
gap: 0.6em;
@@ -3966,7 +4901,6 @@ html.e .ntree a:first-child {
aspect-ratio: 1/1;
text-align: center;
align-content: center;
- border-radius: var(--radius) !important;
padding: 0.057em;
border: 1px solid var(--black);
}
@@ -3982,8 +4916,9 @@ html.e #treeul {
border: 0 !important;
position: static;
margin: 0 !important;
- min-height: 100%;
+ min-height: calc(100% - 3em);
height: max-content;
+ width: calc(100% - 1.1em);
}
html.e .ntree a:last-of-type:before {
content: "📁";
@@ -4002,7 +4937,6 @@ html.e #tree li {
html.e .ntree a:hover {
outline-offset: -2px;
color: var(--fg);
- border-radius: var(--radius) !important;
}
html.e #treepar {
width: calc(-1em + var(--nav-sz) - var(--sbw));
@@ -4013,6 +4947,9 @@ html.e #treepar {
border-bottom: var(--border-dashed-black);
margin-left: calc(2.1em - (1em - var(--negative-space))) !important;
}
+html.e #wtico,
+html.e #ghead,
+html.e #op_acc,
html.e #path,
html.e #widgeti,
html.e #wtoggle,
@@ -4030,52 +4967,51 @@ html.e #docul {
border-left: 0 !important;
margin-left: 0 !important;
}
+html.e #spaceFree {
+ background: var(--inset-bg);
+}
+html.e #tree_footer {
+ background: transparent;
+}
html.e #wrap {
- transform: translateX(calc((var(--negative-space) * 2) - 1.2em));
- padding-right: var(--negative-space);
- position: relative;
- margin-right: calc((var(--negative-space) * 2) - 1.2em);
- margin-top: var(--negative-space);
- margin-left: 1.2em;
- /*overflow-x: auto; fix for OOB table when screen space is limited (mobile), but removes sticky header*/
+ padding: 0;
+}
+html.e #pathBar {
+ padding: 0;
+ margin: 0;
+ top: 0;
+ background: var(--ttlbar);
+}
+html.e #pathBar.thin #actionsArea {
+ top: 0 !important;
}
html.e input[type="radio"] {
accent-color: #232323;
}
html.e #path {
- width: calc(100% - 0.4em);
- display: flex;
- align-items: center;
- margin: 0;
- padding: 0.2em;
- overflow-x: auto;
+ background: var(--bg-u2);
+ margin-right: 0;
+ width: auto;
}
html.e #path i {
border: 1px solid var(--w);
border-color: var(--w);
- margin: 0;
- border-width: 0.1em 0.1em 0 0;
- height: 0.5em;
- width: 0.5em;
-}/*
-html.e #hovertree:after {
- color: red;
- content: "BUGGY";
-html.ez #hovertree:after {
- color: rgb(255 98 98);
- content: "BUGGY";
-}
-}*/
-html.e #widget {
- box-shadow: 0 0;
- border: 0 !important;
+ border-width: 0 0.1em 0 0;
+ transform: none;
+ width: 1.8em;
+ box-shadow: inset -1px 0 var(--shadow-color-1), inset -2px 0 var(--grey);
+}
+html.e #path *:last-child:is(i) {
+ display: none;
+}
+html.e .dir span::before {
+ content: "📁";
}
-html.e #wtico,
html.e #zip1 {
box-shadow: 0 0 !important;
}
-html.e #wtgrid {
- top: -0.09em;
+html.e #wtc {
+ top: 0.2em;
}
html.e #wfs,
html.e #wm3u,
@@ -4088,21 +5024,11 @@ html.e #wfm.act + #wzip1 + #wzip + #wnp {
border-left-width: 1px;
}
html.e #barpos {
- /* border-radius: var(--radius); */
box-shadow: var(--shadow-inset);
}
html.e #goh + span {
border-left: 0.1em solid var(--bg-u5);
}
-html.e #wfp {
- margin: var(--negative-space);
- font-size: 0;
- display: inline-block;
-}
-html.e #wfp a {
- font-size: large;
- display: inline-block;
-}
html.e #repl {
font-size: large;
padding: 0.33em;
@@ -4112,7 +5038,7 @@ html.e #repl {
html.e #epi {
text-align: center;
text-wrap-mode: nowrap;
- margin: 0px;
+ margin: .5em;
}
html.e #epi.logue:not(.mdo) {
@@ -4128,23 +5054,33 @@ html.e #doc {
box-shadow: var(--shadow-inset);
background: var(--inset-bg);
margin: 0.2em;
- border-radius: var(--radius);
}
html.e #detree {
padding: 0px;
}
+html.e #wtc {
+ margin: -.2em 0 -.5em .1em;
+}
+html.e #actionsArea {
+ margin-right: .5em;
+}
+
#rcm {
- position: absolute;
+ position: fixed;
+ overflow-y: auto;
display: none;
background: #fff;
- background: var(--bg);
- border: 1px solid var(--bg-u3);
+ background: var(--bg-u2);
+ border: 1px solid var(--bg-u5);
outline: none;
- border-radius: .3rem;
+ border-radius: var(--radius);
box-shadow: 0 0 .3rem var(--bg-d3);
- z-index: 3;
+ z-index: 60;
+}
+#rcm.large a {
+ padding: 1em;
}
#rcm > * {
@@ -4152,7 +5088,7 @@ html.e #detree {
}
#rcm > a {
- padding: .2rem .3rem;
+ padding: .3rem;
}
#rcm > .hide {
@@ -4165,7 +5101,12 @@ html.e #detree {
#rcm > .sep {
margin: 0 .2rem;
- border-bottom: 1px solid var(--a-gray);
+ border-bottom: 1px solid var(--bg-u5);
+}
+
+#rcm_tmp {
+ min-height: 5em;
+ max-width: var(--grid-sz);
}
#tempname {
@@ -4175,7 +5116,7 @@ html.e #detree {
box-shadow: 0 0 2px var(--txt-sh);
border-bottom: 1px solid #999;
border-color: var(--a);
- border-radius: .2em;
+ border-radius: var(--radius);
padding: .2em .3em;
}
@@ -4188,3 +5129,560 @@ html.e #detree {
pointer-events: none;
z-index: 99;
}
+
+#spaceFree, #rtt_latency {
+ color: var(--fg);
+ text-align: left;
+ padding: 2px;
+ font-size: small;
+ cursor: default;
+ pointer-events: all;
+ max-width: max-content;
+ background: #fff;
+ background: var(--transparent);
+}
+#rtt_latency {
+ opacity: .5;
+}
+#spaceUsed_bar, #spaceTotal_bar{
+ height: .3em;
+ border-radius: 5px;
+ border-radius: var(--radius);
+}
+#spaceUsed_bar{
+ background: rgb(85, 144, 255);
+ background: linear-gradient(to right, transparent, var(--a-dark), var(--a));
+}
+#spaceTotal_bar {
+ position: relative;
+ margin-bottom: .5em;
+ background: #ccc;
+ background: var(--bg-u1);
+}
+#spaceMax {
+ position: absolute;
+ background: var(--a);
+ right: 0;
+ top: 0;
+ width: .3em;
+ height: .3em;
+ border-radius: var(--radius);
+}
+#tree_footer {
+ width: 0;
+ display: none;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ padding: 1em;
+ pointer-events: none;
+ transition: width .05s;
+ background: linear-gradient(to top, var(--bg-u2), color-mix(in oklab, var(--bg-u2) 80%, transparent), transparent);
+}
+.popup_button {
+ border-radius: var(--radius);
+ margin: 0;
+ color: var(--btn-1-fg);
+ text-align: left;
+ text-shadow: none;
+}
+#acc_button p{
+ margin: 0;
+}
+#acc_button {
+ margin: 0;
+ cursor: pointer;
+ display: flex;
+}
+#op_acc {
+ font-size: medium;
+ margin-top: .3em;
+ text-align: right;
+ left: auto;
+}
+#opa_acc label {
+ cursor: pointer !important;
+}
+#ops input[type=submit],
+#ops #goh {
+ font-size: medium;
+ padding-bottom: .2em;
+}
+
+.popup {
+ display: none;
+ width: fit-content;
+ background: #222;
+ background: var(--bg-u2);
+ border: 1px solid var(--bg-u3);
+ box-shadow: 0 .5em 1em var(--txt-sh);
+ text-align: center;
+ border-radius: 5px;
+ border-radius: var(--radius);
+ padding: .5em;
+ position: absolute;
+ z-index: 12;
+ bottom: 2.5em;
+}
+.under {
+ top: calc(100% + .2em);
+ left: 0;
+ bottom: auto;
+ right: 0;
+ text-align: left;
+ width: auto;
+}
+#accessType {
+ font-size: small;
+}
+
+#srchfolder_div:focus-within .popup {
+ display: block;
+}
+/* has to be separate because IE will ignore the whole rule if it can't do focus within */
+.popup.act {
+ display: block;
+}
+
+.overlay_plus{
+ position: absolute;
+ margin: -.5em 0 0 .8em;
+ color: var(--fg);
+ text-shadow: -1px 1px 1px var(--bg-max);
+}
+
+
+
+
+html.f {
+ --a: #e3f903;
+ --bg-u2: #191919;
+ --radius: 4px;
+ --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);
+ --font-main: 'orbitron', sans-serif;
+ --font-mono: 'orbitron', monospace;
+ font-family: 'orbitron', sans-serif;
+ font-optical-sizing: auto;
+ letter-spacing: .05em;
+}
+
+html.f #path i {
+ border-color: var(--a);
+ background: none;
+}
+html.f #spaceUsed_bar {
+ background: repeating-linear-gradient(-45deg, var(--a), var(--a) 6px, transparent 6px, transparent 12px);
+}
+html.f #spaceTotal_bar {
+ border: var(--a) solid 1px;
+}
+html.f #spaceMax {
+ display: none;
+}
+html.f #spaceFree {
+ font-size: .8em;
+}
+html.f #srv_name {
+ padding-top: .3em;
+}
+html.f #gridsel {
+ content: "m.-select";
+}
+html.f #ggrid > a::before {
+ background: transparent;
+}
+html.f #ggrid > a::before,
+html.f #ggrid > a:focus-visible::before,
+html.f #ggrid > a:hover::before {
+ font-size: 1.7em;
+ padding: .3em .2em;
+ margin: 0;
+}
+html.f #ggrid > a.au::before {
+ padding: .4em .2em .4em .3em;
+}
+html.f #ggrid > a:focus-visible .imgcontainer::before,
+html.f #ggrid > a:hover .imgcontainer::before {
+ border-color: var(--g-f-bg) transparent transparent var(--g-f-bg);
+}
+html.f #ggrid > a.sel:focus-visible .imgcontainer::before,
+html.f #ggrid > a.sel:hover .imgcontainer::before {
+ border-color: var(--g-fsel-bg) transparent transparent var(--g-fsel-bg);
+}
+/* #wrap:not(.thin) .ghead::after, */
+html.f .dir.thumbed .imgcontainer::before,
+html.f .au.thumbed:not(.play) .imgcontainer::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ border: var(--bg-u2) solid;
+ z-index: 3;
+ border-width: 4em 4em 0 0;
+ border-color: var(--bg-u2) transparent transparent var(--bg-u2);
+ margin: 0 2px;
+}
+html.f #ggrid > a.play::before {
+ background: var(--a);
+}
+html.f #ggrid > a.play span {
+ color: var(--fg);
+}
+html.f #ggrid > a::before {
+ text-shadow: none !important;
+}
+html.f #ggrid > a.sel .imgcontainer::before {
+ border-color: var(--g-sel-bg) transparent transparent var(--g-sel-bg);
+}
+html.f #ggrid > a.sel img {
+ box-shadow: none;
+}
+html.f .close:not(:hover),
+html.f #s_nav .btn:not(:hover),
+html.f #wfp .btn:not(:hover),
+html.f #treeToggleBtn:not(:hover):not(.on) {
+ background: var(--bg-u2);
+}
+html.f #s_nav .btn {
+ border-color: var(--a);
+ border-width: 0 0 0 2px;
+}
+html.f #s_nav .sub::before {
+ background: var(--bg-u2);
+}
+html.f #pctl {
+ margin-top: .1em;
+}
+html.f a {
+ /* text-decoration: underline; */
+ text-decoration-color: color-mix(in oklab, currentColor 20%, transparent);
+}
+html.f .ntree a + a {
+ line-height: 1.45em;
+}
+html.f #tree .hl {
+ width: calc(100% - 4.2em);
+}
+html.f #tree .hl::after {
+ content: "";
+ right: .5em;
+ left: 0;
+ margin-top: -.3em;
+ margin-bottom: -2px;
+ z-index: -1;
+ position: absolute;
+ border: solid;
+ border-width: 2.08em 2.08em 0 0;
+ border-color: var(--btn-1-bg) transparent transparent var(--btn-1-bg);
+}
+html.f #tree .hl:hover::after {
+ border-color: var(--btn-1h-bg) transparent transparent var(--btn-1h-bg);
+}
+html.f #wrap:not(.thin) .ghead {
+ max-width: max-content;
+}
+
+html.f #wrap:not(.thin) .ghead::after {
+ left: calc(100% - 2px);
+ border-width: 2.7em 2.7em 0 0;
+}
+html.f #s_list h3 {
+ background: linear-gradient(35deg, var(--bg-u2) 60%, var(--bg) 75%, var(--a2) 85%, var(--fg-weak) 90%);
+}
+html.f .close {
+ margin: 1px;
+}
+html.f .modalheader {
+ background: var(--a);
+ text-shadow: none;
+ color: var(--bg-u2);
+ padding-top: .5em;
+ padding-bottom: .5em;
+}
+html.f #treeToggleBtn {
+ padding: .07em;
+}
+html.f #widget:not(.thin) #pvol {
+ border-color: var(--a-dark);
+}
+html.f #h_music {
+ right: 0;
+}
+html.f .winbtn {
+ margin: .1em;
+}
+html.f #u2tab tbody tr:hover td {
+ background: transparent;
+}
+html.f #op_unpost a {
+ border-bottom: solid 1px var(--a);
+}
+ html.f #op_unpost a:not(:hover) {
+ color: color-mix(in oklab, var(--a), var(--fg));
+ }
+html.f #u2c3t span {
+ font-size: .8em;
+}
+html.f #u2cards span {
+ font-size: .8em;
+}
+html.f #goh {
+ font-size: 1.2em;
+}
+html.f #gridzoom a,
+html.f #gridchop a,
+html.f #twig, html.f #twobytwo,
+html.f #nthread_sub, html.f #nthread_add {
+ font-family: monospace;
+ font-size: 1.6em;
+}
+html.f #qs_btns a {
+ margin: .1em 0;
+ padding: .3em;
+}
+html.f .unmodal,
+html.f #wrap > .opview {
+ margin-left: -.6em;
+ margin-right: -.6em;
+ border-radius: 0 0 var(--radius) var(--radius);
+}
+html.f .th_ext .inner {
+ font-size: .7em;
+}
+
+html.fz {
+ --bg: #2e258c;
+ --bg: hsl(from var(--a) calc(h * 2.5 + 85) calc(s * .6) calc(l * .7));
+ --a2: hsl(from var(--bg) calc(h - 40) calc(s * 1.2) calc(l * 1.4));
+}
+html.fz #wrap::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+ opacity: .4;
+ filter: brightness(50%) contrast(300%) saturate(0);
+ z-index: -1;
+}
+html.fz #srv_name {
+ padding-top: .5em;
+}
+html.fz #up_status_h {
+ color: var(--bg-u2);
+ text-shadow: none;
+ font-size: large;
+}
+html.fz .ghead,
+html.fz #path,
+html.fz #ops {
+ border: var(--btn-bb);
+}
+html.fz .ghead {
+ margin-left: -1px;
+}
+html.fz #wfp .btn {
+ padding: .2em .4em;
+}
+
+html.fy {
+ --a: #305797;
+ --fg: #f3f3f3;
+ --fg-weak: var(--a);
+ --a2: hsl(from var(--a) calc(h + 190) calc(s * 1.1) calc(l * .5));
+ --btn-bg: var(--fg);
+ --scrl-hint: var(--bg-u2);
+ --tree-bg: var(--bg-u2);
+}
+html.fy * {
+ box-shadow: none !important;
+ text-shadow: none !important;
+ /* transition: all .15s; */
+}
+
+html.fy #wrap:not(.thin) .ghead {
+ top: 3.4em;
+}
+html.fy #blogout {
+ color: var(--fg) !important;
+}
+html.fy #blogout:hover {
+ color: var(--a) !important;
+}
+html.fy select,
+html.fy input,
+html.fy .setting {
+ color: var(--bg-u2) !important;
+}
+html.fy #s_list h3 {
+ background: linear-gradient(45deg, var(--a) calc(100% - 3em), #ccc calc(100% - 3em), #ccc calc(100% - 2em), transparent calc(100% - 2em));
+}
+html.fy #up_status_h,
+html.fy .modalheader {
+ border-bottom: #f3f3f3 solid 1px;
+ color: #f3f3f3;
+}
+html.fy #up_status_h {
+ border: none;
+ font-size: large;
+}
+html.fy #reloc_up:not(:hover) {
+ color: #f3f3f3;
+}
+html.fy .close:not(:hover) {
+ background: none;
+ border-color: transparent;
+ font-weight: bolder;
+ color: #f3f3f3;
+}
+html.fy .close:hover {
+ background: rgb(207, 22, 28);
+ color: #f3f3f3;
+}
+html.fy #up2k,
+html.fy #files {
+ --fg: #191919;
+ color: var(--fg);
+ --chk-fg: var(--fg);
+}
+html.fy #path i {
+ border-color: var(--fg);
+}
+
+html.fy #path a {
+ padding-top: .7em;
+}
+
+html.fy #path a:hover {
+ color: var(--a);
+}
+
+html.fy #wfs,
+html.fy #tree ul a.par {
+ color: var(--fg);
+}
+html.fy #treeToggleBtn {
+ padding: .2em;
+ margin: 0 !important;
+ border: none;
+}
+html.fy #srv_name {
+ line-height: 1.4em;
+}
+html.fy #pathBar,
+html.fy .opbox:not(#op_bup) {
+ background: var(--bg-u2);
+ border-bottom: var(--btn-bb);
+}
+html.fy #pathBar {
+ padding: 0;
+}
+html.fy #ops,
+html.fy #path,
+html.fy .ghead {
+ border: var(--btn-bb);
+}
+html.fy #actionsArea,
+html.fy #ops,
+html.fy #path,
+html.fy #wfp,
+html.fy #wfp .btn {
+ margin: 0;
+ border: none;
+}
+html.fy #wfp.shifted {
+ margin-left: 2.5em;
+}
+html.fy #wfp .btn {
+ padding: .3em;
+}
+html.fy #bbox-overlay #bbox-next .btn,
+html.fy #bbox-overlay #bbox-prev .btn,
+html.fy #bbox-btns .btn:not(.on) {
+ background: var(--bg-u2);
+}
+html.fy #tth {
+ display: none;
+}
+html.fy #wrap {
+ background-size: 20px 20px;
+ background-image: radial-gradient(color-mix(in oklab, var(--bg-u2) 20%, transparent) 1px, transparent 1px);
+}
+html.fy .modalheader::after {
+ position: absolute;
+ border: solid;
+ border-color: transparent transparent var(--bg) transparent;
+ border-width: 10px;
+ content: "";
+ width: 30%;
+ margin-bottom: -1.2em;
+ right: 5.7em;
+}
+html.fy #ops {
+ height: auto;
+}
+html.fy #ops a {
+ padding: .29em .4em;
+}
+
+html.fy #ops a:not(:hover):not(.act) {
+ color: var(--fg);
+}
+html.fy #actionsArea {
+ top: 0 !important;
+}
+html.fy #wtoggle {
+ margin: 0;
+ border-bottom: none;
+ border-radius: var(--radius) 0 0 0;
+}
+html.fy #up_quick {
+ margin: 0;
+ border-radius: 0;
+}
+html.fy #up_quick_btn {
+ border-radius: 0;
+ border-width: 1px 0 0 0;
+ margin: 0;
+}
+html.fy #wtico {
+ line-height: 1.1em;
+ border-radius: 0;
+}
+html.fy #wtoggle,
+html.fy #wtoggle * {
+ line-height: .99em;
+}
+html.fy #wrap:before {
+ content: "";
+ width: 500px;
+ height: 500px;
+ border: var(--a) solid 10px;
+ border-radius: 100%;
+ position: fixed;
+ z-index: -1;
+ right: 10px;
+ filter: blur(3px);
+ opacity: .9;
+}
+html.fy #qs_btns a {
+ color: var(--bg-u2);
+}
+html.fy .winbtn:not(:hover) {
+ background: none;
+ border-color: transparent;
+}
+html.fy #doc {
+ background: var(--bg);
+}
+html.fy .logue {
+ color: var(--a);
+}
+
+html.f.unfun #ops a {
+ padding: .5em;
+}
+html.f.unfun #srchfolder_div {
+ left: 6.7em;
+}
+
+
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index a5b412b0..502b9055 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -16,121 +16,274 @@
-
+
-
- {%- if have_tags_idx %}
-
- {%- else %}
-
- {%- endif %}
-
-
+
+
+
+
+
+
-
+
-
-
-
-
+
-
-
-
+
+
+
+
+
+
+
+ {%- for n in vpnodes %}
+ {{ n[1] }}
+ {%- endfor %}
+
-
+
+
-
- 🌲
- {%- for n in vpnodes %}
- {{ n[1] }}
- {%- endfor %}
-
-
+
+ {%- if have_tags_idx %}
+
+ {%- else %}
+
+ {%- endif %}
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {%- if doc %}
-
- {%- else %}
-
- {%- endif %}
-
{{ "" if sb_lg else logues[0] }}
+ {%- if doc %}
+
+ {%- else %}
+
+ {%- endif %}
+
+
{{ "" if sb_lg else logues[0] }}
+
+
+
+
+
+
-
-
-
- c
- File Name
- Size
- {%- for k in taglist %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ !
+ File Name
+ Size
+ {%- for k in taglist %}
{%- if k.startswith('.') %}
- {{ k[1:] }}
+ {{ k[1:] }}
{%- else %}
- {{ k[0]|upper }}{{ k[1:] }}
+ {{ k[0]|upper }}{{ k[1:] }}
{%- endif %}
- {%- endfor %}
- T
- Date
-
-
-
+ {%- endfor %}
+ Ext
+ Date
+
+
+
-{%- for f in files %}
-{{ f.lead }} {{ f.name|e }} {{ f.sz }}
-{%- if f.tags is defined %}
- {%- for k in taglist %}{{ f.tags[k]|e }} {%- endfor %}
-{%- endif %}{{ f.ext }} {{ f.dt }}
-{%- endfor %}
-
-
-
+ {%- for f in files %}
+
+ {{ f.lead }}
+ {{ f.name|e }}
+ {{ f.sz }}
+ {%- if f.tags is defined %}
+ {%- for k in taglist %}
+ {{ f.tags[k]|e }} {%- endfor %}
+ {%- endif %}
+ {{ f.ext }}
+ {{ f.dt }}
+
+ {%- endfor %}
- {{ "" if sb_lg else logues[1] }}
+
+
-
+
{{ "" if sb_lg else logues[1] }}
-
π
+
π
-
+
-
{{ srv_info }}
+
{{ srv_info }}
+
{%- endif %}
-
-
+
{%- if js %}
{%- endif %}