chore: rename repository to NODEDC MISSION CORE
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,388 @@
|
||||
:root {
|
||||
background: #050506;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 320px;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
background: #050506;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#root[data-nodedc-theme="dark"],
|
||||
body {
|
||||
--nodedc-accent-rgb: 247 248 244;
|
||||
--nodedc-on-accent-rgb: 8 8 10;
|
||||
--nodedc-focus-surface: rgb(255 255 255 / 0.09);
|
||||
--nodedc-primary-action-bg: rgb(247 248 244 / 0.96);
|
||||
--nodedc-primary-action-hover: rgb(255 255 255);
|
||||
--nodedc-primary-action-color: rgb(8 8 10 / 0.96);
|
||||
--nodedc-primary-action-shadow: none;
|
||||
--nodedc-modal-surface: rgb(15 15 17 / 0.97);
|
||||
--nodedc-floating-surface: rgb(15 15 17 / 0.98);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
.control-station,
|
||||
body {
|
||||
--station-panel: #151517;
|
||||
--station-panel-soft: #0d0d0f;
|
||||
--station-stage: #08090b;
|
||||
--station-hairline: rgb(255 255 255 / 0.08);
|
||||
--station-hairline-strong: rgb(255 255 255 / 0.13);
|
||||
--station-accent-soft: rgb(255 255 255 / 0.045);
|
||||
--station-success-soft: rgb(255 255 255 / 0.045);
|
||||
--station-warning-soft: rgb(255 255 255 / 0.045);
|
||||
--station-danger-soft: rgb(255 255 255 / 0.045);
|
||||
}
|
||||
|
||||
.nodedc-button[data-variant="accent"] {
|
||||
--nodedc-button-bg: var(--nodedc-primary-action-bg);
|
||||
--nodedc-button-color: var(--nodedc-primary-action-color);
|
||||
}
|
||||
|
||||
.nodedc-button[data-variant="accent"]:hover:not(:disabled) {
|
||||
background: var(--nodedc-primary-action-hover);
|
||||
}
|
||||
|
||||
.nodedc-button[data-variant="danger"] {
|
||||
color: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.nodedc-button[data-variant="danger"]:hover:not(:disabled) {
|
||||
background: var(--nodedc-glass-control-hover);
|
||||
}
|
||||
|
||||
.nodedc-status {
|
||||
min-height: auto;
|
||||
justify-content: flex-start;
|
||||
gap: 0.42rem;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--nodedc-text-primary);
|
||||
padding: 0;
|
||||
font-size: var(--nodedc-font-size-sm);
|
||||
font-weight: var(--nodedc-font-weight-medium);
|
||||
}
|
||||
|
||||
.nodedc-status::before {
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
flex: 0 0 0.42rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.nodedc-status[data-tone="success"],
|
||||
.nodedc-status[data-tone="warning"],
|
||||
.nodedc-status[data-tone="danger"],
|
||||
.nodedc-status[data-tone="accent"] {
|
||||
background: transparent;
|
||||
color: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.nodedc-status[data-tone="success"]::before {
|
||||
background: rgb(var(--nodedc-success-rgb));
|
||||
}
|
||||
|
||||
.nodedc-status[data-tone="warning"]::before {
|
||||
background: rgb(var(--nodedc-warning-rgb));
|
||||
}
|
||||
|
||||
.nodedc-status[data-tone="danger"]::before {
|
||||
background: rgb(var(--nodedc-danger-rgb));
|
||||
}
|
||||
|
||||
.nodedc-status[data-tone="accent"]::before {
|
||||
background: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.nodedc-inspector__section-trigger[data-open="true"],
|
||||
.nodedc-inspector__section-trigger[data-active="true"],
|
||||
.nodedc-inspector__section-trigger[data-tone="accent"] {
|
||||
background: var(--nodedc-glass-control-hover);
|
||||
color: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.nodedc-inspector__section-trigger[data-open="true"] .nodedc-inspector__section-description,
|
||||
.nodedc-inspector__section-trigger[data-active="true"] .nodedc-inspector__section-description,
|
||||
.nodedc-inspector__section-trigger[data-tone="accent"] .nodedc-inspector__section-description {
|
||||
color: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.nodedc-glass-material::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nodedc-header__avatar {
|
||||
background: rgb(226 226 226);
|
||||
}
|
||||
|
||||
.control-station .nodedc-application-panel__body {
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-color: var(--nodedc-scrollbar-thumb) transparent;
|
||||
}
|
||||
|
||||
.section-eyebrow,
|
||||
.metric-card__eyebrow {
|
||||
display: block;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 820;
|
||||
letter-spacing: 0.12em;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel-heading h2,
|
||||
.panel-heading h3 {
|
||||
margin: 0.42rem 0 0;
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 1.22rem;
|
||||
font-weight: 730;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.panel-heading--compact {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.workspace-lead {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.workspace-lead > div:first-child {
|
||||
min-width: 0;
|
||||
max-width: 62rem;
|
||||
}
|
||||
|
||||
.workspace-lead h2 {
|
||||
margin: 0.5rem 0 0.6rem;
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: clamp(1.7rem, 3vw, 3rem);
|
||||
font-weight: 690;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.workspace-lead p {
|
||||
max-width: 50rem;
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.workspace-lead__note {
|
||||
max-width: 20rem;
|
||||
flex: 0 0 auto;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: rgb(255 255 255 / 0.045);
|
||||
color: var(--nodedc-text-muted);
|
||||
padding: 0.58rem 0.85rem;
|
||||
font-size: 0.66rem;
|
||||
line-height: 1.35;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.workspace-lead__status {
|
||||
display: grid;
|
||||
max-width: 22rem;
|
||||
justify-items: end;
|
||||
gap: 0.55rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.45;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
min-height: 7rem;
|
||||
background: var(--station-panel);
|
||||
}
|
||||
|
||||
.metric-card[data-featured="true"] {
|
||||
background: var(--station-panel);
|
||||
}
|
||||
|
||||
.metric-card__reading {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.36rem;
|
||||
margin-top: 0.65rem;
|
||||
}
|
||||
|
||||
.metric-card__reading strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: clamp(1.4rem, 2vw, 2.2rem);
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.metric-card__reading span,
|
||||
.metric-card p {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.metric-card p {
|
||||
margin: 0.6rem 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-stack,
|
||||
.inspector-control-stack {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal-contract-note {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 0.8rem;
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 255 255 / 0.045);
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-contract-note[data-tone="accent"] {
|
||||
background: rgb(255 255 255 / 0.045);
|
||||
}
|
||||
|
||||
.modal-contract-note[data-tone="warning"] {
|
||||
background: rgb(255 255 255 / 0.045);
|
||||
}
|
||||
|
||||
.modal-contract-note[data-tone="success"] {
|
||||
background: rgb(255 255 255 / 0.045);
|
||||
}
|
||||
|
||||
.modal-contract-note > svg {
|
||||
margin-top: 0.12rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
}
|
||||
|
||||
.modal-contract-note strong,
|
||||
.modal-contract-note p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-contract-note strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.modal-contract-note p {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.source-format-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.source-format-list > div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.1fr);
|
||||
gap: 1rem;
|
||||
border-top: 1px solid var(--station-hairline);
|
||||
padding: 0.7rem 0;
|
||||
}
|
||||
|
||||
.source-format-list code {
|
||||
overflow: hidden;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.65rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.source-format-list span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.67rem;
|
||||
}
|
||||
|
||||
.layer-inspector-intro {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 0.65rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.layer-inspector-intro p {
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.69rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.layer-placeholder-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.layer-placeholder-list > span {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.layer-placeholder-list i {
|
||||
width: 0.46rem;
|
||||
height: 0.46rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.layer-placeholder-list small {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
@@ -0,0 +1,416 @@
|
||||
.device-workspace__grid {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(23rem, 0.78fr) minmax(34rem, 1.22fr);
|
||||
align-items: start;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.device-workspace__side {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.connection-panel,
|
||||
.status-panel,
|
||||
.latency-panel,
|
||||
.session-panel {
|
||||
background: var(--station-panel);
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 255 255 / 0.045);
|
||||
color: var(--nodedc-text-primary);
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
|
||||
.error-banner__dot {
|
||||
width: 0.46rem;
|
||||
height: 0.46rem;
|
||||
align-self: start;
|
||||
margin-top: 0.28rem;
|
||||
border-radius: 50%;
|
||||
background: rgb(var(--nodedc-danger-rgb));
|
||||
}
|
||||
|
||||
.error-banner strong,
|
||||
.error-banner p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-banner strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.error-banner p {
|
||||
margin-top: 0.2rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.error-banner__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.wizard-list {
|
||||
display: grid;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
.wizard-step {
|
||||
display: grid;
|
||||
grid-template-columns: 2.2rem minmax(0, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wizard-step__rail {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wizard-step__rail::after {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
background: var(--station-hairline);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.wizard-step:last-child .wizard-step__rail::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wizard-step__rail span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #27272a;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.59rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.wizard-step__content {
|
||||
min-width: 0;
|
||||
padding: 0.08rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.wizard-step:last-child .wizard-step__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wizard-step__content > header {
|
||||
display: flex;
|
||||
min-height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.7rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.wizard-step__content h3 {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 710;
|
||||
}
|
||||
|
||||
.step-copy,
|
||||
.safety-note,
|
||||
.live-instruction {
|
||||
margin: 0 0 0.72rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.65rem;
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
.safety-note,
|
||||
.live-instruction {
|
||||
margin: 0.7rem 0 0;
|
||||
}
|
||||
|
||||
.device-list {
|
||||
display: grid;
|
||||
max-height: 20rem;
|
||||
gap: 0.48rem;
|
||||
margin-top: 0.72rem;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
.device-row {
|
||||
display: grid;
|
||||
gap: 0.62rem;
|
||||
border-radius: 0.95rem;
|
||||
background: rgb(255 255 255 / 0.035);
|
||||
padding: 0.72rem;
|
||||
}
|
||||
|
||||
.device-row[data-selected="true"] {
|
||||
background: rgb(255 255 255 / 0.065);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.device-row__identity,
|
||||
.device-row__action {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.device-row__identity {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.device-row__identity > div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.device-row__name {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.device-row__name small {
|
||||
flex: 0 0 auto;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.47rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.device-row__identity strong {
|
||||
overflow: hidden;
|
||||
font-size: 0.69rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.device-row code,
|
||||
.detail-row code {
|
||||
overflow: hidden;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.58rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.device-row__signal {
|
||||
width: 0.58rem;
|
||||
height: 0.58rem;
|
||||
flex: 0 0 0.58rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.device-row[data-compatible="true"] .device-row__signal {
|
||||
background: rgb(var(--nodedc-success-rgb));
|
||||
}
|
||||
|
||||
.device-row__action > span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.empty-device-list {
|
||||
border-radius: 0.95rem;
|
||||
background: rgb(255 255 255 / 0.025);
|
||||
color: var(--nodedc-text-muted);
|
||||
padding: 0.9rem;
|
||||
font-size: 0.65rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.field-stack,
|
||||
.session-form {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.connection-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin: 0.72rem 0;
|
||||
border-radius: 0.85rem;
|
||||
background: rgb(255 255 255 / 0.03);
|
||||
padding: 0.62rem 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.connection-summary span {
|
||||
color: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.connection-summary strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.session-panel > .nodedc-segmented {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
.session-form {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.session-form--replay {
|
||||
grid-template-columns: minmax(0, 1.55fr) minmax(8rem, 0.45fr);
|
||||
}
|
||||
|
||||
.session-form--replay > :first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.session-form--replay > .nodedc-button {
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.session-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--station-hairline);
|
||||
padding-top: 0.9rem;
|
||||
}
|
||||
|
||||
.session-footer p {
|
||||
max-width: 30rem;
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.62rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.diagnostics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
display: grid;
|
||||
margin: 0.9rem 0 0;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(7rem, 0.72fr) minmax(0, 1.28fr);
|
||||
gap: 1rem;
|
||||
border-top: 1px solid var(--station-hairline);
|
||||
padding: 0.7rem 0;
|
||||
}
|
||||
|
||||
.detail-row dt,
|
||||
.detail-row dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.detail-row dt {
|
||||
color: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.detail-row dd {
|
||||
overflow: hidden;
|
||||
color: var(--nodedc-text-secondary);
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inline-state {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.inline-state::before {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.inline-state[data-state="open"]::before { background: rgb(var(--nodedc-success-rgb)); }
|
||||
.inline-state[data-state="error"]::before,
|
||||
.inline-state[data-state="closed"]::before { background: rgb(var(--nodedc-danger-rgb)); }
|
||||
|
||||
.latency-now {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 660;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.latency-now span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.61rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.latency-trace {
|
||||
display: flex;
|
||||
height: 7rem;
|
||||
align-items: end;
|
||||
gap: 0.2rem;
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.85rem;
|
||||
background: rgb(255 255 255 / 0.018);
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.latency-trace span {
|
||||
min-width: 0.16rem;
|
||||
flex: 1 1 0;
|
||||
border-radius: 999px 999px 0.12rem 0.12rem;
|
||||
background: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.latency-trace p {
|
||||
align-self: center;
|
||||
margin: auto;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.62rem;
|
||||
line-height: 1.45;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.latency-legend {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.38rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.54rem;
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
@media (max-width: 1480px) {
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.device-workspace__grid {
|
||||
grid-template-columns: minmax(21rem, 0.76fr) minmax(30rem, 1.24fr);
|
||||
}
|
||||
|
||||
.landing-stage__copy {
|
||||
width: min(35rem, 54%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.device-workspace__grid,
|
||||
.overview-grid,
|
||||
.mission-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pipeline-strip {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.pipeline-strip > svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.map-inspector {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1.45fr);
|
||||
gap: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.map-inspector > .section-eyebrow,
|
||||
.map-inspector > h3 {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.map-inspector .layer-summary-list {
|
||||
grid-row: 1 / 4;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.map-inspector > .nodedc-button {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.camera-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: minmax(20rem, 1fr) repeat(2, minmax(10rem, 0.55fr));
|
||||
}
|
||||
|
||||
.camera-slot[data-primary="true"] {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
.feature-group {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.capability-summary {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.diagnostics-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workspace-lead {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.workspace-lead__note,
|
||||
.workspace-lead__status {
|
||||
max-width: none;
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.landing-stage__status {
|
||||
width: 20rem;
|
||||
max-width: 36vw;
|
||||
}
|
||||
|
||||
.landing-stage__copy h1 {
|
||||
font-size: clamp(2.7rem, 7vw, 5.6rem);
|
||||
}
|
||||
|
||||
.scene-metrics {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.station-label,
|
||||
.control-station .nodedc-header__profile-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.landing-stage__copy {
|
||||
top: 42%;
|
||||
right: 1.2rem;
|
||||
left: 1.2rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.landing-stage__copy h1 {
|
||||
font-size: clamp(2.8rem, 14vw, 5rem);
|
||||
}
|
||||
|
||||
.landing-stage__status {
|
||||
top: auto;
|
||||
right: 1rem;
|
||||
bottom: 3.3rem;
|
||||
left: 1rem;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.landing-stage__footer {
|
||||
right: 1rem;
|
||||
bottom: 1.1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.landing-stage__footer span:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metrics-grid,
|
||||
.capability-summary,
|
||||
.camera-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.camera-grid {
|
||||
grid-template-rows: repeat(4, minmax(14rem, 1fr));
|
||||
}
|
||||
|
||||
.camera-slot[data-primary="true"] {
|
||||
grid-row: auto;
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.spatial-workspace {
|
||||
min-height: 38rem;
|
||||
}
|
||||
|
||||
.spatial-toolbar,
|
||||
.spatial-toolbar__actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spatial-toolbar__actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.spatial-toolbar__actions .nodedc-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scene-status--top-left {
|
||||
top: 0.6rem;
|
||||
left: 0.6rem;
|
||||
}
|
||||
|
||||
.scene-adapter-note {
|
||||
right: 0.75rem;
|
||||
left: 0.75rem;
|
||||
width: auto;
|
||||
transform: translateY(4.8rem);
|
||||
}
|
||||
|
||||
.scene-timeline {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.scene-timeline > .nodedc-button:first-child,
|
||||
.scene-timeline > code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.map-inspector {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.timeline-ruler {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.timeline-lane {
|
||||
grid-template-columns: 5.5rem minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.timeline-lane small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.session-form--replay {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.session-form--replay > :first-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.session-footer,
|
||||
.error-banner,
|
||||
.source-format-list > div {
|
||||
align-items: stretch;
|
||||
grid-template-columns: 1fr;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.error-banner__actions {
|
||||
grid-column: 2;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.device-row__action {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.feature-row > .nodedc-status {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 720px) and (min-width: 761px) {
|
||||
.landing-stage__copy h1 {
|
||||
font-size: clamp(2.7rem, 6vw, 5rem);
|
||||
}
|
||||
|
||||
.landing-stage__copy p {
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.landing-stage__actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.landing-stage__status {
|
||||
top: 1.2rem;
|
||||
right: 1.2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
.scene-tool-window {
|
||||
--scene-tool-window-top: 5.75rem;
|
||||
--scene-tool-window-right: 27rem;
|
||||
position: fixed;
|
||||
top: var(--scene-tool-window-top);
|
||||
right: var(--scene-tool-window-right);
|
||||
max-height: calc(100vh - var(--scene-tool-window-top) - 1.5rem);
|
||||
}
|
||||
|
||||
.scene-tool-window--display {
|
||||
--scene-tool-window-top: 7.75rem;
|
||||
--scene-tool-window-right: 28.5rem;
|
||||
}
|
||||
|
||||
.scene-tool-window--layers {
|
||||
--scene-tool-window-top: 9.75rem;
|
||||
--scene-tool-window-right: 30rem;
|
||||
}
|
||||
|
||||
.scene-tool-window--layout {
|
||||
--scene-tool-window-top: 11.75rem;
|
||||
--scene-tool-window-right: 31.5rem;
|
||||
}
|
||||
|
||||
.nodedc-overlay:has(> .scene-tool-window[data-scene-active="true"]) {
|
||||
z-index: calc(var(--nodedc-layer-overlay) + 1);
|
||||
}
|
||||
|
||||
.nodedc-overlay[data-placement="center"] {
|
||||
z-index: calc(var(--nodedc-layer-overlay) + 2);
|
||||
}
|
||||
|
||||
.scene-window-state {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: var(--nodedc-font-size-sm);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.scene-window-code {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: var(--nodedc-radius-control-compact);
|
||||
background: var(--nodedc-field-bg);
|
||||
color: var(--nodedc-text-secondary);
|
||||
padding: 0.72rem 0.8rem;
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scene-window-note {
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 44rem) {
|
||||
.scene-tool-window,
|
||||
.scene-tool-window--display,
|
||||
.scene-tool-window--layers,
|
||||
.scene-tool-window--layout {
|
||||
--scene-tool-window-top: 4.75rem;
|
||||
--scene-tool-window-right: 0.875rem;
|
||||
max-height: calc(100vh - 5.625rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 44.01rem) and (max-width: 70rem) {
|
||||
.scene-tool-window,
|
||||
.scene-tool-window--display,
|
||||
.scene-tool-window--layers,
|
||||
.scene-tool-window--layout {
|
||||
--scene-tool-window-top: 13.5rem;
|
||||
--scene-tool-window-right: 1.5rem;
|
||||
max-height: calc(100vh - 15rem);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
.station-label {
|
||||
overflow: hidden;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.61rem;
|
||||
font-weight: 820;
|
||||
letter-spacing: 0.13em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.api-dot {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
flex: 0 0 0.48rem;
|
||||
border-radius: 999px;
|
||||
background: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.api-dot[data-status="online"] {
|
||||
background: rgb(var(--nodedc-success-rgb));
|
||||
}
|
||||
|
||||
.api-dot[data-status="checking"],
|
||||
.api-dot[data-status="degraded"] {
|
||||
background: rgb(var(--nodedc-warning-rgb));
|
||||
}
|
||||
|
||||
.api-dot[data-status="offline"] {
|
||||
background: rgb(var(--nodedc-danger-rgb));
|
||||
}
|
||||
|
||||
.landing-stage {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: var(--nodedc-radius-card);
|
||||
background: var(--station-stage);
|
||||
}
|
||||
|
||||
.landing-stage__copy {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: clamp(2rem, 5vw, 6rem);
|
||||
width: min(39rem, 50%);
|
||||
transform: translateY(-55%);
|
||||
}
|
||||
|
||||
.landing-stage__copy h1 {
|
||||
margin: 0.75rem 0 1rem;
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: clamp(3rem, 7vw, 7.6rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.072em;
|
||||
line-height: 0.87;
|
||||
}
|
||||
|
||||
.landing-stage__copy p {
|
||||
max-width: 34rem;
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: clamp(0.8rem, 1vw, 1rem);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.landing-stage__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
|
||||
.landing-stage__status {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 2.4rem;
|
||||
right: 2.4rem;
|
||||
display: grid;
|
||||
width: min(24rem, 30vw);
|
||||
gap: 0.6rem;
|
||||
border: 1px solid rgb(255 255 255 / 0.055);
|
||||
border-radius: 1.25rem;
|
||||
background: rgb(10 10 12 / 0.58);
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.landing-stage__status > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.landing-stage__status p {
|
||||
margin: 0.15rem 0 0;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.66rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.landing-stage__footer {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 2.4rem;
|
||||
bottom: 1.8rem;
|
||||
left: 2.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.57rem;
|
||||
font-weight: 780;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
@@ -0,0 +1,352 @@
|
||||
.spatial-workspace {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 34rem;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 0.65rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spatial-toolbar {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.spatial-toolbar__mode,
|
||||
.spatial-toolbar__actions {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.spatial-viewport-shell {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
background: #06070a;
|
||||
box-shadow: inset 0 0 0 1px var(--station-hairline);
|
||||
}
|
||||
|
||||
.rerun-viewport,
|
||||
.rerun-viewport__canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.rerun-viewport__canvas canvas {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.rerun-viewport:is([data-status="loading"], [data-status="error"])
|
||||
.rerun-viewport__canvas > div {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.rerun-viewport__notice {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
border: 1px solid var(--station-hairline);
|
||||
border-radius: 1rem;
|
||||
background: rgb(10 11 14 / 0.82);
|
||||
padding: 0.9rem 1rem;
|
||||
transform: translate(-50%, -50%);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.rerun-viewport__notice strong,
|
||||
.rerun-viewport__notice span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rerun-viewport__notice strong {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.rerun-viewport__notice span {
|
||||
margin-top: 0.18rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.61rem;
|
||||
}
|
||||
|
||||
.rerun-viewport__notice--error {
|
||||
background: rgb(10 11 14 / 0.9);
|
||||
}
|
||||
|
||||
.busy-indicator {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex: 0 0 1rem;
|
||||
border: 2px solid rgb(255 255 255 / 0.12);
|
||||
border-top-color: var(--nodedc-text-primary);
|
||||
border-radius: 50%;
|
||||
animation: viewer-spin 900ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes viewer-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.empty-spatial-stage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
background: #06070a;
|
||||
}
|
||||
|
||||
.empty-spatial-stage__grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spatial-axis {
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
bottom: 5.2rem;
|
||||
width: 4.4rem;
|
||||
height: 4.4rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.53rem;
|
||||
}
|
||||
|
||||
.spatial-axis::before,
|
||||
.spatial-axis::after {
|
||||
position: absolute;
|
||||
bottom: 0.65rem;
|
||||
left: 0.75rem;
|
||||
width: 2.7rem;
|
||||
height: 1px;
|
||||
background: rgb(255 255 255 / 0.2);
|
||||
content: "";
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.spatial-axis::before { transform: rotate(-24deg); }
|
||||
.spatial-axis::after { transform: rotate(-90deg); }
|
||||
.spatial-axis span { position: absolute; }
|
||||
.spatial-axis span[data-axis="x"] { right: 0; bottom: 0; color: var(--nodedc-text-muted); }
|
||||
.spatial-axis span[data-axis="y"] { top: 0; left: 0.55rem; color: var(--nodedc-text-muted); }
|
||||
.spatial-axis span[data-axis="z"] { right: 0.55rem; bottom: 2.2rem; color: var(--nodedc-text-muted); }
|
||||
|
||||
.empty-spatial-stage__message {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: grid;
|
||||
max-width: 25rem;
|
||||
justify-items: center;
|
||||
gap: 0.62rem;
|
||||
transform: translate(-50%, -58%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-spatial-stage__icon {
|
||||
display: grid;
|
||||
width: 3.4rem;
|
||||
height: 3.4rem;
|
||||
place-items: center;
|
||||
border: 1px solid var(--station-hairline-strong);
|
||||
border-radius: 50%;
|
||||
background: rgb(255 255 255 / 0.035);
|
||||
color: var(--nodedc-text-secondary);
|
||||
}
|
||||
|
||||
.empty-spatial-stage__message strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.empty-spatial-stage__message p {
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.67rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.scene-status,
|
||||
.scene-metrics,
|
||||
.scene-adapter-note,
|
||||
.scene-selection,
|
||||
.scene-timeline {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
border: 1px solid rgb(255 255 255 / 0.055);
|
||||
background: rgb(9 10 13 / 0.74);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.scene-status--top-left {
|
||||
top: 0.85rem;
|
||||
left: 0.85rem;
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 0.42rem;
|
||||
border-radius: 0.9rem;
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.scene-status small {
|
||||
max-width: 18rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.57rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.scene-metrics {
|
||||
top: 0.85rem;
|
||||
right: 0.85rem;
|
||||
display: grid;
|
||||
min-width: 10rem;
|
||||
border-radius: 0.9rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
}
|
||||
|
||||
.scene-metrics > div {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border-bottom: 1px solid var(--station-hairline);
|
||||
padding: 0.38rem 0;
|
||||
}
|
||||
|
||||
.scene-metrics > div:last-child { border-bottom: 0; }
|
||||
.scene-metrics span { color: var(--nodedc-text-muted); font-size: 0.56rem; }
|
||||
.scene-metrics strong { color: var(--nodedc-text-primary); font-size: 0.72rem; }
|
||||
.scene-metrics small { color: var(--nodedc-text-muted); font-size: 0.52rem; font-weight: 500; }
|
||||
|
||||
.scene-adapter-note {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
max-width: 34rem;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
border-radius: 0.9rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
padding: 0.75rem 0.9rem;
|
||||
font-size: 0.63rem;
|
||||
line-height: 1.4;
|
||||
transform: translate(-50%, 5.2rem);
|
||||
}
|
||||
|
||||
.scene-adapter-note > svg { flex: 0 0 auto; color: var(--nodedc-text-secondary); }
|
||||
|
||||
.scene-selection {
|
||||
right: 0.85rem;
|
||||
bottom: 4.6rem;
|
||||
display: grid;
|
||||
max-width: 19rem;
|
||||
gap: 0.2rem;
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
}
|
||||
|
||||
.scene-selection span,
|
||||
.scene-selection small { color: var(--nodedc-text-muted); font-size: 0.55rem; }
|
||||
.scene-selection strong { overflow: hidden; font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.scene-timeline {
|
||||
right: 0.75rem;
|
||||
bottom: 0.75rem;
|
||||
left: 0.75rem;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: auto auto minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
border-radius: 0.9rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.scene-timeline__track {
|
||||
height: 0.3rem;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 0.08);
|
||||
}
|
||||
|
||||
.scene-timeline__track span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.scene-timeline__track[data-disabled="true"] { opacity: 0.46; }
|
||||
.scene-timeline code { color: var(--nodedc-text-muted); font-size: 0.57rem; }
|
||||
|
||||
.scene-timeline__follow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: transparent;
|
||||
color: var(--nodedc-text-muted);
|
||||
padding: 0.3rem 0.45rem;
|
||||
font-size: 0.52rem;
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.scene-timeline__follow::before {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.scene-timeline__follow[data-active="true"] {
|
||||
background: transparent;
|
||||
color: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.scene-timeline__follow[data-active="true"]::before {
|
||||
background: rgb(var(--nodedc-success-rgb));
|
||||
}
|
||||
|
||||
.spatial-contract-strip {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.45rem 1rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.57rem;
|
||||
}
|
||||
|
||||
.spatial-contract-strip span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.spatial-contract-strip i {
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.spatial-contract-strip i[data-state="ready"] { background: var(--nodedc-text-primary); }
|
||||
.spatial-contract-strip i[data-state="contract"] { background: rgb(var(--nodedc-warning-rgb)); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.busy-indicator { animation: none; }
|
||||
}
|
||||
@@ -0,0 +1,624 @@
|
||||
.standard-workspace,
|
||||
.device-workspace {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 1rem;
|
||||
padding: 0 0 1rem;
|
||||
}
|
||||
|
||||
.feature-inventory {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.6fr);
|
||||
gap: 1.6rem;
|
||||
border-top: 1px solid var(--station-hairline);
|
||||
padding-top: 1.2rem;
|
||||
}
|
||||
|
||||
.feature-group > header h3 {
|
||||
margin: 0.48rem 0 0.45rem;
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 1.08rem;
|
||||
font-weight: 710;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.feature-group > header p {
|
||||
max-width: 25rem;
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
border-bottom: 1px solid var(--station-hairline);
|
||||
padding: 0.78rem 0;
|
||||
}
|
||||
|
||||
.feature-row:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.feature-row__mark {
|
||||
width: 0.52rem;
|
||||
height: 0.52rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.feature-row[data-status="active"] .feature-row__mark {
|
||||
background: rgb(var(--nodedc-success-rgb));
|
||||
}
|
||||
|
||||
.feature-row[data-status="ready"] .feature-row__mark {
|
||||
background: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.feature-row[data-status="contract"] .feature-row__mark {
|
||||
background: rgb(var(--nodedc-warning-rgb));
|
||||
}
|
||||
|
||||
.feature-row strong,
|
||||
.feature-row p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-row strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 0.74rem;
|
||||
font-weight: 690;
|
||||
}
|
||||
|
||||
.feature-row p {
|
||||
margin-top: 0.18rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.64rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.capability-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.capability-summary > div {
|
||||
display: flex;
|
||||
min-height: 4.4rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border-radius: 1rem;
|
||||
background: var(--station-panel);
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
|
||||
.capability-summary span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.66rem;
|
||||
}
|
||||
|
||||
.capability-summary strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.75fr);
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.contour-panel,
|
||||
.next-actions-panel,
|
||||
.timeline-panel,
|
||||
.mission-sequence,
|
||||
.mission-summary,
|
||||
.map-inspector {
|
||||
background: var(--station-panel);
|
||||
}
|
||||
|
||||
.pipeline-strip {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: repeat(7, auto);
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.3rem;
|
||||
}
|
||||
|
||||
.pipeline-strip > div {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 6rem;
|
||||
align-content: center;
|
||||
gap: 0.35rem;
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 255 255 / 0.034);
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.pipeline-strip > div::before {
|
||||
position: absolute;
|
||||
top: 0.7rem;
|
||||
right: 0.7rem;
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.pipeline-strip > div[data-state="ready"]::before {
|
||||
background: rgb(var(--nodedc-success-rgb));
|
||||
}
|
||||
|
||||
.pipeline-strip > div[data-state="contract"]::before {
|
||||
background: rgb(var(--nodedc-warning-rgb));
|
||||
}
|
||||
|
||||
.pipeline-strip > svg {
|
||||
color: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.pipeline-strip span,
|
||||
.pipeline-strip small {
|
||||
overflow: hidden;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.58rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pipeline-strip strong {
|
||||
overflow: hidden;
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 0.72rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-list {
|
||||
display: grid;
|
||||
gap: 0.46rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.action-list > button {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
outline: 0;
|
||||
background: rgb(255 255 255 / 0.035);
|
||||
padding: 0.65rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-list > button:hover,
|
||||
.action-list > button:focus-visible {
|
||||
background: rgb(255 255 255 / 0.07);
|
||||
}
|
||||
|
||||
.action-list > button > span {
|
||||
display: grid;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: rgb(255 255 255 / 0.055);
|
||||
color: var(--nodedc-text-secondary);
|
||||
}
|
||||
|
||||
.action-list strong,
|
||||
.action-list small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-list strong {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.action-list small {
|
||||
margin-top: 0.18rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.action-list > button > svg {
|
||||
color: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.camera-grid {
|
||||
display: grid;
|
||||
min-height: 33rem;
|
||||
grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.72fr);
|
||||
grid-template-rows: repeat(3, minmax(9rem, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.camera-slot {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
background: #090a0c;
|
||||
box-shadow: inset 0 0 0 1px var(--station-hairline);
|
||||
}
|
||||
|
||||
.camera-slot[data-primary="true"] {
|
||||
grid-row: 1 / 4;
|
||||
}
|
||||
|
||||
.camera-slot__grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgb(255 255 255 / 0.012);
|
||||
}
|
||||
|
||||
.camera-slot header,
|
||||
.camera-slot footer,
|
||||
.camera-slot__empty {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.camera-slot header,
|
||||
.camera-slot footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.camera-slot header > span {
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.camera-slot__empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 0.6rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.camera-slot__empty span {
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.camera-slot footer {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
|
||||
.camera-slot footer button {
|
||||
display: grid;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgb(255 255 255 / 0.04);
|
||||
color: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
display: grid;
|
||||
min-height: 34rem;
|
||||
grid-template-columns: minmax(0, 1fr) 18rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.map-canvas {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 30rem;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
background: #0a0b0d;
|
||||
box-shadow: inset 0 0 0 1px var(--station-hairline);
|
||||
}
|
||||
|
||||
.map-canvas__grid,
|
||||
.map-canvas__contours {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.map-canvas__grid {
|
||||
background: rgb(255 255 255 / 0.012);
|
||||
}
|
||||
|
||||
.map-canvas__contours span {
|
||||
position: absolute;
|
||||
border: 1px solid rgb(255 255 255 / 0.055);
|
||||
border-radius: 48% 52% 62% 38%;
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
|
||||
.map-canvas__contours span:nth-child(1) { inset: 16% 14% 20% 19%; }
|
||||
.map-canvas__contours span:nth-child(2) { inset: 23% 21% 27% 27%; }
|
||||
.map-canvas__contours span:nth-child(3) { inset: 31% 29% 35% 34%; }
|
||||
.map-canvas__contours span:nth-child(4) { inset: 39% 37% 43% 42%; }
|
||||
|
||||
.map-canvas svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-canvas svg path {
|
||||
fill: none;
|
||||
stroke: var(--nodedc-text-secondary);
|
||||
stroke-linecap: round;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.map-canvas svg circle {
|
||||
fill: #0a0b0d;
|
||||
stroke: var(--nodedc-text-secondary);
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.map-point-label {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
background: rgb(8 9 11 / 0.86);
|
||||
color: var(--nodedc-text-secondary);
|
||||
padding: 0.34rem 0.55rem;
|
||||
font-size: 0.58rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.map-canvas__notice {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.map-inspector h3 {
|
||||
margin: 0.52rem 0 1rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.layer-summary-list {
|
||||
display: grid;
|
||||
gap: 0.42rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.layer-summary-list > div {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.15rem 0.55rem;
|
||||
border-radius: 0.8rem;
|
||||
background: rgb(255 255 255 / 0.035);
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.layer-summary-list > div > span {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
}
|
||||
|
||||
.layer-summary-list > div > span[data-tone="cyan"] { background: #35d7c1; }
|
||||
.layer-summary-list > div > span[data-tone="violet"] { background: var(--nodedc-text-primary); }
|
||||
.layer-summary-list > div > span[data-tone="green"] { background: #a6dc74; }
|
||||
.layer-summary-list > div > span[data-tone="orange"] { background: #f2af4c; }
|
||||
|
||||
.layer-summary-list strong { font-size: 0.68rem; }
|
||||
.layer-summary-list small { color: var(--nodedc-text-muted); font-size: 0.58rem; }
|
||||
|
||||
.timeline-panel__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.timeline-panel__head h3 {
|
||||
margin: 0.48rem 0 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.timeline-panel__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.timeline-panel__controls code {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.timeline-ruler {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||||
margin: 1.4rem 0 0.55rem 8.5rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.54rem;
|
||||
}
|
||||
|
||||
.timeline-ruler span {
|
||||
border-left: 1px solid var(--station-hairline);
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
|
||||
.timeline-lanes {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.timeline-lane {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: 7.5rem minmax(0, 1fr) 10rem;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
border-top: 1px solid var(--station-hairline);
|
||||
padding: 0.82rem 0;
|
||||
}
|
||||
|
||||
.timeline-lane strong,
|
||||
.timeline-lane small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.timeline-lane strong { font-size: 0.67rem; }
|
||||
.timeline-lane small { color: var(--nodedc-text-muted); font-size: 0.59rem; text-align: right; }
|
||||
|
||||
.timeline-lane > div {
|
||||
position: relative;
|
||||
height: 0.28rem;
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 0.045);
|
||||
}
|
||||
|
||||
.timeline-lane > div > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: none;
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-primary);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.timeline-lane[data-active="true"] > div > span { display: block; }
|
||||
|
||||
.mission-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.mission-steps {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
margin-top: 1.1rem;
|
||||
}
|
||||
|
||||
.mission-steps button {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 255 255 / 0.035);
|
||||
padding: 0.65rem;
|
||||
text-align: left;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mission-steps button > span {
|
||||
display: grid;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: rgb(255 255 255 / 0.05);
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
|
||||
.mission-steps strong,
|
||||
.mission-steps small { display: block; }
|
||||
.mission-steps strong { color: var(--nodedc-text-primary); font-size: 0.7rem; }
|
||||
.mission-steps small { margin-top: 0.18rem; color: var(--nodedc-text-muted); font-size: 0.6rem; }
|
||||
.mission-steps svg { color: var(--nodedc-text-muted); }
|
||||
|
||||
.mission-summary {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.mission-readiness {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.35rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mission-readiness strong {
|
||||
font-size: 4rem;
|
||||
font-weight: 580;
|
||||
letter-spacing: -0.08em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mission-readiness span,
|
||||
.mission-summary p {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.66rem;
|
||||
}
|
||||
|
||||
.mission-summary p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.mission-summary__checks {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.mission-summary__checks span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.67rem;
|
||||
}
|
||||
|
||||
.mission-summary__checks i {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--nodedc-text-muted);
|
||||
}
|
||||
Reference in New Issue
Block a user