feat(control-station): add configurable environment shell
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,43 @@
|
||||
.environment-settings {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.environment-settings__labels {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.environment-settings__media {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.environment-settings__surface {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.environment-settings__surface > span {
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.74rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.environment-settings__surface .nodedc-select-anchor,
|
||||
.environment-settings__surface .nodedc-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.environment-settings__labels {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.environment-settings__surface {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -58,6 +58,34 @@
|
||||
background: var(--station-stage);
|
||||
}
|
||||
|
||||
.landing-stage__media,
|
||||
.landing-stage__shade {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.landing-stage__media img,
|
||||
.landing-stage__media video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.landing-stage__shade {
|
||||
z-index: 1;
|
||||
background:
|
||||
linear-gradient(90deg, rgb(5 6 8 / 0.82) 0%, rgb(5 6 8 / 0.54) 46%, rgb(5 6 8 / 0.24) 100%),
|
||||
linear-gradient(0deg, rgb(5 6 8 / 0.58), transparent 38%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.landing-stage:not([data-has-media="true"]) .landing-stage__shade {
|
||||
background:
|
||||
radial-gradient(circle at 68% 42%, rgb(255 255 255 / 0.035), transparent 34%),
|
||||
linear-gradient(90deg, rgb(5 6 8 / 0.2), transparent 62%);
|
||||
}
|
||||
|
||||
.landing-stage__copy {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
@@ -2441,12 +2441,12 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.laboratory-selector label {
|
||||
.laboratory-selector__control {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.laboratory-selector label > span {
|
||||
.laboratory-selector__control > span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.55rem;
|
||||
font-weight: 650;
|
||||
@@ -2454,26 +2454,9 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.laboratory-selector select {
|
||||
.laboratory-selector__control .nodedc-select-anchor,
|
||||
.laboratory-selector__control .nodedc-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 {
|
||||
@@ -2482,16 +2465,14 @@
|
||||
}
|
||||
|
||||
.laboratory-task,
|
||||
.laboratory-result-summary,
|
||||
.laboratory-visual-result {
|
||||
.laboratory-result-summary {
|
||||
border-radius: 1rem;
|
||||
background: rgb(255 255 255 / 0.025);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.laboratory-task > header,
|
||||
.laboratory-result-summary > header,
|
||||
.laboratory-visual-result > header {
|
||||
.laboratory-result-summary > header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
@@ -2502,15 +2483,12 @@
|
||||
.laboratory-task p,
|
||||
.laboratory-task dl,
|
||||
.laboratory-result-summary h2,
|
||||
.laboratory-result-summary p,
|
||||
.laboratory-visual-result h2,
|
||||
.laboratory-visual-result p {
|
||||
.laboratory-result-summary p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.laboratory-task h2,
|
||||
.laboratory-result-summary h2,
|
||||
.laboratory-visual-result h2 {
|
||||
.laboratory-result-summary h2 {
|
||||
margin-top: 0.3rem;
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: 1rem;
|
||||
@@ -2518,8 +2496,7 @@
|
||||
}
|
||||
|
||||
.laboratory-task p,
|
||||
.laboratory-result-summary > p,
|
||||
.laboratory-visual-result header p {
|
||||
.laboratory-result-summary > p {
|
||||
max-width: 66rem;
|
||||
margin-top: 0.38rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
@@ -2566,7 +2543,7 @@
|
||||
}
|
||||
|
||||
.lab-result-surface {
|
||||
min-height: 36rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.lab-result-surface .spatial-workspace {
|
||||
@@ -2575,12 +2552,12 @@
|
||||
|
||||
.laboratory-result-pending {
|
||||
display: grid;
|
||||
min-height: 34rem;
|
||||
min-height: 10rem;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
background: #06070a;
|
||||
background: rgb(255 255 255 / 0.025);
|
||||
color: var(--nodedc-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
@@ -2596,123 +2573,6 @@
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user