.console-layout[data-v-1a9c3b51] { background: var(--console-page-bg); min-height: 100dvh; color: var(--p-text-color, #334155); padding-top: 56px; } .console-layout.has-banner[data-v-1a9c3b51] { padding-top: 94px; } .maintenance-banner[data-v-1a9c3b51] { z-index: 150; color: #92400e; background: #fef3c7; align-items: center; gap: 8px; height: 38px; padding: 0 14px; display: flex; position: fixed; inset: 0 0 auto; } .sidebar[data-v-1a9c3b51] { z-index: 30; background: var(--console-page-bg); border-right: 1px solid var(--console-panel-border); width: 210px; position: fixed; top: 56px; bottom: 0; left: 0; } .nav[data-v-1a9c3b51], .sidebar[data-v-1a9c3b51] { flex-direction: column; display: flex; } .nav[data-v-1a9c3b51] { overscroll-behavior: contain; scrollbar-width: none; flex: 1; gap: 3.5px; min-height: 0; padding: 14px; overflow-y: auto; } .nav[data-v-1a9c3b51] > * { flex-shrink: 0; } .nav[data-v-1a9c3b51]::-webkit-scrollbar { display: none; } .nav[data-v-1a9c3b51] .nav-section { color: var(--p-text-muted-color); padding: 17.5px 14px 7px; font-size: max(11px, 0.65625rem); font-weight: 600; } .nav[data-v-1a9c3b51] .nav-item { width: 100%; min-height: 35px; color: inherit; text-align: left; cursor: pointer; background: 0 0; border: 0; border-radius: 6px; align-items: center; gap: 10.5px; padding: 8.75px 14px; font-size: 1rem; text-decoration: none; display: flex; } .nav[data-v-1a9c3b51] .nav-item:hover, .nav[data-v-1a9c3b51] .sub-item:hover { background: var(--p-content-hover-background); } .nav[data-v-1a9c3b51] .nav-item.active { font-weight: 500; } .nav[data-v-1a9c3b51] .nav-item.active:not(button), .nav[data-v-1a9c3b51] .nav-item.router-link-exact-active, .nav[data-v-1a9c3b51] .sub-item.active { background: var(--console-panel-bg); box-shadow: var(--console-panel-shadow); } .nav[data-v-1a9c3b51] .nav-label { text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; } .nav[data-v-1a9c3b51] .nav-unavailable { color: var(--p-text-muted-color); cursor: not-allowed; } .nav[data-v-1a9c3b51] .nav-icon { flex: 0 0 20px; width: 20px; height: 20px; } .nav[data-v-1a9c3b51] .nav-arrow { flex: 0 0 18px; justify-content: center; align-items: center; width: 18px; height: 18px; font-size: 18px; line-height: 1; transition: transform 0.24s; display: inline-flex; transform: rotate(-90deg); } .nav[data-v-1a9c3b51] .nav-arrow.open { transform: rotate(0); } .nav[data-v-1a9c3b51] .sub-nav { grid-template-rows: 0fr; transition: grid-template-rows 0.24s; display: grid; } .nav[data-v-1a9c3b51] .sub-nav.open { grid-template-rows: 1fr; } .nav[data-v-1a9c3b51] .sub-nav-clip { min-height: 0; overflow: hidden; } .nav[data-v-1a9c3b51] .sub-nav-items { flex-direction: column; gap: 3.5px; padding-top: 3.5px; display: flex; } .nav[data-v-1a9c3b51] .sub-item { color: inherit; border-radius: 6px; padding: 8.75px 14px 8.75px 35px; text-decoration: none; display: block; } .main[data-v-1a9c3b51] { flex-direction: column; min-width: 0; min-height: calc(100dvh - 56px); margin-left: 210px; display: flex; } .has-banner .main[data-v-1a9c3b51] { min-height: calc(100dvh - 94px); } .topbar[data-v-1a9c3b51] { z-index: 35; background: var(--console-panel-bg); border-bottom: 1px solid var(--console-panel-border); gap: 0; height: 56px; position: fixed; inset: 0 0 auto; } .brand-group[data-v-1a9c3b51], .topbar[data-v-1a9c3b51] { align-items: center; display: flex; } .brand-group[data-v-1a9c3b51] { flex: 0 0 210px; height: 100%; } .brand[data-v-1a9c3b51] { color: inherit; letter-spacing: 0.4px; white-space: nowrap; align-items: center; gap: 7px; padding: 0 14px; font-size: 1.25rem; font-weight: 700; text-decoration: none; display: inline-flex; } .brand-logo[data-v-1a9c3b51] { -o-object-fit: contain; object-fit: contain; flex-shrink: 0; width: 176px; height: auto; max-height: 40px; display: block; } .brand-icon[data-v-1a9c3b51] { color: #0052d9; flex-shrink: 0; width: 35px; height: 35px; } .app-dark .brand-icon[data-v-1a9c3b51] { color: #fff; } .crumbs[data-v-1a9c3b51] { align-items: center; gap: 12px; min-width: 0; height: 100%; padding-left: 8px; font-size: 1.125rem; line-height: 1.4; display: flex; overflow: hidden; } .crumb-home[data-v-1a9c3b51], .crumb-sep[data-v-1a9c3b51] { flex-shrink: 0; justify-content: center; align-items: center; line-height: 1; display: inline-flex; } .crumb-home[data-v-1a9c3b51] { width: 44px; height: 44px; color: var(--p-text-muted-color); text-decoration: none; } .crumb-home > i[data-v-1a9c3b51] { justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 22px; line-height: 1; display: inline-flex; } .crumb-sep[data-v-1a9c3b51] { font-size: 14px; } .crumb[data-v-1a9c3b51], .crumb-sep[data-v-1a9c3b51] { color: var(--p-text-muted-color); } .crumb[data-v-1a9c3b51] { white-space: nowrap; line-height: 1.4; display: block; } .crumb.current[data-v-1a9c3b51] { color: inherit; text-overflow: ellipsis; overflow: hidden; } .topbar-right[data-v-1a9c3b51] { flex-shrink: 0; align-items: center; gap: 10px; height: 100%; margin-left: auto; padding: 0 14px; display: flex; } .nav-toggle[data-v-1a9c3b51], .theme-btn[data-v-1a9c3b51], .user-chip[data-v-1a9c3b51] { width: 44px; height: 44px; color: inherit; cursor: pointer; background: 0 0; border: 0; border-radius: 50%; flex-shrink: 0; padding: 0; font-size: 1rem; } .nav-toggle[data-v-1a9c3b51], .nav-toggle > i[data-v-1a9c3b51], .theme-btn[data-v-1a9c3b51], .theme-btn > i[data-v-1a9c3b51], .user-chip[data-v-1a9c3b51], .user-chip > i[data-v-1a9c3b51] { justify-content: center; align-items: center; line-height: 1; display: inline-flex; } .nav-toggle > i[data-v-1a9c3b51], .theme-btn > i[data-v-1a9c3b51], .user-chip > i[data-v-1a9c3b51] { width: 24px; height: 24px; font-size: 22px; } .nav-toggle[data-v-1a9c3b51]:hover, .theme-btn[data-v-1a9c3b51]:hover, .user-chip[data-v-1a9c3b51]:hover { background: var(--p-content-hover-background); } .nav-toggle[data-v-1a9c3b51] { display: none; } .content[data-v-1a9c3b51] { flex: 1; width: 100%; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 14px 14px 112px; } .content[data-v-1a9c3b51]:focus { outline: none; } .nav-close[data-v-1a9c3b51] { clip-path: inset(50%); border: 0; width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; } .nav-close[data-v-1a9c3b51]:focus-visible { clip-path: none; background: var(--console-panel-bg); z-index: 1; width: 32px; height: 32px; top: 4px; right: 4px; } .nav-backdrop[data-v-1a9c3b51] { z-index: 49; background: #0006; position: fixed; inset: 0; } .mail-btn[data-v-1a9c3b51] { position: relative; } .mail-badge[data-v-1a9c3b51] { min-width: 18px; height: 18px; font-size: 0.75rem; line-height: 18px; position: absolute; top: -1px; right: -2px; } .mail-pop[data-v-1a9c3b51] { width: 100%; } .mail-pop-list[data-v-1a9c3b51] { max-height: 360px; overflow: auto; } .mail-pop-item[data-v-1a9c3b51], .mail-pop-list[data-v-1a9c3b51] { flex-direction: column; display: flex; } .mail-pop-item[data-v-1a9c3b51] { border: 0; border-bottom: 1px solid var(--console-panel-border); text-align: left; cursor: pointer; width: 100%; color: inherit; background: 0 0; gap: 4px; padding: 14px; } .mail-pop-item[data-v-1a9c3b51]:hover { background: var(--p-content-hover-background); } .mail-pop-title[data-v-1a9c3b51] { align-items: center; gap: 7px; display: flex; } .mail-pop-dot[data-v-1a9c3b51] { background: var(--p-primary-color); border-radius: 50%; width: 6px; height: 6px; } .mail-pop-time[data-v-1a9c3b51] { color: var(--p-text-muted-color); font-size: 0.875rem; } .mail-pop-empty[data-v-1a9c3b51] { flex-direction: column; justify-content: center; align-items: center; gap: 7px; height: 315px; display: flex; } .mail-pop-empty i[data-v-1a9c3b51] { margin-bottom: 14px; font-size: 2rem; } .mail-pop-empty strong[data-v-1a9c3b51] { font-size: 1.25rem; font-weight: 500; } .mail-pop-empty span[data-v-1a9c3b51] { color: var(--p-text-muted-color); font-size: 0.875rem; } .mail-pop-foot[data-v-1a9c3b51] { width: 100%; color: var(--p-primary-color); cursor: pointer; background: 0 0; border: 0; padding: 10px; display: block; } .skip-link[data-v-1a9c3b51] { z-index: 200; background: var(--p-primary-color); color: #fff; border-radius: 6px; padding: 12px 18px; text-decoration: none; position: fixed; top: 8px; left: 14px; transform: translateY(-160%); } .skip-link[data-v-1a9c3b51]:focus { transform: translateY(0); } .has-banner .topbar[data-v-1a9c3b51] { top: 38px; } .has-banner .sidebar[data-v-1a9c3b51] { top: 94px; } @media (width<=1535px) { .main[data-v-1a9c3b51] { margin-left: 0; } .sidebar[data-v-1a9c3b51] { z-index: 50; border-right: 0; width: 280px; transition: transform 0.2s; top: 0; transform: translate(-100%); } .sidebar.open[data-v-1a9c3b51] { transform: translate(0); } .nav-toggle[data-v-1a9c3b51] { display: inline-flex; } .brand[data-v-1a9c3b51] { padding-right: 7px; } .brand-group[data-v-1a9c3b51] { flex: none; } .has-banner .sidebar[data-v-1a9c3b51] { top: 0; } } @media (width<=767px) { .crumbs[data-v-1a9c3b51] { display: none; } .brand[data-v-1a9c3b51] { font-size: 1.25rem; } .topbar-right[data-v-1a9c3b51] { gap: 4px; padding: 0 10px 0 0; } .nav-toggle[data-v-1a9c3b51], .theme-btn[data-v-1a9c3b51], .user-chip[data-v-1a9c3b51] { width: 40px; height: 40px; } .brand[data-v-1a9c3b51] { gap: 5px; font-size: 1.125rem; } .brand-logo[data-v-1a9c3b51] { width: 144px; } .brand-icon[data-v-1a9c3b51] { width: 30px; height: 30px; } .brand-group[data-v-1a9c3b51] { flex-basis: auto; } } @media (width<=359px) { .brand[data-v-1a9c3b51] { gap: 5px; padding: 0 4px 0 8px; font-size: 1.0625rem; } .brand-logo[data-v-1a9c3b51] { width: 120px; } .brand-icon[data-v-1a9c3b51] { width: 28px; height: 28px; } .topbar-right[data-v-1a9c3b51] { gap: 0; padding-right: 8px; } }