feat(ui): stabilize shared M4.8 review viewer
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,46 @@
|
||||
.laboratory-evidence-viewer[data-chrome-layout="stacked"] {
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 0;
|
||||
background: var(--nodedc-canvas);
|
||||
}
|
||||
|
||||
.laboratory-evidence-viewer[data-chrome-layout="stacked"]
|
||||
.laboratory-evidence-viewer__header {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: var(--nodedc-canvas);
|
||||
padding: 0.45rem 0.55rem;
|
||||
}
|
||||
|
||||
.laboratory-evidence-viewer[data-chrome-layout="stacked"]
|
||||
.laboratory-evidence-viewer__header-context {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.laboratory-evidence-viewer[data-chrome-layout="stacked"]
|
||||
.laboratory-evidence-viewer__controls {
|
||||
position: static;
|
||||
z-index: auto;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.laboratory-evidence-viewer[data-chrome-layout="stacked"]
|
||||
.laboratory-evidence-viewer__stage {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.laboratory-evidence-viewer[data-chrome-layout="stacked"]
|
||||
.laboratory-evidence-viewer__transport {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
.laboratory-recorded-clip-player {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
background: var(--nodedc-canvas);
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player__stage,
|
||||
.laboratory-recorded-clip-player__split,
|
||||
.laboratory-recorded-clip-player__spatial,
|
||||
.laboratory-recorded-clip-player__camera {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player__stage {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player__split,
|
||||
.laboratory-recorded-clip-player__split > .nodedc-split-pane__panel,
|
||||
.laboratory-recorded-clip-player__spatial,
|
||||
.laboratory-recorded-clip-player__camera {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player__camera {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player__split
|
||||
> .nodedc-split-pane__separator::before {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player__split
|
||||
> .nodedc-split-pane__separator:hover::before,
|
||||
.laboratory-recorded-clip-player__split
|
||||
> .nodedc-split-pane__separator:focus-visible::before,
|
||||
.laboratory-recorded-clip-player__split[data-dragging="true"]
|
||||
> .nodedc-split-pane__separator::before {
|
||||
background: rgb(var(--nodedc-accent-rgb));
|
||||
box-shadow: 0 0 0 2px rgb(var(--nodedc-accent-rgb) / 0.12);
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player__camera > .recorded-media-player {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player
|
||||
> .laboratory-recorded-clip-player__timeline.observation-timeline {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: var(--nodedc-canvas);
|
||||
padding: 0.45rem 0.7rem;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player
|
||||
> .laboratory-recorded-clip-player__timeline
|
||||
.observation-timeline__playback {
|
||||
grid-template-columns: auto auto auto minmax(12rem, 1fr) auto;
|
||||
}
|
||||
|
||||
.m48-atlas-visual[data-chrome-layout="stacked"]
|
||||
.laboratory-recorded-clip-player {
|
||||
gap: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.m48-atlas-visual[data-chrome-layout="stacked"]
|
||||
.laboratory-recorded-clip-player__stage,
|
||||
.m48-atlas-visual[data-chrome-layout="stacked"]
|
||||
.laboratory-recorded-clip-player > .observation-timeline {
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: var(--nodedc-canvas);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.laboratory-recorded-clip-player
|
||||
> .laboratory-recorded-clip-player__timeline
|
||||
.observation-timeline__playback {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,32 @@
|
||||
.laboratory-summary > header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.laboratory-summary__heading {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.laboratory-summary__actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: var(--nodedc-space-3);
|
||||
}
|
||||
|
||||
.laboratory-summary__toggle-glyph {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
transition: transform var(--nodedc-duration-fast) var(--nodedc-ease-standard);
|
||||
}
|
||||
|
||||
.laboratory-summary[data-expanded="true"] .laboratory-summary__toggle-glyph {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.laboratory-summary__details[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.laboratory-summary .laboratory-summary__brief {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
.laboratory-review-workspace {
|
||||
position: fixed;
|
||||
z-index: var(--nodedc-layer-overlay);
|
||||
inset: 0;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
background: var(--nodedc-canvas);
|
||||
color: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.laboratory-review-workspace[data-has-inspector="true"] {
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.laboratory-review-workspace__toolbar,
|
||||
.laboratory-review-workspace__inspector {
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
background: var(--nodedc-floating-surface);
|
||||
padding: 0.55rem 0.7rem;
|
||||
backdrop-filter: blur(var(--nodedc-blur-control));
|
||||
}
|
||||
|
||||
.laboratory-review-workspace__stage {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--nodedc-canvas);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.laboratory-review-workspace__toolbar,
|
||||
.laboratory-review-workspace__inspector {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -93,11 +93,14 @@
|
||||
.laboratory-summary > header,
|
||||
.laboratory-result-summary > header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.laboratory-result-summary > header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.laboratory-summary h2,
|
||||
.laboratory-summary p,
|
||||
.laboratory-summary dl,
|
||||
@@ -115,10 +118,10 @@
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.laboratory-summary > header p,
|
||||
.laboratory-summary__description,
|
||||
.laboratory-result-summary > p {
|
||||
max-width: 66rem;
|
||||
margin-top: 0.38rem;
|
||||
margin-top: 0.65rem;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.63rem;
|
||||
line-height: 1.55;
|
||||
|
||||
@@ -0,0 +1,370 @@
|
||||
.m48-review-workspace__header {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: var(--nodedc-space-3);
|
||||
}
|
||||
|
||||
.m48-review-workspace__topbar,
|
||||
.m48-review-workspace__topbar-start,
|
||||
.m48-review-workspace__topbar-end,
|
||||
.m48-review-workspace__clip-navigation,
|
||||
.m48-review-workspace__source-heading,
|
||||
.m48-review-workspace__evidence-summary,
|
||||
.m48-review-workspace__object-tools {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__topbar {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.m48-review-workspace__topbar-start,
|
||||
.m48-review-workspace__topbar-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.m48-review-workspace__topbar-start {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m48-review-workspace__clip-navigation {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.m48-review-workspace__clip-field {
|
||||
width: clamp(15rem, 19vw, 19rem);
|
||||
flex: 0 1 19rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__topbar-end {
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-end;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.m48-review-workspace__clip-reviewed {
|
||||
width: clamp(14rem, 16vw, 20rem);
|
||||
flex: 0 1 clamp(14rem, 16vw, 20rem);
|
||||
}
|
||||
|
||||
.m48-review-workspace__state,
|
||||
.m48-atlas-visual__state,
|
||||
.m48-clip-player__state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.55rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
}
|
||||
|
||||
.m48-review-workspace__evidence-summary {
|
||||
flex-wrap: wrap;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__object-tools {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__object-field {
|
||||
width: 8rem;
|
||||
min-width: 7.25rem;
|
||||
max-width: 9.25rem;
|
||||
flex: 1 1 8rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__object-field--wide {
|
||||
width: 11.5rem;
|
||||
min-width: 10.5rem;
|
||||
max-width: 13rem;
|
||||
flex-basis: 11.5rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__passage-field {
|
||||
width: clamp(15rem, 18vw, 18rem);
|
||||
min-width: 15rem;
|
||||
flex: 1 1 15rem;
|
||||
max-width: 18rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__passage-field > .nodedc-checker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.m48-review-workspace__stage-shell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.m48-evidence-stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.m48-evidence-stage > .laboratory-recorded-clip-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.m48-evidence-mode-rail {
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
top: 50%;
|
||||
left: var(--nodedc-space-4);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.m48-review-workspace__source-sticker {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
top: 3.15rem;
|
||||
left: 0.75rem;
|
||||
display: grid;
|
||||
width: min(31rem, calc(100% - 1.5rem));
|
||||
gap: 0.25rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.m48-review-workspace__source-sticker small {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__source-sticker strong {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.m48-review-workspace__freeze-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.m48-clip-player__overlay {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.m48-clip-player__spatial-pane {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m48-clip-player__spatial-pane > .laboratory-metric-evidence-scene {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.m48-clip-player__pane-label {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 0.6rem;
|
||||
border: 0;
|
||||
border-radius: var(--nodedc-radius-control-compact);
|
||||
background: var(--nodedc-floating-surface);
|
||||
padding: 0.38rem 0.52rem;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.52rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(var(--nodedc-blur-control));
|
||||
}
|
||||
|
||||
.m48-clip-player__pane-label[data-pane="spatial"] {
|
||||
left: 0.6rem;
|
||||
}
|
||||
|
||||
.m48-clip-player__pane-label[data-pane="camera"] {
|
||||
right: 0.6rem;
|
||||
}
|
||||
|
||||
.laboratory-recorded-clip-player[data-camera-presentation="companion"]
|
||||
.m48-clip-player__pane-label[data-pane="camera"] {
|
||||
top: 4.35rem;
|
||||
}
|
||||
|
||||
.m48-clip-player__overlay[data-drawing="true"] {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.m48-clip-player__overlay g rect,
|
||||
.m48-clip-player__draft-box {
|
||||
fill: transparent;
|
||||
stroke: rgb(var(--nodedc-accent-rgb));
|
||||
stroke-width: 2;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.m48-clip-player__overlay g[data-selected="true"] rect {
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.m48-clip-player__overlay:not([data-drawing="true"]) g rect {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.m48-clip-player__resize-handle {
|
||||
fill: rgb(var(--nodedc-accent-rgb));
|
||||
stroke: var(--nodedc-canvas);
|
||||
stroke-width: 2;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.m48-clip-player__resize-handle[data-handle="nw"],
|
||||
.m48-clip-player__resize-handle[data-handle="se"] {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.m48-clip-player__resize-handle[data-handle="ne"],
|
||||
.m48-clip-player__resize-handle[data-handle="sw"] {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
.m48-clip-player__draft-box {
|
||||
stroke-dasharray: 7 5;
|
||||
}
|
||||
|
||||
.m48-clip-player__overlay text {
|
||||
fill: var(--nodedc-text-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
paint-order: stroke;
|
||||
stroke: var(--nodedc-canvas);
|
||||
stroke-width: 3;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.m48-atlas-visual__scene {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.m48-evidence-mode-controls {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: var(--nodedc-space-2);
|
||||
}
|
||||
|
||||
.m48-evidence-mode-controls__text {
|
||||
font-size: var(--nodedc-font-size-xs);
|
||||
font-weight: var(--nodedc-font-weight-strong);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.m48-atlas-visual__scene {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m48-atlas-visual__scene > img,
|
||||
.m48-atlas-visual__scene > canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.m48-atlas-visual__scene > img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.m48-atlas-visual__case {
|
||||
display: grid;
|
||||
max-width: min(34rem, 65%);
|
||||
gap: 0.15rem;
|
||||
border-radius: var(--nodedc-radius-control);
|
||||
background: var(--nodedc-floating-surface);
|
||||
padding: 0.55rem 0.7rem;
|
||||
backdrop-filter: blur(var(--nodedc-blur-control));
|
||||
}
|
||||
|
||||
.m48-atlas-visual[data-chrome-layout="stacked"]
|
||||
.laboratory-evidence-viewer__header-context
|
||||
.m48-atlas-visual__case {
|
||||
max-width: 38rem;
|
||||
background: transparent;
|
||||
padding: 0 0.15rem;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.m48-atlas-visual__case strong {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.m48-atlas-visual__case small {
|
||||
overflow: hidden;
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.52rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.m48-review-workspace__topbar {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.m48-review-workspace__topbar-end {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.m48-review-workspace__clip-field {
|
||||
width: min(100%, 19rem);
|
||||
}
|
||||
|
||||
.m48-review-workspace__topbar-start,
|
||||
.m48-review-workspace__object-tools {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.m48-review-workspace__clip-reviewed,
|
||||
.m48-review-workspace__passage-field {
|
||||
width: min(100%, 28rem);
|
||||
flex-basis: min(100%, 28rem);
|
||||
}
|
||||
|
||||
.m48-atlas-visual[data-chrome-layout="stacked"]
|
||||
.laboratory-evidence-viewer__header {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.m48-atlas-visual[data-chrome-layout="stacked"]
|
||||
.laboratory-evidence-viewer__controls {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -400,10 +400,17 @@ i[data-availability="error"] {
|
||||
}
|
||||
|
||||
.observation-timeline__playback > .nodedc-select-anchor {
|
||||
width: 7.5rem;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.observation-timeline__transport {
|
||||
width: var(--nodedc-control-height-compact);
|
||||
padding: 0;
|
||||
border-radius: var(--nodedc-radius-circle);
|
||||
}
|
||||
|
||||
.observation-timeline__accumulation {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
|
||||
Reference in New Issue
Block a user