47 lines
5.2 KiB
CSS
47 lines
5.2 KiB
CSS
.cockpit { min-height: 100vh; }
|
|
.cockpit-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid color-mix(in srgb, var(--outline) 38%, transparent); background: var(--surface-lowest); }
|
|
.sidebar-heading { display: flex; min-height: var(--topbar-height); align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid color-mix(in srgb, var(--outline) 25%, transparent); }
|
|
.cockpit-brand { display: flex; min-width: 0; align-items: center; gap: 11px; }
|
|
.cockpit-brand strong { display: block; color: var(--text-strong); font: 700 18px/1.1 var(--font-headline); letter-spacing: -.025em; }
|
|
.cockpit-brand small { display: block; margin-top: 5px; color: var(--text-faint); font: 500 10px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
|
|
.brand-radar { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); box-shadow: var(--shadow-signal); }
|
|
.cockpit-nav { flex: 1; overflow-y: auto; padding: 19px 12px; }
|
|
.nav-caption { margin: 18px 12px 7px; color: var(--text-faint); font: 600 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
|
|
.nav-caption:first-child { margin-top: 0; }
|
|
.nav-item { position: relative; display: flex; min-height: 43px; align-items: center; gap: 13px; margin: 2px 0; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font: 500 13px/1.2 var(--font-mono); transition: color .15s, background .15s, transform .15s; }
|
|
.nav-item:hover { transform: translateX(2px); background: var(--surface-low); color: var(--text-strong); }
|
|
.nav-item.is-active { background: color-mix(in srgb, var(--cyan) 12%, var(--surface-container)); color: var(--text-strong); }
|
|
.nav-item.is-active::after { position: absolute; inset: 0 -1px 0 auto; width: 2px; content: ""; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
|
|
.nav-item.is-active .icon { color: var(--cyan); }
|
|
.sidebar-footer { margin-top: auto; padding: 13px 18px 15px; border-top: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); }
|
|
.sidebar-radar-card { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; }
|
|
.sidebar-radar-card strong, .sidebar-radar-card small { display: block; }
|
|
.sidebar-radar-card strong { font-size: 12px; }
|
|
.sidebar-radar-card small { margin-top: 3px; font: 10px/1.2 var(--font-mono); }
|
|
.cockpit-workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
|
|
.cockpit-topbar { position: fixed; inset: 0 0 auto var(--sidebar-width); z-index: 40; display: flex; height: var(--topbar-height); align-items: center; padding: 0 var(--content-gutter); border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); }
|
|
.topbar-start, .topbar-actions { display: flex; min-width: 0; align-items: center; gap: 12px; }
|
|
.topbar-start { flex: 1; }
|
|
.cockpit-main { width: 100%; min-height: 100vh; padding: calc(var(--topbar-height) + 36px) var(--content-gutter) 56px; }
|
|
.cockpit-main > * { width: 100%; max-width: 2240px; margin-right: auto; margin-left: auto; }
|
|
.nav-scrim, .mobile-tabbar { display: none; }
|
|
.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 12%, rgba(0,245,255,.09), transparent 27rem), var(--surface-lowest); }
|
|
.page-header, .cockpit-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
|
|
.page-header p:last-child, .cockpit-heading p:last-child { max-width: 780px; margin-bottom: 0; color: var(--text-muted); }
|
|
.eyebrow, .section-kicker, .kpi-label { display: block; margin-bottom: 8px; color: var(--cyan-dim); font: 600 11px/1.1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
|
|
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 30px 0 15px; }
|
|
.section-heading p { margin-bottom: 0; color: var(--text-muted); }
|
|
.page-actions, .job-actions, .form-actions, .stack-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
|
|
.form-actions { justify-content: flex-end; margin-top: 22px; }
|
|
.stack { display: grid; gap: 16px; }
|
|
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
|
|
.span-2 { grid-column: span 2; }
|
|
.card-list { display: grid; gap: 12px; }
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
|
|
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .65fr); align-items: start; gap: 22px; }
|
|
.dashboard-rail { position: sticky; top: calc(var(--topbar-height) + 22px); display: grid; gap: 14px; }
|
|
.results-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr); align-items: start; gap: 20px; }
|
|
.results-feed, .job-feed { display: grid; gap: 12px; }
|
|
.definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
|
.health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|