naturallaw777
bbf53d089a
Systems Operational on roles with no enabled domain services (a
fresh Desktop-only install, or everything turned off) rendered no
Router card but still showed a "Who uses these ports" note listing
services the machine does not have. Any role with no enabled domain
service now gets the calm "No router setup needed yet" card with
role-appropriate wording, and the who-uses note only appears when
a domain service is actually enabled.
Narrow viewports (phones, half-screen RDP) had no layout at all:
the sidebar and topbar forced ~900px of horizontal scroll on every
role. The sidebar now collapses to a 76px icon rail below 920px,
the topbar wraps its search onto a second row below 640px, and the
welcome column reflows to one card per row. Legacy pre-redesign
media rules in onboarding.css (which targeted the old DOM and set
.sidebar{width:100%}) are removed — they silently overrode the new
layout, and one shrank the Zeus QR to 200px; QR codes keep their
repo-original 240px at every width.
108 lines
2.3 KiB
CSS
108 lines
2.3 KiB
CSS
/* ── Topbar (replaces the old header-bar + ip-bar) ──────────────── */
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 13px 26px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 1.02rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.01em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Search ─────────────────────────────────────────────────────── */
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 99px;
|
|
padding: 8px 16px;
|
|
flex: 1;
|
|
max-width: 400px;
|
|
min-width: 140px;
|
|
margin-left: 18px;
|
|
color: var(--text-3);
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
}
|
|
|
|
.search-box:focus-within {
|
|
border-color: rgba(66, 243, 154, 0.35);
|
|
box-shadow: 0 0 0 3px rgba(66, 243, 154, 0.09);
|
|
}
|
|
|
|
.search-box svg { width: 15px; height: 15px; flex-shrink: 0; }
|
|
|
|
.search-box input {
|
|
background: none;
|
|
border: 0;
|
|
outline: 0;
|
|
color: var(--text);
|
|
width: 100%;
|
|
font: inherit;
|
|
font-size: 0.87rem;
|
|
}
|
|
|
|
.search-box input::placeholder { color: var(--text-3); }
|
|
|
|
.top-actions {
|
|
display: flex;
|
|
gap: 9px;
|
|
margin-left: auto;
|
|
order: 5;
|
|
}
|
|
|
|
/* ── Legacy badges (still used inside dialogs) ──────────────────── */
|
|
|
|
.role-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--border-strong);
|
|
color: var(--text-2);
|
|
font-size: 0.72rem;
|
|
font-weight: 750;
|
|
padding: 6px 12px;
|
|
border-radius: 99px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.os-version-badge {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text-2);
|
|
font-size: 0.66rem;
|
|
font-weight: 600;
|
|
padding: 2px 9px;
|
|
border-radius: 99px;
|
|
border: 1px solid var(--border);
|
|
letter-spacing: 0.02em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.btn-header-reboot {
|
|
padding: 5px 10px;
|
|
font-size: 0.72rem;
|
|
}
|
|
.btn-logout {
|
|
padding: 5px 10px;
|
|
font-size: 0.72rem;
|
|
}
|
|
}
|