Zero-copy FTP/HTTP Daemon compatible with all POSIX systems
| 1 | *{margin:0;padding:0;box-sizing:border-box} |
| 2 | body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0f1216;color:#e7edf5;min-height:100vh} |
| 3 | .topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#171b21;border-bottom:2px solid #2b8cff} |
| 4 | .brand-title{font-weight:700;font-size:16px} |
| 5 | .brand-subtitle{margin-top:2px;font-size:12px;color:#9fb0c3;max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} |
| 6 | .status-pill{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid #2a3441;background:#1c222a} |
| 7 | .status-ok{color:#2ecc71} |
| 8 | .status-bad{color:#ff6b5f} |
| 9 | .toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#171b21;border-bottom:1px solid #2a3441} |
| 10 | .btn{border:1px solid #2a3441;background:#1c222a;color:#e7edf5;border-radius:10px;padding:8px 10px;font-size:13px;cursor:pointer} |
| 11 | .btn:active{transform:translateY(1px)} |
| 12 | .spacer{flex:1} |
| 13 | .search{width:60vw;max-width:340px;border:1px solid #2a3441;background:#0f1216;color:#e7edf5;border-radius:10px;padding:8px 10px;font-size:13px;outline:none} |
| 14 | .breadcrumb{display:flex;gap:6px;padding:10px 16px;overflow-x:auto;border-bottom:1px solid #2a3441} |
| 15 | .crumb{border:1px solid #2a3441;background:#171b21;color:#9fb0c3;border-radius:999px;padding:4px 8px;font-size:12px;cursor:pointer;white-space:nowrap} |
| 16 | .crumb:hover{color:#e7edf5;border-color:#2b8cff} |
| 17 | .content{padding:14px 16px} |
| 18 | .file-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} |
| 19 | .card{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #2a3441;background:#171b21;border-radius:14px;cursor:pointer} |
| 20 | .card:hover{border-color:#2b8cff;background:#1c222a} |
| 21 | .icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(43,140,255,.15);border:1px solid rgba(43,140,255,.25);font-size:18px} |
| 22 | .meta{min-width:0;flex:1} |
| 23 | .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} |
| 24 | .sub{margin-top:4px;font-size:12px;color:#9fb0c3;display:flex;gap:8px;align-items:center} |
| 25 | .tag{border:1px solid #2a3441;border-radius:999px;padding:2px 8px;background:#0f1216} |
| 26 | .loading,.empty,.error{padding:12px;border-radius:14px;border:1px solid #2a3441;background:#171b21;color:#9fb0c3} |
| 27 | .error{border-color:rgba(196,43,28,.6);background:rgba(196,43,28,.12);color:#ffd6d1} |
| 28 | .drop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,18,22,.65);backdrop-filter:blur(4px);z-index:50} |
| 29 | .drop.show{display:flex;animation:fadein .12s ease} |
| 30 | .drop-card{width:min(520px,92vw);border:1px dashed rgba(43,140,255,.7);border-radius:16px;padding:18px;background:rgba(23,27,33,.95)} |
| 31 | .drop-title{font-weight:700;font-size:16px} |
| 32 | .drop-sub{margin-top:6px;color:#9fb0c3;font-size:13px} |
| 33 | .drop-bar{margin-top:12px;height:10px;border-radius:999px;background:#0f1216;border:1px solid #2a3441;overflow:hidden} |
| 34 | .drop-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#2b8cff,#00c2ff);transition:width .12s ease} |
| 35 | @keyframes fadein{from{opacity:.6}to{opacity:1}} |
| 36 | @media(max-width:860px){.file-list{grid-template-columns:1fr}} |
| 37 |