b8ec745a43
A page served by the gateway that signs in with the Pithos key file (Ed25519 in Web Crypto) or an Export JSON S3 key, then browses, views, downloads, uploads, renames and deletes, encrypting and decrypting in the page with the same formats as the desktop. Checked against a local gateway and real s3d: files the desktop encrypted open byte-identical in the browser, and browser uploads open in the desktop client; the server only ever holds encrypted names. Remember on this device keeps the key sealed with a passphrase in IndexedDB.
72 lines
5.1 KiB
CSS
72 lines
5.1 KiB
CSS
:root{--bg:#0f1214;--panel:#161b1e;--panel2:#1c2226;--line:#263036;--ink:#e6ebe8;--mut:#9aa5a0;--acc:#3ddc97;--err:#ff7a7a;--warn:#ffc75f;color-scheme:dark}
|
|
@media (prefers-color-scheme:light){:root{--bg:#f6f8f7;--panel:#fff;--panel2:#eef2f0;--line:#dde3e0;--ink:#13201a;--mut:#5d6b65;--acc:#1e9e6a;--err:#c0392b;--warn:#9a6b00;color-scheme:light}}
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
|
|
a{color:var(--acc)}
|
|
[hidden]{display:none!important}
|
|
.muted{color:var(--mut)}
|
|
.small{font-size:13px}
|
|
.error{color:var(--err)}
|
|
.top{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
|
|
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:17px;margin-right:auto}
|
|
.brand img{width:26px;height:26px}
|
|
.who{color:var(--mut);font-size:13px;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;text-decoration:none}
|
|
.btn:hover{background:var(--panel2)}
|
|
.btn.primary{background:var(--acc);border-color:var(--acc);color:#06231a;font-weight:600}
|
|
.btn.small{padding:4px 10px;font-size:13px}
|
|
.btn.danger{color:var(--err)}
|
|
.btn:disabled{opacity:.6;cursor:default}
|
|
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
|
|
.narrow{max-width:560px;margin:32px auto}
|
|
.signin{padding:0 16px}
|
|
.signin h1{font-size:22px;margin:0 0 6px}
|
|
.stack{display:flex;flex-direction:column;gap:12px}
|
|
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
|
|
.field{display:flex;flex-direction:column;gap:4px;font-size:14px}
|
|
.field span{color:var(--mut)}
|
|
input[type=password],input[type=text],textarea{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;width:100%}
|
|
textarea{font-family:ui-monospace,Consolas,monospace;font-size:13px}
|
|
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 16px;border:2px dashed var(--line);border-radius:12px;cursor:pointer;margin:16px 0 10px;text-align:center}
|
|
.drop.over,.drop:focus{border-color:var(--acc);outline:none}
|
|
.paste{margin-bottom:10px}
|
|
.paste summary{cursor:pointer;color:var(--mut);font-size:14px}
|
|
.paste textarea{margin-top:8px}
|
|
.check{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:14px}
|
|
#pass-row{margin-bottom:12px}
|
|
#go{width:100%;justify-content:center;padding:10px}
|
|
.help{margin-top:16px;font-size:14px;border-top:1px solid var(--line);padding-top:8px}
|
|
.help ul{padding-left:18px;margin:6px 0}
|
|
.app{max-width:1100px;margin:0 auto;padding:12px 16px 40px}
|
|
.crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:4px 0 12px;font-size:15px}
|
|
.crumbs a{color:var(--ink);text-decoration:none;padding:2px 6px;border-radius:6px}
|
|
.crumbs a:hover{background:var(--panel2)}
|
|
.crumbs .sep{color:var(--mut)}
|
|
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
|
|
.spacer{flex:1}
|
|
.list{padding:0;overflow:hidden}
|
|
.list.over{outline:2px dashed var(--acc);outline-offset:-6px}
|
|
table.files{width:100%;border-collapse:collapse}
|
|
.files th{text-align:left;font-weight:500;color:var(--mut);font-size:13px;padding:10px 14px;border-bottom:1px solid var(--line)}
|
|
.files td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
|
|
.files tr:last-child td{border-bottom:0}
|
|
.files tr.clickable{cursor:pointer}
|
|
.files tr.clickable:hover td{background:var(--panel2)}
|
|
.files .name{display:flex;gap:10px;align-items:center;min-width:0}
|
|
.files .name .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.files .ico{width:22px;text-align:center;flex:none}
|
|
.files .num{white-space:nowrap;color:var(--mut);font-size:13px}
|
|
.files .actions{text-align:right;white-space:nowrap}
|
|
.lock{font-size:12px;color:var(--warn)}
|
|
.empty{padding:40px 16px;text-align:center;color:var(--mut)}
|
|
.foot{text-align:center;margin-top:20px}
|
|
.viewer{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:20;display:flex;flex-direction:column}
|
|
.viewer-bar{display:flex;gap:8px;align-items:center;padding:10px 14px;color:#e6ebe8}
|
|
.viewer-body{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px}
|
|
.viewer-body img,.viewer-body video{max-width:100%;max-height:100%}
|
|
.viewer-body pre{background:#161b1e;color:#e6ebe8;padding:16px;border-radius:10px;max-width:100%;max-height:100%;overflow:auto;white-space:pre-wrap;word-break:break-word}
|
|
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:30;max-width:min(420px,calc(100vw - 32px))}
|
|
.toast{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:14px}
|
|
.toast.err{border-color:var(--err);color:var(--err)}
|
|
progress{width:100%;height:6px;accent-color:var(--acc)}
|
|
@media (max-width:640px){.files .hide-sm{display:none}.files td,.files th{padding:9px 10px}.who{display:none}}
|