2026-08-01 12:17:33 +08:00
|
|
|
.client-shell { min-height: 100vh; overflow-x: hidden; }
|
2026-08-03 10:51:53 +08:00
|
|
|
.top-header { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; width: 100%; max-width: 100vw; height: 68px; align-items: center; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--border); background: #fff; }
|
2026-08-01 12:17:33 +08:00
|
|
|
.client-brand { display: flex; width: 232px; min-width: 0; align-items: center; color: var(--navy); text-decoration: none; }
|
|
|
|
|
.client-brand-logo { display: block; width: 150px; height: 54px; object-fit: contain; object-position: left center; }
|
2026-08-03 10:51:53 +08:00
|
|
|
.client-header-menu-button { display: none; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--navy); place-items: center; }
|
|
|
|
|
.client-header-heading { min-width: 0; flex: 1; }
|
|
|
|
|
.client-header-heading h1 { overflow: hidden; margin: 0; color: var(--navy); font-size: 18px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
.client-header-heading p { overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
|
2026-08-01 12:17:33 +08:00
|
|
|
.client-user { display: flex; align-items: center; gap: 10px; }
|
|
|
|
|
.client-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #e7f3f1; color: var(--primary); font-weight: 750; }
|
|
|
|
|
.client-user-copy { display: flex; flex-direction: column; }
|
|
|
|
|
.client-user-copy strong { font-size: 12px; }
|
|
|
|
|
.client-user-copy small { color: var(--muted); font-size: 10px; }
|
|
|
|
|
.client-sidebar { position: fixed; inset: 68px auto 0 0; display: flex; width: 232px; flex-direction: column; overflow: hidden; padding: 20px 14px; border-right: 1px solid var(--border); background: #fff; }
|
|
|
|
|
.client-sidebar nav { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
|
|
|
|
|
.client-nav-menu,
|
|
|
|
|
.client-nav-submenu { min-width: 0; margin: 0; padding: 0; list-style: none; }
|
|
|
|
|
.client-nav-menu { flex: 1; background: transparent; }
|
|
|
|
|
.client-nav-submenu { padding-left: 37px; }
|
|
|
|
|
.client-nav-node { min-width: 0; }
|
|
|
|
|
.client-sidebar-group-trigger,
|
|
|
|
|
.client-sidebar-link { display: flex; width: 100%; height: 44px; min-width: 0; align-items: center; gap: 11px; margin: 2px 0; padding: 0 10px; border-radius: 8px; color: #52616b; }
|
|
|
|
|
.client-sidebar-group-trigger { border: 0; background: transparent; cursor: pointer; text-align: left; }
|
|
|
|
|
.client-sidebar-link { text-decoration: none; }
|
|
|
|
|
.client-sidebar-group-trigger:hover,
|
|
|
|
|
.client-sidebar-link:hover { background: #f2f7f6; color: var(--primary); }
|
|
|
|
|
.client-sidebar-link[aria-current="page"] { background: #e9f4f2; color: var(--primary); font-weight: 650; }
|
|
|
|
|
.client-nav-node.is-active-parent > .client-sidebar-group-trigger { background: #f2f7f6; color: var(--primary); font-weight: 600; }
|
|
|
|
|
.client-sidebar .client-sidebar-group-trigger svg,
|
|
|
|
|
.client-sidebar .client-sidebar-link svg { flex: 0 0 18px; }
|
|
|
|
|
.client-sidebar .client-sidebar-group-chevron { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; transition: transform .2s ease; }
|
|
|
|
|
.client-sidebar-group-trigger[aria-expanded="true"] .client-sidebar-group-chevron { transform: rotate(180deg); }
|
|
|
|
|
.client-sidebar-group-trigger span,
|
|
|
|
|
.client-sidebar-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
.client-sidebar-group-trigger:focus-visible,
|
|
|
|
|
.client-sidebar-link:focus-visible,
|
2026-08-03 10:51:53 +08:00
|
|
|
.client-header-menu-button:focus-visible,
|
2026-08-01 12:17:33 +08:00
|
|
|
.client-sidebar-header button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
|
|
|
|
|
.client-sidebar-header,
|
|
|
|
|
.client-sidebar-scrim { display: none; }
|
|
|
|
|
.sidebar-help { display: flex; flex: 0 0 auto; flex-direction: column; gap: 4px; margin-top: 16px; padding: 14px; border-left: 3px solid var(--primary); background: #f2f7f6; }
|
|
|
|
|
.sidebar-help strong { font-size: 12px; }
|
|
|
|
|
.sidebar-help span { color: var(--muted); font-size: 11px; }
|
2026-08-03 10:51:53 +08:00
|
|
|
.client-main { width: calc(100% - 232px); max-width: 100%; min-height: 100vh; margin-left: 232px; padding: 88px 20px 40px; }
|
