146 lines
2.9 KiB
CSS
146 lines
2.9 KiB
CSS
.b05-route__viewport {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 560px;
|
|
overflow: hidden;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.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__panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
min-width: 300px;
|
|
padding-bottom: var(--spacing-24);
|
|
}
|
|
|
|
.b05-route__panel-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-16);
|
|
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;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.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%;
|
|
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));
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b05-route__button,
|
|
.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__button:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.b05-route__button.is-primary {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-on-primary);
|
|
}
|
|
|
|
.b05-route__button.is-danger,
|
|
.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);
|
|
}
|