083a2e1db8
A first Pithos app for phones. It runs the browser app in a WebView and answers the page's own files from the APK under the gateway's origin, so the page stays the same-origin client it was designed as and the files are still encrypted and decrypted in the page. What the phone adds: "Save to Pithos" in other apps' share menus (the files wait in a bar until a folder is open), downloads written to the Downloads folder, the system file picker for uploads, and outside links opened in the phone's browser. The browser app learns the two hooks (window.PithosAndroid) and says plainly when a browser is too old to sign in, instead of a bare "NotSupportedError".
74 lines
5.3 KiB
CSS
74 lines
5.3 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}}
|
|
.shared-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
|
|
.shared-bar span{flex:1;min-width:12rem}
|