mirror of
https://github.com/michalcz10/USB-RAID-Array.git
synced 2026-11-11 07:59:04 +00:00
Michal Sedlák
565fd18379
Replace Bootstrap dependencies with custom blue-accented light and dark themes and native dialogs. Share the sidebar, top bar and responsive layout across file browsing, account settings, user management, server statistics and file previews. Add folder search, type filters, upload progress and asset cache versioning. Fix SSH configuration usage, filesystem discovery, missing statistics and RAID health parsing. Adapt PDF sizing and fullscreen controls to the shared workspace. Validation: PHP workspace and server statistics regression tests, JavaScript syntax checks, responsive browser checks and live XAMPP navigation.
63 lines
5.4 KiB
CSS
63 lines
5.4 KiB
CSS
/* Persistent workspace frame shared by every signed-in page and shared previews. */
|
|
.file-app { display:grid; grid-template-columns:236px minmax(0,1fr); text-align:left; }
|
|
.skip-link { position:fixed; left:250px; top:-60px; z-index:10000; padding:10px 16px; background:var(--surface); border:1px solid var(--blue); border-radius:8px; }
|
|
.skip-link:focus { top:12px; }
|
|
.sidebar { position:sticky; top:0; height:100dvh; padding:30px 20px 16px; display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line); overflow-y:auto; }
|
|
.brand { display:flex; align-items:center; gap:12px; color:var(--text); font-size:19px; font-weight:750; letter-spacing:-.04em; text-decoration:none; }
|
|
.brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:#2563eb; color:white; font-size:27px; }
|
|
.brand-caption { display:block; font-size:9px; font-weight:600; letter-spacing:.16em; color:var(--muted); margin-top:1px; }
|
|
.nav-heading { margin:48px 12px 12px; }
|
|
.nav-item { display:flex; align-items:center; gap:12px; padding:11px 12px; margin:4px 0; color:var(--muted); border-radius:8px; font-weight:550; }
|
|
.nav-item:hover { text-decoration:none; background:var(--surface-alt); color:var(--text); }
|
|
.nav-item.active { background:var(--blue-soft); color:var(--blue); }
|
|
.nav-item > span { font-size:20px; width:21px; text-align:center; }
|
|
.sidebar-bottom { margin-top:auto; padding-top:40px; }
|
|
.connection-card { border:1px solid var(--line); border-radius:10px; padding:14px 12px; font-size:12px; font-weight:600; margin-bottom:18px; }
|
|
.status-dot { display:inline-block; width:6px; height:6px; background:var(--success); border-radius:50%; margin-right:7px; }
|
|
.connection-card small { display:block; margin-top:5px; color:var(--muted); font-weight:400; font-size:10px; }
|
|
.user-card { display:flex; gap:10px; align-items:center; padding:16px 4px 0; margin-top:14px; border-top:1px solid var(--line); }
|
|
.avatar { display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); width:34px; height:34px; border-radius:50%; font-weight:700; flex-shrink:0; }
|
|
.user-name { flex:1; overflow-wrap:anywhere; font-weight:600; font-size:12px; }
|
|
.user-name small { display:block; font-size:10px; font-weight:400; color:var(--muted); }
|
|
.workspace { min-width:0; display:flex; flex-direction:column; min-height:100dvh; }
|
|
.topbar { min-height:76px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 40px; border-bottom:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:12px; }
|
|
.topbar strong { color:var(--text); font-weight:500; }
|
|
.topbar-divider { padding:0 14px; opacity:.5; }
|
|
.file-main { flex:1; width:100%; max-width:1560px; margin:0 auto; padding:42px 40px 0; display:flex; flex-direction:column; min-width:0; }
|
|
.workspace-content { flex:1; min-width:0; }
|
|
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:30px; }
|
|
.page-heading .eyebrow { margin-bottom:9px; }
|
|
.page-heading h1 { margin-bottom:10px; font-size:36px; overflow-wrap:anywhere; }
|
|
.heading-dot { color:var(--blue); }
|
|
.page-heading p { color:var(--muted); margin:0; font-size:13px; }
|
|
.heading-back { white-space:nowrap; font-size:12px; flex-shrink:0; }
|
|
.protocol-badge { border:1px solid var(--line); border-radius:6px; padding:5px 10px; font:11px ui-monospace,monospace; background:var(--surface); white-space:nowrap; }
|
|
.workspace-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; font-size:10px; margin:0; border:0; }
|
|
.workspace-footer a { color:var(--muted); }
|
|
.content-panel { padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); min-width:0; }
|
|
.panel-heading { margin-bottom:22px; } .panel-heading h2 { margin-bottom:6px; font-size:18px; } .panel-heading p { margin:0; color:var(--muted); font-size:12px; }
|
|
.content-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; font-size:12px; color:var(--muted); }
|
|
.content-toolbar p { margin:0; }
|
|
.table-scroll { overflow-x:auto; max-width:100%; }
|
|
@media(min-width:1500px) { .file-main { padding-top:56px; } }
|
|
@media(max-width:1100px) { .file-app { grid-template-columns:200px minmax(0,1fr); } .sidebar { padding-inline:14px; } .nav-item { font-size:13px; } .file-main { padding:28px 24px 0; } .topbar { padding-inline:24px; } }
|
|
@media(max-width:760px) {
|
|
.file-app { display:block; }
|
|
.sidebar { position:static; height:auto; padding:16px; border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
|
|
.brand-caption,.nav-heading,.connection-card { display:none; }
|
|
.sidebar nav { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
|
|
.nav-item { font-size:12px; padding:7px 10px; margin:0; }
|
|
.sidebar-bottom { margin:8px 0 0; padding:0; display:flex; }
|
|
.sidebar-bottom .nav-item { padding:4px 10px; }
|
|
.sidebar-bottom .user-card { display:flex; margin:0 0 0 auto; padding:0 10px; border:0; }
|
|
.sidebar-bottom .user-name,.sidebar-bottom .avatar { display:none; }
|
|
.topbar { min-height:58px; padding:12px 16px; }
|
|
.file-main { padding:26px 16px 0; }
|
|
.page-heading { align-items:flex-start; flex-wrap:wrap; }
|
|
.page-heading h1 { font-size:30px; }
|
|
.protocol-badge { display:none; }
|
|
.workspace-footer { flex-wrap:wrap; }
|
|
.content-panel { padding:18px; }
|
|
.skip-link { left:16px; }
|
|
}
|