245 lines
4.6 KiB
CSS
245 lines
4.6 KiB
CSS
.b05-route-layout {
|
|
height: calc(100vh - var(--spacing-64));
|
|
height: calc(100dvh - var(--spacing-64));
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b05-route-layout .ui-workflow-layout__body,
|
|
.b05-route-layout .ui-workflow-layout__main {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.b05-route-layout .ui-workflow-layout__main {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b05-route__main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b05-route__viewport {
|
|
position: relative;
|
|
width: 100%;
|
|
flex: 1 1 auto;
|
|
height: auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.b05-route-profile {
|
|
position: relative;
|
|
flex: 0 0 250px;
|
|
min-height: 250px;
|
|
overflow: visible;
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-surface-raised);
|
|
transition: flex-basis var(--transition-fast);
|
|
}
|
|
|
|
.b05-route-profile.is-collapsed {
|
|
flex-basis: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.b05-route-profile__body {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding-inline: 15px;
|
|
}
|
|
|
|
.b05-route-profile.is-collapsed .b05-route-profile__body {
|
|
display: none;
|
|
}
|
|
|
|
.b05-route-profile__empty {
|
|
margin: 0;
|
|
padding: var(--spacing-24);
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.b05-route-profile .b06-section__chart-wrap {
|
|
height: 100%;
|
|
}
|
|
|
|
.b05-route__viewport canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.b05-route__viewer-status {
|
|
position: absolute;
|
|
inset: var(--spacing-16) auto auto var(--spacing-16);
|
|
max-width: 420px;
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b05-route__view-controls {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 58px;
|
|
left: var(--spacing-16);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b05-route__view-group {
|
|
display: flex;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.b05-route__view-controls .ui-btn {
|
|
height: 34px;
|
|
padding: 0 var(--spacing-8);
|
|
}
|
|
|
|
.b05-route__view-separator {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: color-mix(in srgb, var(--color-border) 75%, transparent);
|
|
}
|
|
|
|
.b05-route__panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-width: 0;
|
|
gap: var(--spacing-16);
|
|
padding-bottom: var(--spacing-24);
|
|
}
|
|
|
|
.b05-route__panel-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-width: 0;
|
|
gap: var(--spacing-8);
|
|
padding: calc(var(--spacing-8) + var(--spacing-4));
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-surface-raised);
|
|
}
|
|
|
|
.b05-route__panel-section h3 {
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.b05-route__panel-body,
|
|
.b05-route__field,
|
|
.b05-route__metrics {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b05-route__contour-row {
|
|
display: flex;
|
|
align-items: end;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b05-route__contour-row .b05-route__field {
|
|
flex: 1;
|
|
}
|
|
|
|
.b05-route__contour-row .ui-btn {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.b05-route__field,
|
|
.b05-route__check,
|
|
.b05-route__metrics {
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b05-route__field input,
|
|
.b05-route__field select,
|
|
.b05-route__panel-section > select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background: var(--color-surface);
|
|
color: var(--color-text-body);
|
|
}
|
|
|
|
.b05-route__check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b05-route__button-grid,
|
|
.b05-route__palette {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
min-width: 0;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b05-route__chip {
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background: var(--color-surface);
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b05-route__chip.is-ep,
|
|
.b05-route__chip.is-fp {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.b05-route__chip.is-bp {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.b05-route__chip.is-cp,
|
|
.b05-route__stale {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.b05-route__actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b05-route__actions > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.b05-route__stale {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.b05-route__panel details {
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
}
|