diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts index 5626ac8..f6e6fb6 100644 --- a/web/src/i18n/en.ts +++ b/web/src/i18n/en.ts @@ -1050,8 +1050,8 @@ const en = { enterHint: "Double-click to open folder", downloadHint: "Click to download", colName: "Name", - colSize: "Size (KB)", - colMtime: "Last modified", + colSize: "Size", + colMtime: "Modified", colOwner: "Owner", colGroup: "Group", colMode: "Access", diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts index e958abe..b16970a 100644 --- a/web/src/i18n/zh.ts +++ b/web/src/i18n/zh.ts @@ -1047,7 +1047,7 @@ const zh = { enterHint: "双击进入目录", downloadHint: "单击下载文件", colName: "名称", - colSize: "大小 (KB)", + colSize: "大小", colMtime: "修改时间", colOwner: "所有者", colGroup: "组", diff --git a/web/src/index.css b/web/src/index.css index 87fc237..7272566 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -3085,32 +3085,51 @@ pre { .webcrt-sftp__bar { display: flex; + align-items: center; gap: 4px; - padding: 6px; + padding: 5px 6px; border-bottom: 1px solid #334155; flex-shrink: 0; + background: #0f172a; } .webcrt-sftp__bar input { flex: 1; min-width: 0; - background: #1e293b; - border: 1px solid #475569; - color: #e2e8f0; - padding: 2px 6px; - font-size: 12px; + height: 24px; + background: #111827; + border: 1px solid #334155; + border-radius: 4px; + color: #cbd5e1; + padding: 0 6px; + font-size: 11px; + line-height: 1; } .webcrt-sftp__bar button, .webcrt-sftp__upload { - background: #334155; - border: 1px solid #475569; - color: #e2e8f0; - padding: 2px 8px; + display: inline-flex; + align-items: center; + justify-content: center; + height: 24px; + background: #1e293b; + border: 1px solid #334155; + border-radius: 4px; + color: #cbd5e1; + padding: 0 8px; font-size: 11px; + font-weight: 500; + line-height: 1; cursor: pointer; } +.webcrt-sftp__bar button:hover:not(:disabled), +.webcrt-sftp__upload:hover:not(.is-disabled) { + background: #243447; + border-color: #475569; + color: #e2e8f0; +} + .webcrt-sftp__bar button:disabled, .webcrt-sftp__upload.is-disabled { opacity: 0.55; @@ -3118,9 +3137,9 @@ pre { } .webcrt-sftp__status { - padding: 4px 10px; - font-size: 11px; - color: #94a3b8; + padding: 3px 8px; + font-size: 10px; + color: #64748b; border-bottom: 1px solid #1e293b; flex-shrink: 0; } @@ -3135,19 +3154,23 @@ pre { width: 100%; border-collapse: collapse; table-layout: fixed; - font-size: 12px; - color: #e2e8f0; + font-size: 11px; + line-height: 1.35; + color: #cbd5e1; } .webcrt-sftp__table thead th { position: sticky; top: 0; z-index: 1; - background: #1e293b; - color: #94a3b8; + background: #0f172a; + color: #64748b; + font-size: 10px; font-weight: 600; text-align: left; - padding: 6px 8px; + text-transform: uppercase; + letter-spacing: 0.04em; + padding: 4px 6px; border-bottom: 1px solid #334155; white-space: nowrap; user-select: none; @@ -3159,7 +3182,7 @@ pre { } .webcrt-sftp__table tbody tr:hover { - background: #1e293b; + background: #111827; } .webcrt-sftp__table tbody tr.is-busy { @@ -3168,7 +3191,7 @@ pre { } .webcrt-sftp__table td { - padding: 5px 8px; + padding: 3px 6px; border-bottom: 1px solid #1e293b; overflow: hidden; text-overflow: ellipsis; @@ -3177,51 +3200,56 @@ pre { } .webcrt-sftp__col-name { - width: 36%; + width: 34%; + color: #e2e8f0; } .webcrt-sftp__col-size { width: 12%; text-align: right; font-variant-numeric: tabular-nums; - color: #94a3b8; + color: #64748b; +} + +.webcrt-sftp__table thead th.webcrt-sftp__col-size { + text-align: right; } .webcrt-sftp__col-mtime { - width: 20%; + width: 22%; font-variant-numeric: tabular-nums; - color: #94a3b8; + color: #64748b; } .webcrt-sftp__col-owner, .webcrt-sftp__col-group { width: 10%; - color: #94a3b8; + color: #64748b; } .webcrt-sftp__col-mode { width: 12%; font-family: Consolas, "Courier New", monospace; - font-size: 11px; - color: #64748b; + font-size: 10px; + color: #475569; } .webcrt-sftp__name-cell { display: flex; align-items: center; - gap: 8px; + gap: 6px; min-width: 0; } .webcrt-sftp__icon { display: inline-flex; flex-shrink: 0; - color: #94a3b8; + color: #64748b; line-height: 1; } .webcrt-sftp__icon.is-dir { - color: #fbbf24; + color: #d97706; } .webcrt-sftp__name { @@ -3229,6 +3257,7 @@ pre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + font-weight: 500; } @media (max-width: 900px) {