fix(control-station): separate lab contours from recordings

This commit is contained in:
DCCONSTRUCTIONS
2026-07-26 13:34:12 +03:00
parent 05413e3f5c
commit 42041b37cd
10 changed files with 840 additions and 171 deletions
+312 -69
View File
@@ -2385,18 +2385,17 @@
.recordings-workspace,
.lab-archive-workspace,
.recordings-workspace__viewer,
.lab-result-surface {
display: grid;
gap: 0.85rem;
}
.recordings-workspace__viewer,
.lab-result-surface {
min-height: 30rem;
.recordings-workspace {
width: 100%;
height: 100%;
min-height: 34rem;
}
.recordings-workspace__viewer > header,
.lab-result-surface > header {
display: flex;
align-items: center;
@@ -2404,102 +2403,346 @@
padding: 0 0.2rem;
}
.recordings-workspace__viewer > header strong,
.lab-result-surface > header strong {
color: var(--nodedc-text-secondary);
font-size: 0.7rem;
}
.recordings-workspace__empty {
.lab-archive-workspace {
padding-bottom: 1rem;
}
.laboratory-selector {
display: grid;
min-height: 27rem;
place-items: center;
align-content: center;
gap: 0.5rem;
border-radius: 1rem;
background: rgb(0 0 0 / 0.24);
color: var(--nodedc-text-muted);
text-align: center;
}
.recordings-workspace__empty strong {
color: var(--nodedc-text-secondary);
font-size: 0.75rem;
}
.recordings-workspace__empty p {
margin: 0;
font-size: 0.63rem;
}
.lab-configuration {
display: flex;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.38fr);
align-items: center;
justify-content: space-between;
gap: 1rem;
gap: 1.4rem;
border-radius: 1rem;
background: rgb(255 255 255 / 0.025);
padding: 1rem;
}
.lab-configuration h2,
.lab-configuration p {
.laboratory-selector h2,
.laboratory-selector p {
margin: 0;
}
.lab-configuration h2 {
.laboratory-selector h2 {
margin-top: 0.25rem;
color: var(--nodedc-text-primary);
font-size: 1rem;
}
.lab-configuration p {
max-width: 55rem;
.laboratory-selector p {
max-width: 60rem;
margin-top: 0.35rem;
color: var(--nodedc-text-muted);
font-size: 0.66rem;
font-size: 0.64rem;
line-height: 1.5;
}
.lab-primary-result {
.laboratory-selector label {
display: grid;
gap: 0.35rem;
}
.lab-primary-result button {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.3rem 0.75rem;
border: 0;
border-radius: 0.85rem;
background: rgb(255 255 255 / 0.025);
color: var(--nodedc-text-secondary);
padding: 0.8rem 1rem;
text-align: left;
cursor: pointer;
}
.lab-primary-result button[data-active="true"] {
background: rgb(255 255 255 / 0.065);
}
.lab-primary-result button > span {
grid-row: 1 / 3;
align-self: center;
color: var(--nodedc-accent);
font-size: 0.65rem;
font-weight: 700;
}
.lab-primary-result button > strong {
color: var(--nodedc-text-primary);
font-size: 0.72rem;
}
.lab-primary-result button > small {
.laboratory-selector label > span {
color: var(--nodedc-text-muted);
font-size: 0.55rem;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.laboratory-selector select {
width: 100%;
min-width: 0;
border: 0;
border-radius: 999px;
outline: 0;
background: rgb(255 255 255 / 0.075);
color: var(--nodedc-text-primary);
padding: 0.58rem 0.85rem;
font: inherit;
font-size: 0.65rem;
font-weight: 620;
}
.laboratory-selector select:focus-visible {
background: rgb(255 255 255 / 0.12);
}
.laboratory-selector select:disabled {
opacity: 0.45;
}
.laboratory-work-output {
display: grid;
gap: 0.85rem;
}
.laboratory-task,
.laboratory-result-summary,
.laboratory-visual-result {
border-radius: 1rem;
background: rgb(255 255 255 / 0.025);
padding: 1rem;
}
.laboratory-task > header,
.laboratory-result-summary > header,
.laboratory-visual-result > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
}
.laboratory-task h2,
.laboratory-task p,
.laboratory-task dl,
.laboratory-result-summary h2,
.laboratory-result-summary p,
.laboratory-visual-result h2,
.laboratory-visual-result p {
margin: 0;
}
.laboratory-task h2,
.laboratory-result-summary h2,
.laboratory-visual-result h2 {
margin-top: 0.3rem;
color: var(--nodedc-text-primary);
font-size: 1rem;
letter-spacing: -0.025em;
}
.laboratory-task p,
.laboratory-result-summary > p,
.laboratory-visual-result header p {
max-width: 66rem;
margin-top: 0.38rem;
color: var(--nodedc-text-muted);
font-size: 0.63rem;
line-height: 1.55;
}
.laboratory-task dl {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem;
margin-top: 0.9rem;
}
.laboratory-task dl > div,
.laboratory-result-metrics > div {
display: grid;
gap: 0.25rem;
border-radius: 0.75rem;
background: rgb(255 255 255 / 0.035);
padding: 0.7rem;
}
.laboratory-task dt,
.laboratory-task dd {
margin: 0;
}
.laboratory-task dt,
.laboratory-result-metrics span,
.laboratory-result-metrics small {
color: var(--nodedc-text-muted);
font-size: 0.54rem;
}
.laboratory-task dd,
.laboratory-result-metrics strong {
overflow: hidden;
color: var(--nodedc-text-primary);
font-size: 0.7rem;
font-weight: 660;
text-overflow: ellipsis;
white-space: nowrap;
}
.lab-result-surface {
min-height: 36rem;
}
.lab-result-surface .spatial-workspace {
min-height: 34rem;
}
.laboratory-result-pending {
display: grid;
min-height: 34rem;
place-items: center;
align-content: center;
gap: 0.5rem;
border-radius: 1rem;
background: #06070a;
color: var(--nodedc-text-muted);
text-align: center;
}
.laboratory-result-pending strong {
color: var(--nodedc-text-secondary);
font-size: 0.75rem;
}
.laboratory-result-pending p {
max-width: 34rem;
margin: 0;
font-size: 0.62rem;
}
.laboratory-visual-result {
display: grid;
min-height: 34rem;
align-content: start;
gap: 1rem;
background: #08090c;
}
.laboratory-e29-chart {
display: grid;
gap: 0.85rem;
border-radius: 0.9rem;
background: rgb(255 255 255 / 0.025);
padding: 1rem;
}
.laboratory-e29-chart__bar {
display: flex;
height: 1.1rem;
overflow: hidden;
border-radius: 999px;
background: rgb(255 255 255 / 0.04);
}
.laboratory-e29-chart__bar i[data-status="agree"],
.laboratory-e29-chart__legend i[data-status="agree"] {
background: rgb(var(--nodedc-success-rgb));
}
.laboratory-e29-chart__bar i[data-status="camera"],
.laboratory-e29-chart__legend i[data-status="camera"] {
background: rgb(var(--nodedc-accent-rgb));
}
.laboratory-e29-chart__bar i[data-status="conflict"],
.laboratory-e29-chart__legend i[data-status="conflict"] {
min-width: 0.25rem;
background: rgb(var(--nodedc-warning-rgb));
}
.laboratory-e29-chart__legend {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.laboratory-e29-chart__legend > div {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.25rem 0.45rem;
border-radius: 0.75rem;
background: rgb(255 255 255 / 0.025);
padding: 0.7rem;
}
.laboratory-e29-chart__legend i {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
}
.laboratory-e29-chart__legend span,
.laboratory-e29-chart__legend small {
color: var(--nodedc-text-muted);
font-size: 0.56rem;
}
.laboratory-e29-chart__legend strong {
color: var(--nodedc-text-primary);
font-size: 0.85rem;
}
.laboratory-e29-chart__legend small {
grid-column: 2 / 4;
}
.laboratory-e29-evidence {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.laboratory-e29-evidence article {
display: grid;
align-content: start;
gap: 0.45rem;
border-radius: 0.9rem;
background: rgb(255 255 255 / 0.025);
padding: 1rem;
}
.laboratory-e29-evidence strong {
color: var(--nodedc-text-primary);
font-size: 1.4rem;
}
.laboratory-e29-evidence p {
margin: 0;
color: var(--nodedc-text-muted);
font-size: 0.62rem;
line-height: 1.5;
}
.laboratory-e29-evidence article > div {
display: grid;
gap: 0.3rem;
}
.laboratory-e29-evidence article > div span {
border-radius: 0.6rem;
background: rgb(255 255 255 / 0.03);
color: var(--nodedc-text-secondary);
padding: 0.45rem 0.55rem;
font-size: 0.58rem;
}
.laboratory-result-summary {
display: grid;
gap: 0.85rem;
}
.laboratory-result-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem;
}
.laboratory-result-metrics > div {
min-width: 0;
}
.laboratory-result-metrics strong {
font-size: 0.9rem;
}
@media (max-width: 1100px) {
.laboratory-selector {
grid-template-columns: minmax(0, 1fr);
}
.laboratory-task dl,
.laboratory-result-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.dataset-entry {
display: grid;
grid-template-columns: minmax(20rem, 1.2fr) minmax(22rem, 0.8fr);