kstyagi
dca7f78dae
- Added a new server module for the Nest workspace, integrating with UVM's API. - Updated project description to reflect the new Nest functionality. - Created tests for the Nest server and CLI, ensuring proper functionality and error handling. - Refactored existing UVM server code to separate Nest and UVM functionalities. - Removed the old UVM dashboard assets package as it is now part of the Nest workspace. - Enhanced error messages for clarity regarding server shutdown commands.
945 lines
66 KiB
CSS
945 lines
66 KiB
CSS
@font-face {
|
|
font-family: Manrope;
|
|
font-style: normal;
|
|
font-weight: 200 800;
|
|
font-display: swap;
|
|
src: url('../fonts/manrope-latin.woff2') format('woff2');
|
|
}
|
|
|
|
:root {
|
|
--canvas: #e8e7ed;
|
|
--canvas-deep: #dddae4;
|
|
--paper: #faf9fc;
|
|
--white: #fff;
|
|
--ink: #35333e;
|
|
--ink-soft: #55515f;
|
|
--muted: #78717f;
|
|
--faint: #a29cae;
|
|
--line: rgba(110, 99, 135, .11);
|
|
--acid: #ede39f;
|
|
--yellow: #e6d783;
|
|
--yellow-soft: #f4efce;
|
|
--yellow-ink: #746633;
|
|
--peach: #ddb5a9;
|
|
--peach-soft: #f3e5e0;
|
|
--sage: #a9b9a1;
|
|
--sage-soft: #e9eee6;
|
|
--lilac: #b9aed0;
|
|
--lilac-soft: #eae4f2;
|
|
--red: #bd766e;
|
|
--red-soft: #f3e4e1;
|
|
--shadow-card: 0 5px 14px rgba(66, 52, 92, .035), 0 18px 34px -23px rgba(66, 52, 92, .17);
|
|
--radius: 21px;
|
|
--sans: Manrope, 'Avenir Next', 'Segoe UI', sans-serif;
|
|
--mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
|
|
--ease: cubic-bezier(.22, .68, 0, 1.01);
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html { min-height: 100%; background: #dad8e0; }
|
|
body {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
background: radial-gradient(ellipse at 20% 0, #eeedf1, transparent 65%), #dad8e0;
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
font-weight: 450;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
button, input, select, textarea { font: inherit; }
|
|
button, a, input, select { -webkit-tap-highlight-color: transparent; }
|
|
button { cursor: pointer; }
|
|
button, input, select { color: inherit; }
|
|
button { border: 0; }
|
|
button:disabled { cursor: wait; opacity: .55; }
|
|
a { color: inherit; text-decoration: none; }
|
|
h1, h2, h3, p { margin: 0; }
|
|
h1, h2, h3, strong { font-weight: 550; }
|
|
h1, h2, h3 { line-height: 1.3; }
|
|
h1:focus { outline: none; }
|
|
fieldset { min-width: 0; }
|
|
input { min-width: 0; }
|
|
input::placeholder { color: #918a9e; }
|
|
input[type='checkbox'] { width: 14px; height: 14px; accent-color: #9f9259; cursor: pointer; }
|
|
::selection { background: #ece1aa; color: var(--ink); }
|
|
:focus-visible { outline: 2px solid #a79967; outline-offset: 4px; }
|
|
[hidden] { display: none !important; }
|
|
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
|
|
.icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
|
.muted { color: var(--muted); }
|
|
.mono { font-family: var(--mono); font-size: 10px; }
|
|
.danger-text { color: #a45f57 !important; }
|
|
.subtle-label { display: block; color: var(--muted); font-size: 10px; font-weight: 450; letter-spacing: .015em; }
|
|
.dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--faint); }
|
|
.dot-yellow { background: var(--yellow); box-shadow: 0 0 0 3px rgba(230, 215, 131, .11); }
|
|
.dot-peach { background: var(--peach); }
|
|
.dot-sage { background: var(--sage); }
|
|
.dot-lilac { background: var(--lilac); }
|
|
.dot-error { background: var(--red); }
|
|
.status-inline { display: inline-flex; align-items: center; gap: 7px; }
|
|
.button, .icon-button, .quiet-link, .mini-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
|
|
.button {
|
|
min-height: 37px;
|
|
padding: 8px 17px;
|
|
border: 1px solid rgba(255, 255, 255, .8);
|
|
border-radius: 30px;
|
|
background: rgba(255, 255, 255, .57);
|
|
color: var(--ink-soft);
|
|
font-size: 11px;
|
|
font-weight: 550;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
transition: background .2s, box-shadow .2s, transform .25s var(--ease);
|
|
}
|
|
.button:hover:not(:disabled) { transform: translateY(-1px); background: #fff; box-shadow: 0 4px 12px #5145660b; }
|
|
.button:active:not(:disabled) { transform: translateY(0); }
|
|
.button .icon { width: 15px; height: 15px; }
|
|
.button-primary { background: var(--acid); border-color: #f6efc5; color: #554d30; box-shadow: 0 5px 13px #9784460a; }
|
|
.button-primary:hover:not(:disabled) { background: #e9dc91; box-shadow: 0 6px 16px #97844616; }
|
|
.button-danger { background: var(--red-soft); color: #96544d; border-color: #e8cfc9; }
|
|
.button-danger:hover:not(:disabled) { background: #edd3cd; }
|
|
.button-quiet { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
|
|
.button-small { min-height: 31px; font-size: 10px; padding: 6px 12px; }
|
|
.button-wide { width: 100%; justify-content: space-between; padding-inline: 20px; }
|
|
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
|
.icon-button { width: 33px; height: 33px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); transition: background .2s, color .2s, transform .2s; }
|
|
.icon-button:hover:not(:disabled) { background: #ffffffa8; color: var(--ink); }
|
|
.icon-button .icon { width: 16px; height: 16px; }
|
|
.quiet-link { justify-content: flex-start; padding: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 450; transition: color .2s; }
|
|
.quiet-link:hover { color: var(--ink); }
|
|
.quiet-link .icon { width: 15px; height: 15px; }
|
|
.mini-link { color: var(--muted); padding: 3px; border-radius: 50%; }
|
|
.mini-link:hover { color: var(--ink); background: #fff8; }
|
|
.mini-link .icon { width: 13px; height: 13px; }
|
|
.round-icon { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; flex: 0 0 auto; background: #f7f5fa; border: 1px solid #fff9; border-radius: 14px; color: var(--muted); }
|
|
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; line-height: 1.4; padding: 6px 10px; border-radius: 20px; background: #ffffff67; color: var(--muted); white-space: nowrap; }
|
|
.tag .icon { width: 13px; height: 13px; }
|
|
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: #ffffff69; border-radius: 20px; font-size: 10px; line-height: 1.4; font-weight: 450; color: var(--ink-soft); white-space: nowrap; }
|
|
.badge::before { content: ''; width: 5px; height: 5px; flex: 0 0 auto; background: var(--faint); border-radius: 50%; }
|
|
.badge-running::before { background: var(--yellow); }
|
|
.badge-stopped::before { background: var(--peach); }
|
|
.badge-good::before { background: #a1b292; }
|
|
.badge-attention::before { background: var(--red); }
|
|
.badge-attention { color: #a26259; background: #f5e9e57a; }
|
|
.badge-pending::before { background: var(--lilac); }
|
|
.port-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; padding: 4px 7px; background: #f4f1f7; color: #756d81; font-size: 9px; white-space: nowrap; }
|
|
.port-chip small { color: #918699; font-size: 8px; }
|
|
.port-list { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 34px; color: var(--muted); font-size: 11px; }
|
|
.port-list .port-chip { padding: 7px 11px; font-size: 11px; background: #eee9f3; }
|
|
.port-list .port-chip small { font-size: 9px; }
|
|
|
|
/* A quiet, two-part navigation panel, lifted over the workspace. */
|
|
.app-shell {
|
|
display: grid;
|
|
grid-template-columns: 402px minmax(0, 1fr);
|
|
max-width: 1840px;
|
|
height: calc(100dvh - 48px);
|
|
min-height: 680px;
|
|
margin: 24px auto;
|
|
width: calc(100% - 48px);
|
|
overflow: hidden;
|
|
border: 1px solid #ffffffac;
|
|
border-radius: 25px;
|
|
background: linear-gradient(135deg, #ecebf1 0, #e6e4ec 100%);
|
|
box-shadow: 0 24px 70px -35px #493e6640, 0 2px 7px #61546d06;
|
|
}
|
|
.workspace-drawer {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 172px;
|
|
gap: 16px;
|
|
padding: 25px 17px 24px 20px;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
background: linear-gradient(125deg, #f1f0f5dd, #f0eef4ba);
|
|
border-radius: 24px 23px 28px 24px;
|
|
border-right: 1px solid #ffffff4d;
|
|
box-shadow: 7px 0 27px -18px #71628422;
|
|
z-index: 2;
|
|
scrollbar-width: none;
|
|
}
|
|
.sidebar { display: flex; flex-direction: column; min-width: 0; }
|
|
.brand { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #4d4857; line-height: 1; }
|
|
.brand > span:nth-child(2) { font-size: 27px; font-weight: 650; letter-spacing: -1.8px; }
|
|
.brand-period { color: #b3a166; }
|
|
.brand-tag { align-self: end; margin: 0 0 3px 2px; color: #898291; font-size: 8px; letter-spacing: .025em; }
|
|
.brand-flower { display: block; position: relative; width: 20px; height: 20px; flex: 0 0 auto; transform: rotate(-12deg); }
|
|
.brand-flower i { position: absolute; width: 8px; height: 8px; border-radius: 2px 6px 2px 6px; background: var(--yellow); }
|
|
.brand-flower i:nth-child(1) { left: 1px; top: 1px; }
|
|
.brand-flower i:nth-child(2) { right: 1px; top: 1px; transform: rotate(90deg); background: #d9d3df; }
|
|
.brand-flower i:nth-child(3) { left: 1px; bottom: 1px; transform: rotate(90deg); background: #b6adbf; }
|
|
.brand-flower i:nth-child(4) { right: 1px; bottom: 1px; }
|
|
.sidebar-heading { display: flex; gap: 10px; margin: 33px 0 22px; }
|
|
.sidebar-heading-mark { margin-top: 2px; color: #827b8e; font-size: 17px; }
|
|
.sidebar-heading h2 { font-size: 20px; font-weight: 450; letter-spacing: -.055em; line-height: 1.4; }
|
|
.sidebar-heading h2 span { display: block; }
|
|
.sidebar-search { display: flex; align-items: center; gap: 9px; padding: 0 4px; color: var(--muted); background: transparent; text-align: left; font-size: 10px; }
|
|
.sidebar-search .icon { width: 15px; height: 15px; }
|
|
.sidebar-search kbd { margin-left: auto; font-family: var(--sans); font-size: 10px; color: var(--faint); }
|
|
.primary-nav { display: grid; gap: 5px; margin-top: 35px; }
|
|
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; color: var(--muted); border-radius: 25px; font-size: 11px; font-weight: 450; transition: background .25s, box-shadow .25s, color .25s; }
|
|
.nav-item > .icon { width: 15px; height: 15px; }
|
|
.nav-item:hover { background: #ffffff5e; color: var(--ink); }
|
|
.nav-item.active { background: #ffffffed; box-shadow: 0 5px 14px #62537608; color: var(--ink); }
|
|
.nav-count { margin-left: auto; color: var(--muted); font-size: 9px; }
|
|
.nav-indicator { display: none; width: 4px; height: 4px; margin-left: auto; background: var(--lilac); border-radius: 50%; }
|
|
.nav-item.active .nav-indicator { display: block; }
|
|
.nav-health-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; }
|
|
.nav-item .nav-end-icon { width: 12px; height: 12px; margin-left: auto; color: var(--faint); }
|
|
.nav-create { margin-top: 9px; }
|
|
.sidebar-secondary { margin: 20px 7px 0; border-top: 1px solid var(--line); padding-top: 17px; }
|
|
.sidebar-secondary .nav-item { padding-inline: 3px; font-size: 10px; }
|
|
.sidebar-bottom { margin-top: auto; padding: 50px 5px 0; }
|
|
.workspace-identity { display: flex; align-items: center; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); }
|
|
.workspace-avatar { display: grid; place-items: center; width: 29px; height: 32px; flex: 0 0 auto; border: 1px solid #fff; border-radius: 10px; background: #e5dfed; color: #867b92; font-size: 18px; font-weight: 500; }
|
|
.workspace-identity > div { display: grid; gap: 4px; }
|
|
.workspace-identity strong { font-size: 9px; font-weight: 550; }
|
|
.workspace-identity > div > span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; line-height: 1.2; }
|
|
.workspace-identity .dot { width: 4px; height: 4px; }
|
|
.sidebar-bottom > .quiet-link { font-size: 9px; margin-top: 22px; }
|
|
.sidebar-bottom > .quiet-link .icon { width: 13px; height: 13px; }
|
|
.context-rail { display: flex; flex-direction: column; gap: 17px; min-width: 0; padding-top: 53px; }
|
|
.insight-card { position: relative; display: block; min-height: 161px; padding: 15px 14px 11px; border: 1px solid #ffffffd9; border-radius: 19px; background: linear-gradient(140deg, #fff, #fbfafc); box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s; }
|
|
.insight-card::before { content: ''; position: absolute; top: -3px; left: 27px; right: 27px; height: 6px; border-radius: 20px; background: #e7cfdc; filter: blur(3px); z-index: -1; }
|
|
.insight-card .card-caption { gap: 4px; font-size: 9px; }
|
|
.insight-card .card-caption .icon { width: 12px; height: 12px; color: #9b8caa; }
|
|
.insight-card p { color: var(--muted); font-size: 10px; line-height: 1.55; min-height: 42px; margin-top: 9px; }
|
|
.insight-card p strong { color: #59505f; font-weight: 650; }
|
|
.insight-matrix { display: grid; place-items: center; height: 35px; margin-top: 5px; background-image: radial-gradient(#b9adb93b .75px, transparent .9px); background-size: 4px 4px; mask-image: radial-gradient(ellipse, #000 15%, transparent 70%); }
|
|
.insight-matrix span { display: block; width: 21px; height: 21px; background: repeating-conic-gradient(#92837b 0 25%, transparent 0 50%) 50% / 4px 4px; mask-image: radial-gradient(ellipse at center 75%, #000, transparent 70%); }
|
|
.insight-footer { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 7px; color: #99919f; }
|
|
.insight-footer .dot { width: 4px; height: 4px; }
|
|
.collection { display: block; position: relative; border-radius: 18px; transition: transform .3s var(--ease); }
|
|
.collection:hover, .insight-card:hover { transform: translateY(-3px); }
|
|
.collection-label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 65px; padding: 13px 14px; border: 1px solid #ffffffe6; border-radius: 18px; background: linear-gradient(130deg, #fffffff7, #fcfbfee6); box-shadow: var(--shadow-card); z-index: 1; }
|
|
.collection-label > div { display: grid; gap: 3px; }
|
|
.collection-label strong { font-size: 11px; font-weight: 550; }
|
|
.collection-label span { color: var(--muted); font-size: 9px; }
|
|
.collection-label > .icon { width: 13px; height: 13px; color: #8f849f; }
|
|
.collection-art { position: relative; overflow: hidden; height: 64px; margin: 0 3px -11px; }
|
|
.paper-machine { position: absolute; width: 100px; height: 91px; padding: 14px; border: 1px solid #fff; border-radius: 10px; background: linear-gradient(150deg, #fff, #eae8ed); box-shadow: -3px 1px 12px #6f5d8810; }
|
|
.back-paper { left: 11px; top: 18px; transform: rotate(-14deg); }
|
|
.front-paper { right: 6px; top: 5px; transform: rotate(9deg); }
|
|
.paper-machine i { display: block; height: 2px; margin-top: 5px; border-radius: 3px; background: #dcd8e1; }
|
|
.paper-machine i:nth-last-child(2) { width: 60%; }
|
|
.paper-machine > span { display: block; width: 11px; height: 3px; background: #e7dca5; border-radius: 3px; margin-top: 5px; }
|
|
.paper-machine .icon { width: 18px; height: 18px; color: #b5aaba; margin-bottom: 6px; }
|
|
.collection-machines::after { content: ''; position: absolute; bottom: -2px; left: 21px; right: 21px; height: 13px; background: #ebe5c9; border-radius: 50%; filter: blur(10px); }
|
|
.network-art { height: 62px; margin-bottom: -12px; }
|
|
.network-paper { position: absolute; left: 0; right: 0; top: 7px; height: 79px; padding: 12px; border: 1px solid #eeeeef; border-radius: 16px; background: #e7e4ebaa; box-shadow: inset 0 7px 9px #fff6; }
|
|
.network-paper::before { content: ''; position: absolute; left: 10px; right: 10px; top: 9px; height: 67px; background: #f3f0f7; border-radius: 11px; box-shadow: 0 0 0 1px #fff7; }
|
|
.network-paper .icon { position: absolute; width: 16px; height: 16px; left: 18px; top: 19px; color: #b8acbe; }
|
|
.network-paper i { position: absolute; top: 33px; width: 5px; height: 5px; border-radius: 50%; background: #c9bece; }
|
|
.network-paper i:nth-of-type(1) { left: 50px; }
|
|
.network-paper i:nth-of-type(2) { left: 88px; top: 19px; background: #e3d694; }
|
|
.network-paper i:nth-of-type(3) { right: 13px; }
|
|
.network-line { position: absolute; left: 52px; right: 16px; top: 20px; height: 17px; border-top: 1px solid #d9cedf; border-left: 1px solid #d9cedf; border-right: 1px solid #d9cedf; border-radius: 5px; z-index: 1; }
|
|
.collection-network::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 10px; border-radius: 20px; background: #e4cad6; filter: blur(5px); }
|
|
.collection-new .collection-label { background: #faf9fc9c; border-color: #ffffff96; box-shadow: 0 5px 15px #62537603; }
|
|
.rail-footnote { margin-top: auto; padding: 7px 14px 0; color: #a098ac; font-size: 8px; line-height: 1.65; }
|
|
|
|
/* The canvas stays light; grouping comes from tone and space. */
|
|
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
|
.topbar { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 0 27px; }
|
|
.workspace-crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 29px; padding: 5px 13px; border-radius: 25px; background: #ffffffab; box-shadow: 0 3px 12px #67577d03; font-size: 10px; white-space: nowrap; }
|
|
.workspace-crumb .dot { width: 5px; height: 5px; }
|
|
.crumb-divider { color: #c0b9c9; padding: 0 1px; }
|
|
#breadcrumb { color: #8e8499; }
|
|
.refresh-button { width: 28px; height: 28px; }
|
|
.refresh-button .icon { width: 13px; height: 13px; }
|
|
.refresh-button.is-loading .icon { animation: spin 1.3s linear infinite; }
|
|
.global-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 260px; min-width: 135px; width: 100%; margin-left: auto; padding: 5px 2px; }
|
|
.global-search > .icon { width: 14px; height: 14px; color: #62596f; }
|
|
.global-search input { width: 100%; outline: none; border: 0; background: transparent; font-size: 10px; padding: 4px 0; }
|
|
.global-search:focus-within { border-bottom: 1px solid #c7bdd3; }
|
|
.global-search kbd { white-space: nowrap; color: #a499b1; font-family: var(--sans); font-size: 9px; }
|
|
.topbar-create { width: 29px; height: 29px; border: 1px solid #fff9; background: #ffffff60; margin-left: 6px; }
|
|
.mobile-menu { display: none; }
|
|
.page-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 27px 25px; scrollbar-gutter: stable; }
|
|
.page { animation: page-appear .35s var(--ease) both; }
|
|
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; min-height: 52px; }
|
|
.page-heading h1 { font-size: 27px; font-weight: 450; letter-spacing: -.055em; margin-top: 5px; overflow-wrap: anywhere; }
|
|
.heading-period { color: #aa9aac; }
|
|
.page-heading .subtle-label { font-size: 9px; }
|
|
.date-label { font-size: 9px; color: #898090; align-self: end; padding-bottom: 4px; }
|
|
.overview-metrics { display: grid; grid-template-columns: .98fr 1.02fr 1fr; gap: 13px; }
|
|
.metric-card { min-width: 0; min-height: 153px; padding: 16px 18px; border: 1px solid #ffffff73; border-radius: var(--radius); background: linear-gradient(120deg, #f9f8fba8, #f6f4f987); box-shadow: 0 5px 15px #55456602; }
|
|
.card-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
.card-caption h2 { font-size: 12px; font-weight: 500; letter-spacing: -.025em; }
|
|
.caption-icon { width: 15px; height: 15px; color: #a59bb0; }
|
|
.fleet-number { display: flex; align-items: center; gap: 16px; margin: 12px 0 13px; }
|
|
.fleet-number > strong { font-size: 39px; font-weight: 350; letter-spacing: -.07em; line-height: 1.1; }
|
|
.fleet-number > span { color: var(--muted); font-size: 9px; line-height: 1.55; }
|
|
.metric-bottom { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
|
|
.metric-bottom .dot { width: 5px; height: 5px; }
|
|
.signal-readouts { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
|
|
.signal-readouts > div { display: grid; align-items: center; grid-template-columns: 5px 1fr; gap: 2px 6px; }
|
|
.signal-readouts .dot { width: 4px; height: 4px; }
|
|
.signal-readouts strong { font-size: 16px; font-weight: 450; line-height: 1.4; }
|
|
.signal-readouts small { grid-column: 2; color: var(--muted); font-size: 9px; }
|
|
.segmented-track { display: flex; height: 3px; margin-top: 18px; border-radius: 5px; background: #e2dce9; overflow: hidden; }
|
|
.segmented-track span { width: 0; transition: width .7s var(--ease); }
|
|
.segmented-track span:first-child { background: linear-gradient(90deg, #b3c0a9, #d4dba6); }
|
|
.segmented-track span:last-child { background: linear-gradient(90deg, #e0c4ae, #dbaa9f); }
|
|
.range-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #94899f; font-size: 7px; }
|
|
.resource-line { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 19px; }
|
|
.resource-line > span { font-size: 12px; letter-spacing: -.02em; }
|
|
.resource-line > small { color: var(--muted); font-size: 8px; text-align: right; }
|
|
.resource-track { height: 3px; border-radius: 4px; background: #e5dfca8a; margin-top: 6px; overflow: hidden; }
|
|
.resource-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #e6d88e; box-shadow: 0 0 5px #e7d89555; transition: width .7s var(--ease); }
|
|
.second-resource { margin-top: 15px; }
|
|
.memory-track { background: #e6dfeb; }
|
|
.memory-track > span { background: #beb0d1; }
|
|
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
|
|
.section-heading h2 { font-size: 14px; font-weight: 500; letter-spacing: -.03em; }
|
|
.section-heading > div > span { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
|
|
.portfolio-section { margin-top: 26px; }
|
|
.portfolio-section > .section-heading { margin: 0 3px 12px; }
|
|
.portfolio-content { min-height: 184px; }
|
|
.table-scroll { overflow-x: auto; scrollbar-width: thin; }
|
|
.portfolio-table { width: 100%; min-width: 565px; border-collapse: separate; border-spacing: 0 6px; text-align: left; }
|
|
.portfolio-table th { color: var(--muted); font-size: 10px; font-weight: 450; padding: 0 10px 5px; white-space: nowrap; }
|
|
.portfolio-table td { padding: 12px 10px; color: var(--ink-soft); font-size: 11px; transition: background .2s; }
|
|
.portfolio-table th:first-child, .portfolio-table td:first-child { padding-left: 14px; }
|
|
.portfolio-table tbody tr { background: #faf8fc22; }
|
|
.portfolio-table tbody tr:nth-child(2n) { background: #ffffff7d; }
|
|
.portfolio-table tbody tr:hover { background: #ffffffbf; }
|
|
.portfolio-table td:first-child { border-radius: 13px 0 0 13px; }
|
|
.portfolio-table td:last-child { border-radius: 0 13px 13px 0; width: 25px; padding-inline: 6px; }
|
|
.portfolio-table .badge { font-size: 9px; padding: 4px 7px; }
|
|
.portfolio-table .mini-link .icon { width: 12px; height: 12px; }
|
|
.portfolio-name { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 11px; }
|
|
.portfolio-name > .icon { width: 13px; height: 13px; color: #b4a6bd; }
|
|
.portfolio-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
|
|
.resource-inline { white-space: nowrap; font-size: 10px; }
|
|
.resource-inline span { color: #aca0b6; padding: 0 4px; }
|
|
.soft-panel { min-width: 0; padding: 21px; border: 1px solid #ffffff69; border-radius: var(--radius); background: linear-gradient(120deg, #f7f5fa8c, #f3f0f775); }
|
|
.overview-bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 22px; }
|
|
.activity-panel { padding: 19px 20px 13px; }
|
|
.activity-panel .section-heading { margin-bottom: 8px; }
|
|
.activity-body { display: flex; align-items: center; justify-content: center; gap: 34px; }
|
|
.fleet-ring { position: relative; width: 208px; max-width: 56%; flex: 0 0 auto; aspect-ratio: 1; }
|
|
.fleet-ring > svg { display: block; width: 100%; height: 100%; overflow: visible; }
|
|
.fleet-ring circle { fill: none; stroke-width: 3; }
|
|
.ring-track { stroke: #e2dce9; }
|
|
.ring-segment { transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 0 100; stroke-linecap: round; transition: stroke-dasharray .8s var(--ease), stroke-dashoffset .8s var(--ease); }
|
|
.ring-running { stroke: #e7d98b; }
|
|
.ring-stopped { stroke: #dcb2a5; }
|
|
.ring-other { stroke: #baabcb; }
|
|
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 7px; }
|
|
.ring-center > span { color: var(--muted); font-size: 9px; }
|
|
.ring-center > strong { font-size: 43px; font-weight: 250; letter-spacing: -.06em; line-height: 1.4; }
|
|
.ring-center > strong small { font-size: 26px; font-weight: 300; }
|
|
.ring-center > span:last-child { font-size: 8px; }
|
|
.ring-legend { display: grid; gap: 21px; flex: 1; max-width: 150px; padding-right: 3px; }
|
|
.ring-legend > div { display: flex; align-items: flex-start; gap: 7px; }
|
|
.ring-legend .dot { width: 4px; height: 4px; margin-top: 5px; }
|
|
.ring-legend span { color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
|
|
.ring-legend small { display: block; color: var(--muted); font-size: 8px; margin-top: 4px; }
|
|
.ring-legend strong { margin-left: auto; color: var(--ink-soft); font-size: 13px; font-weight: 400; }
|
|
.notes-panel { padding: 20px 20px 15px; }
|
|
.notes-panel .section-heading { margin-bottom: 12px; }
|
|
.note-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #b5a6c016; }
|
|
.note-row > .icon { width: 15px; height: 15px; color: #a89ab3; }
|
|
.note-row > div { min-width: 0; }
|
|
.note-row strong { display: block; color: var(--ink-soft); font-size: 11px; font-weight: 450; }
|
|
.note-row small { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
|
|
.note-row > span { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
|
|
.note-row .icon:last-child { width: 11px; height: 11px; }
|
|
.note-row:hover strong { color: #4f405b; }
|
|
.notes-footer { margin-top: 15px; width: 100%; justify-content: space-between; font-size: 9px; }
|
|
.page-footer { display: flex; justify-content: space-between; gap: 12px; color: #a292ad; margin: 21px 3px 0; font-size: 8px; }
|
|
.page-footer > span:first-child { display: flex; align-items: center; gap: 6px; }
|
|
.page-footer .dot { width: 4px; height: 4px; }
|
|
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 215px; padding: 30px 18px; text-align: center; border-radius: 18px; background: #f9f7fc47; }
|
|
.empty-state .empty-icon { position: relative; display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 4px; border: 1px solid #ffffffed; border-radius: 15px; background: linear-gradient(135deg, #fff, #e7e1ee); color: #b0a1bd; box-shadow: 0 8px 13px -8px #9183aa38; transform: rotate(-7deg); }
|
|
.empty-state .empty-icon::before { content: ''; position: absolute; inset: 4px -5px -3px 5px; border: 1px solid #ffffffbf; border-radius: 15px; z-index: -1; }
|
|
.empty-state h3 { font-size: 14px; font-weight: 450; letter-spacing: -.035em; }
|
|
.empty-state p { max-width: 290px; color: var(--muted); font-size: 11px; }
|
|
.empty-state .button { margin-top: 7px; }
|
|
.portfolio-content .empty-state { min-height: 191px; padding: 22px 15px; border: 1px solid #ffffff4d; }
|
|
.portfolio-content .empty-state h3 { font-size: 13px; }
|
|
.portfolio-content .empty-state p { font-size: 9px; max-width: none; }
|
|
.portfolio-content .empty-state .button { min-height: 29px; font-size: 9px; }
|
|
.loading-state { display: grid; place-items: center; min-height: 170px; color: var(--muted); font-size: 11px; }
|
|
|
|
/* The machine collection. */
|
|
.compact-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 25px; }
|
|
.compact-metric { display: flex; align-items: center; gap: 15px; min-height: 100px; padding: 20px; border: 1px solid #ffffff80; border-radius: 19px; background: #f9f7fba6; }
|
|
.compact-metric > .round-icon { width: 37px; height: 41px; background: #eee8f3; color: #9d8daa; }
|
|
.compact-metric:nth-child(2) > .round-icon { background: #f3eed5; color: #ac9a65; }
|
|
.compact-metric:nth-child(3) > .round-icon { background: #efe2e0; color: #ba9692; }
|
|
.compact-metric > div { min-width: 0; }
|
|
.compact-metric strong { display: block; font-size: 25px; font-weight: 350; line-height: 1.25; letter-spacing: -.05em; overflow-wrap: anywhere; }
|
|
.compact-metric span { color: var(--muted); font-size: 10px; }
|
|
.compact-metric .metric-word { font-size: 18px; }
|
|
.fleet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
|
|
.filter-tabs { display: flex; gap: 3px; padding: 4px; border: 1px solid #ffffff57; border-radius: 28px; background: #ffffff21; }
|
|
.filter-tab { padding: 8px 13px; border-radius: 22px; background: transparent; color: var(--muted); font-size: 11px; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
|
|
.filter-tab.active { background: #fff; color: #5f496c; box-shadow: 0 3px 9px #68517508; }
|
|
.filter-tab:hover { color: var(--ink); }
|
|
.select-wrap { position: relative; display: inline-flex; align-items: center; }
|
|
.select-wrap::after { content: ''; position: absolute; right: 12px; width: 5px; height: 5px; border-right: 1px solid #92819f; border-bottom: 1px solid #92819f; transform: translateY(-2px) rotate(45deg); pointer-events: none; }
|
|
.select-wrap select { appearance: none; max-width: 100%; min-height: 32px; border: 1px solid #ffffff70; border-radius: 18px; background: #f7f4fa9c; padding: 6px 28px 6px 12px; color: #897494; font-size: 9px; cursor: pointer; }
|
|
.fleet-list-panel { padding: 5px 16px 0; border: 1px solid #ffffff73; border-radius: 21px; background: #f8f5fb57; }
|
|
.list-search-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 1px 13px; }
|
|
.search-field { display: flex; align-items: center; gap: 10px; max-width: 310px; width: 100%; color: #a18caf; }
|
|
.search-field .icon { width: 15px; height: 15px; }
|
|
.search-field input { width: 100%; padding: 7px 0; border: 0; outline: 0; background: transparent; font-size: 10px; }
|
|
.search-field:focus-within { border-bottom: 1px solid #c7b9d4; }
|
|
.list-search-row > span { font-size: 9px; color: #a18cab; white-space: nowrap; }
|
|
.machine-table { width: 100%; min-width: 690px; border-collapse: separate; border-spacing: 0 7px; text-align: left; }
|
|
.machine-table th { padding: 3px 9px 9px; color: var(--muted); font-size: 10px; font-weight: 450; }
|
|
.machine-table td { padding: 14px 9px; background: #ffffff91; color: var(--ink-soft); font-size: 11px; transition: background .2s; }
|
|
.machine-table tbody tr:nth-child(2n) td { background: #ffffff47; }
|
|
.machine-table tbody tr:hover td { background: #fff; }
|
|
.machine-table tr.selected td { background: #f6f0d9bb; }
|
|
.machine-table td:first-child { border-radius: 13px 0 0 13px; }
|
|
.machine-table td:last-child { border-radius: 0 13px 13px 0; }
|
|
.machine-table .check-cell { width: 28px; padding-right: 3px; padding-left: 10px; }
|
|
.machine-table input[type='checkbox'] { vertical-align: middle; }
|
|
.machine-name { display: flex; align-items: center; gap: 9px; }
|
|
.machine-name > .round-icon { width: 29px; height: 33px; border-radius: 10px; background: #eee7f280; }
|
|
.machine-name .round-icon .icon { width: 15px; height: 15px; color: #b39cc0; }
|
|
.machine-name > div { min-width: 80px; }
|
|
.machine-name a { display: block; max-width: 175px; color: var(--ink); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.machine-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
|
|
.machine-name small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
|
|
.allocation-cell { white-space: nowrap; }
|
|
.allocation-cell small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
|
|
.table-ports { display: flex; flex-wrap: wrap; gap: 3px; max-width: 135px; }
|
|
.table-ports .muted { font-size: 9px; color: #a78cb3; }
|
|
.row-controls { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
|
|
.row-controls .icon-button { width: 27px; height: 27px; color: #aa91b6; }
|
|
.row-controls .icon { width: 13px; height: 13px; }
|
|
.row-controls-heading { width: 67px; }
|
|
.list-footer { display: flex; justify-content: space-between; gap: 15px; padding: 17px 1px; color: #aa90b6; font-size: 8px; }
|
|
.bulk-controls { display: flex; align-items: center; gap: 9px; margin: 2px 0 13px; padding: 7px 10px; border: 1px solid #f6efc8; border-radius: 14px; background: #f3edc67d; }
|
|
.bulk-controls > span { margin-right: auto; font-size: 10px; color: #8a7945; }
|
|
.bulk-controls .icon-button { width: 25px; height: 25px; }
|
|
.operation-results { margin-top: 18px; padding: 17px 20px; border: 1px solid #fff8; border-radius: 17px; background: #f7f1eb; color: #957364; }
|
|
.operation-results header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
|
|
.operation-results h2 { font-size: 12px; }
|
|
.operation-results ul { margin: 7px 0 0; padding-left: 17px; font-size: 10px; }
|
|
.operation-results li { padding: 3px 0; overflow-wrap: anywhere; }
|
|
|
|
/* Network and inspection. */
|
|
.network-layout { display: grid; grid-template-columns: .85fr 1.4fr; gap: 16px; }
|
|
.network-map-panel { padding: 24px; }
|
|
.fabric-diagram { display: flex; flex-direction: column; align-items: center; padding: 23px 0; }
|
|
.fabric-node { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; z-index: 1; }
|
|
.fabric-node > .round-icon { background: #fbf9fc; width: 45px; height: 45px; border-radius: 15px; margin-bottom: 4px; box-shadow: 0 8px 16px #78618c07; }
|
|
.fabric-node strong { font-size: 11px; font-weight: 500; }
|
|
.fabric-node small { color: #a08bac; font-size: 8px; }
|
|
.fabric-connector { width: 1px; height: 31px; margin: 8px 0; background: linear-gradient(#d7cbe1, #dccf94); }
|
|
.fabric-gateway .round-icon { background: #f4eecf; color: #b09d61; }
|
|
.fabric-branches { position: relative; display: flex; justify-content: space-between; width: 150px; height: 29px; margin-top: 21px; border-top: 1px solid #d8cce0; border-radius: 6px; }
|
|
.fabric-branches::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 21px; background: #d8cce0; }
|
|
.fabric-branches span { display: block; width: 1px; height: 20px; background: #d8cce0; }
|
|
.fabric-guests { display: flex; justify-content: space-between; width: 173px; margin-bottom: 16px; }
|
|
.fabric-guests .icon { width: 24px; height: 24px; color: #bba8c8; }
|
|
.fabric-diagram > .muted { font-size: 9px; color: #a38baf; }
|
|
.panel-footnote { color: var(--muted); font-size: 10px; line-height: 1.8; margin-top: 13px; overflow-wrap: anywhere; }
|
|
.policy-row { display: block; padding: 16px 2px; border-bottom: 1px solid #b9a6c51f; }
|
|
.policy-row:last-child { border-bottom: 0; }
|
|
.policy-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
|
|
.policy-row-heading strong { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
|
|
.policy-row-heading .icon { width: 13px; height: 13px; color: #ad97b9; }
|
|
.policy-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--muted); font-size: 10px; }
|
|
.policy-row .table-ports { max-width: none; }
|
|
.policy-row:hover strong { color: #967249; }
|
|
.back-link { margin: 3px 0 21px; }
|
|
.detail-heading { margin-bottom: 22px; }
|
|
.detail-heading #detail-id { display: block; margin-top: 7px; color: #a58cb2; font-size: 8px; word-break: break-all; }
|
|
.detail-heading h1 { max-width: 450px; }
|
|
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
|
|
.detail-card { padding: 23px; }
|
|
.detail-list { margin: 0; }
|
|
.detail-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid #bcabca21; }
|
|
.detail-list > div:last-child { border-bottom: 0; }
|
|
.detail-list dt { color: var(--muted); font-size: 11px; }
|
|
.detail-list dd { max-width: 66%; margin: 0; color: var(--ink-soft); text-align: right; font-size: 11px; overflow-wrap: anywhere; }
|
|
.detail-list .mono { font-size: 10px; }
|
|
.ssh-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 15px; padding: 18px 21px; }
|
|
.ssh-panel > div:first-child { display: flex; align-items: center; gap: 12px; }
|
|
.ssh-panel h2 { font-size: 12px; font-weight: 500; }
|
|
.ssh-panel p { font-size: 10px; color: var(--muted); margin-top: 4px; max-width: 300px; }
|
|
.ssh-command { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px 5px 14px; border: 1px solid #fff9; border-radius: 12px; background: #fdfbfc9c; }
|
|
.ssh-command code { font-family: var(--mono); font-size: 10px; color: #918060; overflow-wrap: anywhere; }
|
|
.ssh-command .icon-button { width: 27px; height: 27px; }
|
|
.ports-panel, .log-panel, .resources-panel { margin-top: 15px; }
|
|
.storage-field { margin-top: 18px; }
|
|
.port-editor { padding-top: 5px; }
|
|
.log-output { max-height: 320px; min-height: 145px; margin: 0; padding: 17px; border: 1px solid #ffffff7a; border-radius: 13px; background: #e9e2ed8c; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; line-height: 1.9; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.detail-delete-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding: 0 4px; color: #ad94b6; font-size: 9px; }
|
|
|
|
/* Provisioning uses the same paper-like surfaces. */
|
|
.create-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, .9fr); align-items: start; gap: 17px; }
|
|
.create-fields { display: grid; gap: 15px; min-width: 0; }
|
|
.form-section { padding: 24px; }
|
|
.form-section .section-heading { margin-bottom: 22px; }
|
|
.form-section .section-heading h2 { display: flex; align-items: center; gap: 9px; }
|
|
.form-section .section-heading > div > span { padding-left: 31px; font-size: 9px; }
|
|
.step-number { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e9e0ee; color: #ac91b7; font-size: 9px; }
|
|
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
|
|
.field > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 11px; }
|
|
.field small { color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.6; }
|
|
.field input { width: 100%; min-height: 39px; padding: 10px 12px; border: 1px solid #ffffffb3; border-radius: 11px; background: #fff9; color: var(--ink-soft); font-size: 12px; transition: background .2s, border-color .2s, box-shadow .2s; }
|
|
.field input:focus { outline: none; background: #ffffffed; border-color: #c3b3a0; box-shadow: 0 0 0 3px #e6dca329; }
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
|
|
.preset-fieldset { margin: 19px 0 0; padding: 0; border: 0; }
|
|
.preset-fieldset legend { color: var(--muted); font-size: 10px; padding: 0 0 9px; }
|
|
.size-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
|
|
.size-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px; border: 1px solid #fff9; border-radius: 13px; background: #ffffff3b; transition: background .2s, border-color .2s; }
|
|
.size-preset .icon { width: 17px; height: 17px; color: #b59dbf; margin-bottom: 4px; }
|
|
.size-preset strong { font-size: 11px; font-weight: 450; color: var(--ink-soft); }
|
|
.size-preset span { font-size: 9px; color: var(--muted); white-space: nowrap; }
|
|
.size-preset.active { border-color: #e6dca2; background: #f6f0d991; }
|
|
.size-preset.active .icon { color: #b7a367; }
|
|
.size-preset.active strong { color: #9b8854; }
|
|
.size-preset:hover { background: #fff9; }
|
|
.password-field { display: flex; align-items: center; position: relative; }
|
|
.password-field input { padding-right: 37px; }
|
|
.password-field > .icon-button { position: absolute; right: 5px; width: 27px; height: 27px; }
|
|
.toggle-field { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; cursor: pointer; }
|
|
.toggle-field > span:first-child { display: grid; gap: 4px; }
|
|
.toggle-field strong { font-size: 11px; font-weight: 450; color: var(--ink-soft); }
|
|
.toggle-field small { font-size: 9px; color: var(--muted); }
|
|
.toggle-field > input { position: absolute; right: 0; opacity: 0; width: 33px; height: 20px; }
|
|
.toggle-track { position: relative; width: 31px; height: 18px; flex: 0 0 auto; border-radius: 15px; background: #d8cce1; transition: background .25s; }
|
|
.toggle-track::after { content: ''; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #79658721; transition: transform .25s var(--ease); }
|
|
.toggle-field > input:checked + .toggle-track { background: #d7c782; }
|
|
.toggle-field > input:checked + .toggle-track::after { transform: translateX(13px); }
|
|
.toggle-field > input:focus-visible + .toggle-track { outline: 2px solid #aa9560; outline-offset: 4px; }
|
|
.create-summary { position: sticky; top: 0; padding: 24px 22px; background: linear-gradient(140deg, #fefcffa6, #f5f0f76b); }
|
|
.summary-art { position: relative; height: 105px; margin-bottom: 20px; }
|
|
.summary-art > div, .summary-art > span { position: absolute; width: 90px; height: 72px; left: 50%; top: 14px; border: 1px solid #fff; border-radius: 17px; background: #eeebf1; box-shadow: 0 10px 21px -10px #9b87ad40; }
|
|
.summary-art > div:nth-child(1) { transform: translateX(-38%) rotate(15deg); background: #e8e2ed; }
|
|
.summary-art > div:nth-child(2) { transform: translateX(-62%) rotate(-12deg); background: #f4f0f8; }
|
|
.summary-art > span { display: grid; place-items: center; transform: translateX(-50%) rotate(-3deg); background: linear-gradient(130deg, #fffeff, #f1eadb); }
|
|
.summary-art .icon { width: 31px; height: 31px; color: #b8a990; }
|
|
.create-summary > .subtle-label { font-size: 8px; color: #ab91b3; }
|
|
.create-summary > h2 { margin-top: 8px; color: var(--ink-soft); font-size: 20px; font-weight: 400; letter-spacing: -.055em; overflow-wrap: anywhere; }
|
|
.create-summary > p:not(.form-error) { margin-top: 10px; color: var(--muted); font-size: 10px; }
|
|
.create-summary .detail-list { margin: 23px 0; }
|
|
.create-summary .detail-list dt, .create-summary .detail-list dd { font-size: 10px; }
|
|
.create-summary .button { font-size: 10px; }
|
|
.summary-cancel { display: flex; justify-content: center; margin-top: 13px; font-size: 9px; color: #b29ab9; }
|
|
.summary-note { display: flex; justify-content: center; align-items: center; gap: 6px; color: #b9a3bd; font-size: 8px; margin-top: 26px; }
|
|
.summary-note .icon { width: 12px; height: 12px; }
|
|
.form-error { color: #b1726b; font-size: 10px; line-height: 1.7; margin: 9px 0; overflow-wrap: anywhere; }
|
|
.form-error:empty { display: none; }
|
|
|
|
/* Host readiness and installation. */
|
|
.health-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
|
|
.health-side { display: grid; gap: 16px; }
|
|
.diagnostics-panel { padding: 22px; }
|
|
.diagnostics-list { display: grid; gap: 8px; }
|
|
.diagnostic-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 12px; border: 1px solid #ffffff61; border-radius: 13px; background: #ffffff47; }
|
|
.diagnostic-item > .diagnostic-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 9px; background: #e8ebe1; color: #98a383; }
|
|
.diagnostic-icon .icon { width: 13px; height: 13px; }
|
|
.diagnostic-item.attention > .diagnostic-icon { background: #efe0d8; color: #c19e8a; }
|
|
.diagnostic-item > div { min-width: 0; flex: 1; }
|
|
.diagnostic-item h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ink-soft); font-size: 11px; font-weight: 500; }
|
|
.diagnostic-item h3 > span { font-size: 9px; font-weight: 450; white-space: nowrap; color: #7a8562; }
|
|
.diagnostic-item.attention h3 > span { color: #a2856a; }
|
|
.diagnostic-item p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
|
|
.install-panel { padding: 24px; }
|
|
.install-panel > .round-icon { width: 44px; height: 44px; background: #f2eacb; color: #b09c67; margin-bottom: 18px; }
|
|
.install-panel h2 { font-size: 16px; font-weight: 450; letter-spacing: -.04em; }
|
|
.install-panel > p { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.8; }
|
|
.install-assets { display: grid; gap: 12px; margin: 24px 0; padding: 17px 0; border-block: 1px solid #beabcc24; }
|
|
.install-assets > span { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); }
|
|
.install-assets .icon { width: 14px; height: 14px; color: #bca5c3; }
|
|
.install-panel .toggle-field { margin-top: 6px; }
|
|
.install-panel .toggle-field strong { font-size: 9px; }
|
|
.install-panel .button { font-size: 10px; }
|
|
.install-result { max-height: 280px; margin: 17px 0 0; padding: 13px; border-radius: 12px; background: #e9e1ee; color: #95749d; font-family: var(--mono); font-size: 9px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; }
|
|
.server-info { padding: 23px; }
|
|
.server-info .detail-list { margin: 0 0 18px; }
|
|
.server-info .detail-list > div { flex-direction: column; gap: 3px; }
|
|
.server-info .detail-list dd { max-width: 100%; text-align: left; }
|
|
.server-info .quiet-link { font-size: 9px; }
|
|
|
|
/* Authentication is part of the same workspace, not a different product. */
|
|
.auth-screen { display: grid; place-items: center; min-height: 100dvh; padding: 32px; }
|
|
.auth-window { display: grid; grid-template-columns: 1.08fr 1fr; width: min(100%, 990px); min-height: 620px; overflow: hidden; border: 1px solid #ffffffe0; border-radius: 29px; background: #f3f0f6; box-shadow: 0 25px 75px -36px #7158834d; }
|
|
.auth-story { display: flex; flex-direction: column; position: relative; padding: 35px 40px 26px; overflow: hidden; background: linear-gradient(130deg, #edeaf1, #e4deeb); border-right: 1px solid #ffffffa1; border-radius: 28px; }
|
|
.auth-story-copy { position: relative; margin-top: 55px; z-index: 1; }
|
|
.auth-story-copy > .subtle-label { font-size: 9px; color: #a68dad; }
|
|
.auth-story-copy h1 { font-size: 43px; letter-spacing: -.065em; line-height: 1.2; font-weight: 400; color: #64556e; margin-top: 14px; }
|
|
.auth-story-copy p { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 18px; }
|
|
.auth-sculpture { position: relative; flex: 1; min-height: 255px; }
|
|
.sculpture-card { position: absolute; width: 155px; height: 125px; left: 50%; top: 74px; border-radius: 22px; border: 1px solid #ffffffe0; background: linear-gradient(130deg, #fefcff, #eee6f1); box-shadow: 0 18px 25px -15px #7b608d59; }
|
|
.sculpture-back { transform: translateX(-63%) rotate(-22deg) translateY(-25px); background: #e4dbea; }
|
|
.sculpture-middle { transform: translateX(-37%) rotate(15deg) translateY(-15px); }
|
|
.sculpture-front { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 20px 24px; transform: translateX(-50%) rotate(-4deg); background: linear-gradient(130deg, #fff, #f2ecd9); }
|
|
.sculpture-front > .icon { width: 30px; height: 30px; color: #b5a68c; }
|
|
.sculpture-front > span { color: #a58c8a; font-size: 10px; }
|
|
.sculpture-lights { display: flex; gap: 5px; }
|
|
.sculpture-lights i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #e0cf85; }
|
|
.sculpture-lights i:nth-child(2) { background: #d5cbdc; }
|
|
.sculpture-orbit { position: absolute; width: 260px; height: 260px; left: 50%; top: 3px; border: 1px solid #c9b9d438; border-radius: 50%; transform: translateX(-50%); }
|
|
.orbit-inner { width: 206px; height: 206px; top: 30px; border-color: #fff7; }
|
|
.orbit-outer::after { content: ''; position: absolute; top: 31px; left: 36px; width: 7px; height: 7px; border-radius: 50%; background: #e1d094; box-shadow: 0 0 0 5px #e6d9b326; }
|
|
.sculpture-caption { position: absolute; left: 0; right: 0; top: 240px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #af93b5; font-size: 8px; }
|
|
.sculpture-caption .dot { width: 4px; height: 4px; }
|
|
.auth-story-footer { position: relative; margin-top: 37px; color: #ae96b5; font-size: 8px; }
|
|
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 48px 45px; background: linear-gradient(150deg, #faf8fc, #f1ebf5); }
|
|
.auth-panel-inner { width: 100%; max-width: 310px; }
|
|
.auth-lock { width: 43px; height: 43px; background: #eee7f2; color: #a18aaa; margin-bottom: 28px; }
|
|
.auth-panel h2 { margin: 9px 0 13px; font-size: 27px; font-weight: 400; letter-spacing: -.055em; color: #735b7d; }
|
|
.auth-panel-inner > p { color: var(--muted); font-size: 12px; line-height: 1.85; }
|
|
.auth-panel form { margin-top: 29px; }
|
|
.auth-panel .field input { background: #fdfbfe; border-color: #e7dcec; min-height: 43px; }
|
|
.auth-panel .button { margin-top: 16px; min-height: 41px; }
|
|
.auth-panel-inner > .auth-note { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #b39bbd; margin-top: 19px; }
|
|
.auth-note .icon { width: 12px; height: 12px; }
|
|
.auth-help { position: absolute; bottom: 30px; color: #b39bbd; font-size: 8px; }
|
|
|
|
/* Small interactions, accessible dialogs, and a useful search. */
|
|
.search-results { position: absolute; top: calc(100% + 10px); right: -8px; width: 330px; max-width: calc(100vw - 40px); max-height: 380px; padding: 7px; overflow-y: auto; z-index: 12; border: 1px solid #fff; border-radius: 17px; background: #faf7fceF; box-shadow: 0 12px 35px #6f538526; backdrop-filter: blur(20px); }
|
|
.search-result { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 11px; color: #8b6f98; font-size: 10px; }
|
|
.search-result[aria-selected='true'], .search-result:hover { background: #eee5f4; }
|
|
.search-result > .icon { width: 15px; height: 15px; color: #b398c2; }
|
|
.search-result > div { min-width: 0; flex: 1; }
|
|
.search-result strong { display: block; font-size: 10px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.search-result small { display: block; margin-top: 2px; font-size: 8px; color: #b296c0; }
|
|
.search-empty { padding: 20px; color: #ac8cb9; font-size: 10px; }
|
|
.action-menu { position: fixed; width: 181px; padding: 6px; z-index: 30; border: 1px solid #fff; border-radius: 15px; background: #fcf9feee; backdrop-filter: blur(18px); box-shadow: 0 12px 30px #71538025; }
|
|
.action-menu button { display: flex; align-items: center; gap: 9px; padding: 10px; width: 100%; border-radius: 10px; background: transparent; color: #8b6b9a; font-size: 10px; text-align: left; }
|
|
.action-menu button:hover, .action-menu button:focus { background: #ede3f4; outline: none; }
|
|
.action-menu .icon { width: 14px; height: 14px; color: #b599c3; }
|
|
.action-menu .menu-danger { color: #b77970; }
|
|
.action-menu .menu-danger .icon { color: #c7978f; }
|
|
.notice { display: flex; align-items: center; gap: 9px; padding: 12px 15px; margin-bottom: 20px; border: 1px solid #fff9; border-radius: 13px; background: #f3ebe0; color: #a38a67; font-size: 10px; overflow-wrap: anywhere; }
|
|
.notice > .icon { width: 15px; height: 15px; }
|
|
.notice > .quiet-link { margin-left: auto; flex-shrink: 0; color: inherit; }
|
|
.notice-error { background: #f3e6e3; color: #ad7973; }
|
|
.confirm-dialog { width: min(420px, calc(100% - 34px)); max-height: calc(100dvh - 50px); padding: 29px; border: 1px solid #fff; border-radius: 24px; background: #f8f5fb; color: var(--ink); box-shadow: 0 30px 90px #69537738; overflow-y: auto; }
|
|
.confirm-dialog[open] { animation: dialog-appear .25s var(--ease); }
|
|
.confirm-dialog::backdrop { background: #6655722e; backdrop-filter: blur(6px); }
|
|
.confirm-dialog .round-icon { background: #ece4f1; margin-bottom: 19px; }
|
|
.confirm-dialog .subtle-label { font-size: 9px; }
|
|
.confirm-dialog h2 { color: var(--ink); font-size: 21px; font-weight: 450; letter-spacing: -.045em; margin-top: 8px; overflow-wrap: anywhere; }
|
|
.confirm-dialog p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 13px; }
|
|
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 26px; }
|
|
.toast-container { position: fixed; bottom: 27px; right: 30px; display: grid; gap: 9px; max-width: min(370px, calc(100vw - 34px)); z-index: 60; }
|
|
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 17px; border: 1px solid #fff; border-radius: 15px; background: #fbf8fef5; color: #9271a1; box-shadow: 0 9px 35px #77568521; font-size: 11px; animation: toast-appear .35s var(--ease); overflow-wrap: anywhere; }
|
|
.toast > .icon { width: 16px; height: 16px; color: #b2b98a; margin-top: 1px; }
|
|
.toast.toast-error { color: #b7786e; }
|
|
.toast.toast-error > .icon { color: #c68d81; }
|
|
.noscript-message { padding: 20px; text-align: center; color: #8c6d98; }
|
|
.nav-scrim { display: none; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
@keyframes page-appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes dialog-appear { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
|
|
@keyframes toast-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
|
* { scrollbar-width: thin; scrollbar-color: #c9bdd354 transparent; }
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-thumb { border-radius: 8px; background: #c9bdd36b; }
|
|
::-webkit-scrollbar-thumb:hover { background: #b5a4c18f; }
|
|
|
|
@media (min-width: 1650px) {
|
|
.app-shell { grid-template-columns: 423px minmax(0, 1fr); }
|
|
.workspace-drawer { grid-template-columns: minmax(0, 1fr) 174px; gap: 19px; padding-inline: 24px 21px; }
|
|
.nav-item { font-size: 11px; min-height: 40px; }
|
|
.sidebar-heading h2 { font-size: 23px; }
|
|
.context-rail { gap: 20px; }
|
|
.insight-card { min-height: 177px; padding: 17px; }
|
|
.insight-card .card-caption { font-size: 10px; }
|
|
.insight-card p { font-size: 10px; }
|
|
.collection-label { min-height: 72px; }
|
|
.collection-label strong { font-size: 11px; }
|
|
.collection-label span { font-size: 9px; }
|
|
.collection-art { height: 79px; }
|
|
.topbar { min-height: 79px; }
|
|
.page-content { padding: 15px 33px 30px; }
|
|
.metric-card { min-height: 169px; padding: 20px 23px; }
|
|
.card-caption h2 { font-size: 12px; }
|
|
.fleet-number { margin-block: 15px; }
|
|
.fleet-number > strong { font-size: 45px; }
|
|
.fleet-number > span, .metric-bottom, .signal-readouts small { font-size: 9px; }
|
|
.range-labels { font-size: 8px; }
|
|
.signal-readouts { margin-top: 20px; }
|
|
.resource-line > span { font-size: 12px; }
|
|
.resource-line > small { font-size: 8px; }
|
|
.resource-line { margin-top: 23px; }
|
|
.second-resource { margin-top: 17px; }
|
|
.section-heading h2 { font-size: 15px; }
|
|
.section-heading > div > span { font-size: 10px; }
|
|
.portfolio-section { margin-top: 31px; }
|
|
.portfolio-table th { font-size: 9px; }
|
|
.portfolio-table td { padding-block: 15px; font-size: 10px; }
|
|
.portfolio-table .badge { font-size: 9px; }
|
|
.portfolio-name { font-size: 11px; }
|
|
.overview-bottom { margin-top: 27px; }
|
|
.fleet-ring { width: 226px; }
|
|
.ring-center > strong { font-size: 51px; }
|
|
.ring-center > span, .ring-legend span { font-size: 10px; }
|
|
.ring-center > span:last-child, .ring-legend small { font-size: 8px; }
|
|
.ring-legend { max-width: 195px; gap: 25px; }
|
|
.note-row { padding-block: 18px; }
|
|
.note-row strong { font-size: 11px; }
|
|
.note-row small { font-size: 9px; }
|
|
.notes-footer { font-size: 10px; }
|
|
.machine-table th { font-size: 10px; }
|
|
.machine-table td { padding-block: 18px; font-size: 11px; }
|
|
.machine-name a { max-width: 260px; font-size: 12px; }
|
|
.machine-name small { font-size: 9px; }
|
|
}
|
|
|
|
@media (max-width: 1360px) {
|
|
.app-shell { grid-template-columns: 342px minmax(0, 1fr); width: calc(100% - 32px); height: calc(100dvh - 32px); margin: 16px auto; }
|
|
.workspace-drawer { grid-template-columns: minmax(0, 1fr) 142px; gap: 12px; padding-inline: 16px 14px; }
|
|
.sidebar-heading h2 { font-size: 19px; }
|
|
.brand-tag { display: none; }
|
|
.nav-item { font-size: 9px; gap: 8px; padding-inline: 9px; }
|
|
.insight-card { padding-inline: 12px; }
|
|
.insight-card .card-caption { font-size: 8px; }
|
|
.insight-card p { font-size: 8px; }
|
|
.collection-label { padding-inline: 12px; }
|
|
.collection-label span { font-size: 7px; }
|
|
.topbar { padding-inline: 20px; }
|
|
.page-content { padding-inline: 20px; }
|
|
.metric-card { padding: 15px; }
|
|
.card-caption h2 { font-size: 10px; }
|
|
.fleet-number > span { font-size: 7px; }
|
|
.fleet-number { gap: 10px; }
|
|
.metric-bottom { font-size: 7px; }
|
|
.overview-bottom { grid-template-columns: 1.15fr 1fr; }
|
|
.activity-panel, .notes-panel { padding-inline: 16px; }
|
|
.fleet-ring { width: 165px; }
|
|
.ring-center > strong { font-size: 37px; }
|
|
.ring-legend { gap: 18px; }
|
|
.ring-legend small { display: none; }
|
|
.note-row { padding-block: 11px; }
|
|
.note-row strong { font-size: 8px; }
|
|
.note-row small { font-size: 7px; }
|
|
.notes-footer { font-size: 7px; }
|
|
.create-layout { grid-template-columns: minmax(0, 1.7fr) minmax(195px, .85fr); gap: 13px; }
|
|
.form-section { padding: 19px; }
|
|
.create-summary { padding: 21px 17px; }
|
|
.size-preset { padding: 10px 9px; }
|
|
.size-preset span { font-size: 7px; }
|
|
.compact-metric { padding: 17px; gap: 11px; }
|
|
.health-layout { grid-template-columns: 1.2fr 1fr; gap: 13px; }
|
|
}
|
|
|
|
@media (max-width: 1150px) {
|
|
.app-shell { grid-template-columns: 200px minmax(0, 1fr); }
|
|
.workspace-drawer { display: flex; padding: 25px 17px; }
|
|
.sidebar { width: 100%; }
|
|
.context-rail { display: none; }
|
|
.brand-tag { display: inline; }
|
|
.nav-item { font-size: 10px; }
|
|
.sidebar-heading h2 { font-size: 21px; }
|
|
.overview-bottom { grid-template-columns: 1.2fr 1fr; }
|
|
.health-layout { grid-template-columns: 1.15fr 1fr; }
|
|
.diagnostics-panel, .install-panel, .server-info { padding: 19px; }
|
|
.create-layout { grid-template-columns: minmax(0, 1.7fr) minmax(208px, .9fr); }
|
|
.detail-heading { align-items: flex-start; }
|
|
.ssh-panel { align-items: flex-start; flex-direction: column; gap: 15px; }
|
|
.ssh-command { width: 100%; }
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.app-shell { grid-template-columns: 182px minmax(0, 1fr); }
|
|
.workspace-drawer { padding-inline: 13px; }
|
|
.brand-tag { display: none; }
|
|
.nav-item { font-size: 9px; }
|
|
.global-search { max-width: 185px; }
|
|
.global-search kbd { display: none; }
|
|
.topbar { padding-inline: 18px; gap: 6px; }
|
|
.workspace-crumb { font-size: 8px; gap: 6px; padding-inline: 10px; }
|
|
.page-content { padding-inline: 18px; }
|
|
.page-heading h1 { font-size: 24px; }
|
|
.date-label { font-size: 8px; }
|
|
.overview-metrics { grid-template-columns: 1fr 1fr; gap: 11px; }
|
|
.resources-metric { grid-column: 1 / -1; min-height: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding-block: 14px; }
|
|
.resources-metric .card-caption { grid-column: 1 / -1; }
|
|
.resources-metric .resource-line { grid-row: 2; margin-top: 13px; }
|
|
.resources-metric .resource-track { grid-row: 3; }
|
|
.resources-metric .second-resource { grid-column: 2; }
|
|
.overview-bottom { grid-template-columns: 1fr; }
|
|
.activity-body { justify-content: center; gap: 30px; }
|
|
.fleet-ring { width: 185px; }
|
|
.ring-legend { max-width: 165px; gap: 23px; }
|
|
.ring-legend small { display: block; }
|
|
.notes-panel { padding: 20px; }
|
|
.note-row { padding-block: 12px; }
|
|
.note-row strong { font-size: 10px; }
|
|
.note-row small { font-size: 8px; }
|
|
.notes-footer { font-size: 9px; }
|
|
.compact-metrics { gap: 9px; }
|
|
.compact-metric { padding: 15px; gap: 9px; }
|
|
.compact-metric > .round-icon { display: none; }
|
|
.compact-metric strong { font-size: 24px; }
|
|
.compact-metric span { font-size: 8px; }
|
|
.filter-tab { padding-inline: 10px; font-size: 9px; }
|
|
.fleet-toolbar { flex-wrap: wrap; gap: 11px; }
|
|
.health-layout, .network-layout { grid-template-columns: 1fr; }
|
|
.health-side { grid-template-columns: 1fr 1fr; gap: 13px; align-items: start; }
|
|
.fabric-diagram { padding-block: 10px; }
|
|
.network-map-panel .fabric-diagram { display: grid; grid-template-columns: 1fr 50px 1fr; justify-items: center; }
|
|
.network-map-panel .fabric-connector { height: 1px; width: 45px; }
|
|
.network-map-panel .fabric-branches, .network-map-panel .fabric-guests { display: none; }
|
|
.network-map-panel .fabric-diagram > .muted { grid-column: 1 / -1; margin-top: 25px; }
|
|
.network-map-panel .panel-footnote { text-align: center; }
|
|
.create-layout { grid-template-columns: 1fr; }
|
|
.create-summary { position: static; padding: 23px; }
|
|
.summary-art { display: none; }
|
|
.create-summary .detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; margin-block: 15px; }
|
|
.create-summary > .button { max-width: 300px; margin: auto; display: flex; }
|
|
.summary-note { margin-top: 17px; }
|
|
.detail-grid { grid-template-columns: 1fr; }
|
|
.detail-heading { flex-direction: column; gap: 17px; }
|
|
.auth-window { min-height: 590px; }
|
|
.auth-story { padding: 29px; }
|
|
.auth-story-copy h1 { font-size: 37px; }
|
|
.auth-panel { padding-inline: 30px; }
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
html, body { background: #e9e5ef; }
|
|
.app-shell { display: block; width: calc(100% - 20px); height: auto; min-height: calc(100dvh - 20px); margin: 10px; border-radius: 21px; overflow: clip; }
|
|
.workspace { min-height: calc(100dvh - 22px); }
|
|
.workspace-drawer { position: fixed; inset: 10px auto 10px 10px; width: 237px; z-index: 42; padding: 25px 20px; background: #f2edf7f5; border: 1px solid #fff; border-radius: 22px; backdrop-filter: blur(25px); transform: translateX(calc(-100% - 16px)); visibility: hidden; transition: transform .3s var(--ease), visibility .3s; box-shadow: 15px 0 45px #72508412; }
|
|
.app-shell.nav-open .workspace-drawer { visibility: visible; transform: translateX(0); }
|
|
.nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 41; background: #80648e36; backdrop-filter: blur(3px); }
|
|
.brand-tag { display: inline; }
|
|
.nav-item { font-size: 11px; min-height: 41px; }
|
|
.sidebar-heading h2 { font-size: 23px; }
|
|
.sidebar-bottom { padding-top: 35px; }
|
|
.sidebar-bottom > .quiet-link { margin-top: 20px; }
|
|
.mobile-menu { display: inline-flex; width: 29px; height: 29px; flex: 0 0 auto; }
|
|
.topbar { min-height: 61px; padding-inline: 14px; gap: 7px; }
|
|
.workspace-crumb { background: transparent; padding-inline: 2px; font-size: 10px; box-shadow: none; }
|
|
.workspace-crumb > span:not(:last-child) { display: none; }
|
|
#breadcrumb { color: #92749d; }
|
|
.refresh-button { margin-right: 2px; }
|
|
.global-search { max-width: 215px; min-width: 80px; }
|
|
.global-search input { font-size: 9px; }
|
|
.topbar-create { flex-shrink: 0; margin-left: 1px; }
|
|
.page-content { flex: 1 0 auto; overflow: visible; padding: 13px 17px 24px; scrollbar-gutter: auto; }
|
|
.page-heading { gap: 12px; margin-bottom: 20px; }
|
|
.page-heading h1 { font-size: 26px; }
|
|
.page-heading .subtle-label { font-size: 9px; }
|
|
.date-label { display: none; }
|
|
.metric-card { min-height: 147px; padding: 17px; }
|
|
.card-caption h2 { font-size: 11px; }
|
|
.fleet-number > strong { font-size: 39px; }
|
|
.fleet-number > span { font-size: 8px; }
|
|
.metric-bottom { font-size: 8px; }
|
|
.resources-metric { min-height: 101px; }
|
|
.portfolio-section { margin-top: 25px; }
|
|
.portfolio-table { min-width: 540px; }
|
|
.overview-bottom { margin-top: 19px; }
|
|
.activity-panel, .notes-panel { padding: 20px; }
|
|
.activity-body { gap: 24px; }
|
|
.fleet-ring { width: 192px; }
|
|
.ring-center > strong { font-size: 43px; }
|
|
.ring-legend span { font-size: 10px; }
|
|
.ring-legend small { font-size: 8px; }
|
|
.page-footer { flex-direction: column; gap: 5px; font-size: 8px; margin-top: 20px; }
|
|
.compact-metrics { margin-bottom: 21px; gap: 8px; }
|
|
.compact-metric { min-height: 83px; padding: 14px; }
|
|
.compact-metric strong { font-size: 26px; }
|
|
.compact-metric .metric-word { font-size: 17px; }
|
|
.compact-metric span { font-size: 8px; }
|
|
.fleet-toolbar { margin-bottom: 13px; }
|
|
.fleet-list-panel { padding-inline: 11px; }
|
|
.filter-tabs { width: 100%; justify-content: space-between; gap: 0; }
|
|
.filter-tab { flex: 1; font-size: 9px; padding-inline: 9px; }
|
|
.fleet-toolbar > .select-wrap { margin-left: auto; }
|
|
.list-search-row { gap: 8px; }
|
|
.search-field input { font-size: 9px; }
|
|
.list-search-row > span { font-size: 8px; }
|
|
.list-footer { font-size: 8px; }
|
|
.list-footer > span:last-child { display: none; }
|
|
.bulk-controls { flex-wrap: wrap; gap: 7px; }
|
|
.bulk-controls > span { font-size: 9px; }
|
|
.bulk-controls select { font-size: 8px; }
|
|
.bulk-controls .button { font-size: 9px; }
|
|
.health-side { grid-template-columns: 1fr; }
|
|
.health-layout { gap: 13px; }
|
|
.install-panel, .server-info, .diagnostics-panel { padding: 22px; }
|
|
.diagnostic-item p { font-size: 9px; }
|
|
.diagnostic-item h3 { font-size: 11px; }
|
|
.install-panel > p { font-size: 11px; }
|
|
.install-panel .toggle-field strong { font-size: 10px; }
|
|
.server-info .detail-list > div { flex-direction: row; }
|
|
.server-info .detail-list dd { max-width: 65%; text-align: right; }
|
|
.form-section { padding: 21px; }
|
|
.create-summary { padding: 23px; }
|
|
.size-preset { padding: 12px; }
|
|
.size-preset span { font-size: 8px; }
|
|
.field input { font-size: 12px; }
|
|
.detail-delete-row { align-items: flex-start; }
|
|
.detail-delete-row > span { max-width: 170px; }
|
|
.ports-panel > .section-heading, .log-panel > .section-heading, .resources-panel > .section-heading { align-items: flex-start; }
|
|
.ports-panel > .section-heading > div:first-child, .log-panel > .section-heading > div:first-child, .resources-panel > .section-heading > div:first-child { flex: 1; }
|
|
.auth-screen { padding: 20px; }
|
|
.auth-window { grid-template-columns: 1fr; min-height: 0; max-width: 440px; }
|
|
.auth-story { min-height: 240px; padding: 26px; border-right: 0; }
|
|
.auth-story-copy { margin-top: 27px; }
|
|
.auth-story-copy > .subtle-label { font-size: 8px; }
|
|
.auth-story-copy h1 { font-size: 34px; margin-top: 8px; }
|
|
.auth-story-copy p { display: none; }
|
|
.auth-sculpture { position: absolute; width: 130px; height: 150px; min-height: 0; right: -2px; bottom: 23px; opacity: .65; transform: scale(.62); transform-origin: right bottom; }
|
|
.sculpture-caption { display: none; }
|
|
.auth-story-footer { margin-top: 19px; font-size: 7px; }
|
|
.auth-panel { padding: 31px 28px 60px; }
|
|
.auth-lock { display: none; }
|
|
.auth-panel h2 { font-size: 25px; }
|
|
.auth-panel form { margin-top: 22px; }
|
|
.auth-help { bottom: 23px; }
|
|
.toast-container { bottom: 17px; right: 17px; }
|
|
.notice { align-items: flex-start; font-size: 9px; }
|
|
}
|
|
|
|
@media (max-width: 390px) {
|
|
.topbar { gap: 3px; padding-inline: 11px; }
|
|
.workspace-crumb { font-size: 9px; }
|
|
.global-search input { font-size: 8px; }
|
|
.page-content { padding-inline: 13px; }
|
|
.page-heading h1 { font-size: 23px; }
|
|
.page-heading > .button { padding-inline: 12px; font-size: 9px; }
|
|
.page-heading > .tag { font-size: 8px; padding-inline: 8px; }
|
|
.card-caption h2 { font-size: 10px; }
|
|
.metric-card { padding: 14px; }
|
|
.fleet-number > span { font-size: 7px; }
|
|
.metric-bottom { font-size: 7px; }
|
|
.signal-readouts small { font-size: 7px; }
|
|
.range-labels { font-size: 6px; }
|
|
.activity-body { gap: 12px; }
|
|
.fleet-ring { width: 160px; }
|
|
.ring-center > strong { font-size: 36px; }
|
|
.ring-legend span { font-size: 9px; }
|
|
.ring-legend small { font-size: 7px; }
|
|
.form-section { padding: 17px; }
|
|
.size-presets { gap: 7px; }
|
|
.size-preset { padding: 10px; }
|
|
.size-preset span { font-size: 7px; }
|
|
.form-grid { gap: 11px; }
|
|
.field > span:first-child { font-size: 9px; }
|
|
.section-heading h2 { font-size: 12px; }
|
|
.log-panel .section-heading { flex-wrap: wrap; }
|
|
.auth-screen { padding: 13px; }
|
|
}
|
|
|
|
@media (max-height: 820px) and (min-width: 1151px) {
|
|
.context-rail { gap: 13px; padding-top: 46px; }
|
|
.insight-card { min-height: 150px; }
|
|
.collection-art { height: 53px; }
|
|
.collection-label { min-height: 60px; }
|
|
.rail-footnote { display: none; }
|
|
.sidebar-bottom { padding-top: 30px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
|
|
}
|