feat: complete dual-seat whole-vehicle orchestration
This commit is contained in:
vee
+772
-18
@@ -981,10 +981,11 @@
|
||||
|
||||
.console-v2 .v2-mode-rail {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-columns: auto minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
gap: 9px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
@@ -992,22 +993,83 @@
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-rail-heading {
|
||||
display: none;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-rail-heading > span {
|
||||
.console-v2 .v2-mode-rail .mode-rail-heading > div {
|
||||
display: block;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-rail-heading > div > span {
|
||||
color: #8a9797;
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail #saveModeToggle {
|
||||
.console-v2 .v2-mode-rail .mode-rail-heading small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail #saveModeToggle {
|
||||
grid-column: 4;
|
||||
grid-row: 1;
|
||||
min-height: 30px;
|
||||
padding: 5px 9px;
|
||||
color: var(--v2-accent-strong);
|
||||
background: color-mix(in srgb, var(--v2-accent-soft) 70%, white);
|
||||
border: 1px solid color-mix(in srgb, var(--v2-accent) 12%, white);
|
||||
border-radius: 999px;
|
||||
font-size: 9px;
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-rail-controls {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
gap: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-rail-pager {
|
||||
grid-template-columns: repeat(2, 24px);
|
||||
gap: 1px;
|
||||
padding: 2px;
|
||||
border-color: rgba(70, 104, 105, 0.12);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-rail-page {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-gallery-toggle {
|
||||
min-height: 30px;
|
||||
padding: 4px 8px;
|
||||
color: var(--v2-accent-strong);
|
||||
background: color-mix(in srgb, var(--v2-accent-soft) 56%, white);
|
||||
border-color: color-mix(in srgb, var(--v2-accent) 12%, white);
|
||||
border-radius: 999px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-gallery-toggle strong {
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
padding: 0 4px;
|
||||
background: var(--v2-accent);
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-chips {
|
||||
min-width: 0;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 2px;
|
||||
@@ -1079,15 +1141,52 @@
|
||||
color: var(--v2-accent);
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-chips button.running {
|
||||
color: #294e9d;
|
||||
background: #e5ecff;
|
||||
border-color: rgba(66, 104, 194, 0.38);
|
||||
box-shadow: 0 0 0 3px rgba(66, 104, 194, 0.1);
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-chips button.succeeded {
|
||||
color: #0d755f;
|
||||
background: #ddf7ef;
|
||||
border-color: rgba(18, 148, 115, 0.36);
|
||||
box-shadow: 0 0 0 3px rgba(18, 148, 115, 0.09);
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-chips button.failed {
|
||||
color: #a84039;
|
||||
background: #fde9e7;
|
||||
border-color: rgba(201, 72, 62, 0.36);
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-chips button:disabled {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .mode-cycle-badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .save-mode-composer {
|
||||
width: min(420px, 52vw);
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 12px;
|
||||
z-index: 5;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
z-index: 8;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(150px, 0.85fr);
|
||||
padding: 11px;
|
||||
border-color: rgba(70, 104, 105, 0.14);
|
||||
box-shadow: 0 18px 42px rgba(31, 67, 69, 0.18);
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .save-mode-source {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.console-v2 .v2-mode-rail .save-mode-actions {
|
||||
grid-template-columns: auto minmax(92px, 1fr);
|
||||
}
|
||||
|
||||
.console-v2[data-control-mode="gesture"] .v2-natural-panel,
|
||||
@@ -1804,7 +1903,7 @@
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell > .cabin-band {
|
||||
grid-template-rows: 38px minmax(0, 1fr);
|
||||
grid-template-rows: 66px minmax(0, 1fr);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
@@ -1873,20 +1972,75 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
padding: 8px 10px;
|
||||
background:
|
||||
linear-gradient(105deg, rgba(223, 245, 241, 0.82), rgba(255, 255, 255, 0.74) 58%),
|
||||
rgba(255, 255, 255, 0.62);
|
||||
border-bottom: 1px solid rgba(113, 141, 140, 0.12);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-heading .section-kicker {
|
||||
display: block;
|
||||
color: var(--v2-accent-strong);
|
||||
font-size: 6px;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-heading h3 {
|
||||
margin: 0;
|
||||
margin: 1px 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-title-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-title-copy p {
|
||||
max-width: 420px;
|
||||
margin: 2px 0 0;
|
||||
overflow: hidden;
|
||||
color: #6b7e7e;
|
||||
font-size: 7px;
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-channel-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-channel-legend > span:not(.simulation-label) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 6px;
|
||||
color: #52696a;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
border: 1px solid rgba(73, 122, 119, 0.13);
|
||||
border-radius: 999px;
|
||||
font-size: 7px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-channel-legend i {
|
||||
color: #fff;
|
||||
background: var(--v2-accent);
|
||||
border-radius: 999px;
|
||||
padding: 2px 4px;
|
||||
font: 900 6px "SFMono-Regular", Consolas, monospace;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-channel-legend [data-channel="ch0"] i {
|
||||
background: #3677b5;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-heading .simulation-label {
|
||||
display: none;
|
||||
}
|
||||
@@ -1898,19 +2052,44 @@
|
||||
grid-template-rows: none;
|
||||
grid-auto-rows: max-content;
|
||||
align-content: start;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(28, 111, 104, 0.28) transparent;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
padding: 6px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
background:
|
||||
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 249, 0.92));
|
||||
border-color: rgba(78, 123, 120, 0.15);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(32, 76, 73, 0.045);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel::before {
|
||||
content: "";
|
||||
width: 3px;
|
||||
position: absolute;
|
||||
inset: 8px auto 8px 0;
|
||||
background: var(--v2-accent);
|
||||
border-radius: 0 3px 3px 0;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel[data-device-channel="ch0"]::before {
|
||||
background: #3677b5;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel.active {
|
||||
border-color: color-mix(in srgb, var(--v2-accent) 32%, #dce7e4);
|
||||
box-shadow: 0 7px 18px rgba(19, 112, 104, 0.08);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel header {
|
||||
@@ -1946,6 +2125,27 @@
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-capability-line {
|
||||
margin: 5px 0 0;
|
||||
overflow: hidden;
|
||||
color: #718585;
|
||||
font-size: 7px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-capability-line span {
|
||||
margin-right: 5px;
|
||||
padding: 2px 4px;
|
||||
color: var(--v2-accent-strong);
|
||||
background: var(--v2-accent-soft);
|
||||
border-radius: 4px;
|
||||
font-size: 6px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-display,
|
||||
.console-v2 .joint-twin-shell .roof-visual,
|
||||
.console-v2 .joint-twin-shell .ambient-visual {
|
||||
@@ -2072,7 +2272,7 @@
|
||||
|
||||
.console-v2 .joint-twin-shell .window-panel,
|
||||
.console-v2 .joint-twin-shell .lighting-panel {
|
||||
min-height: 108px;
|
||||
min-height: 116px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel > .simulation-label {
|
||||
@@ -2529,3 +2729,557 @@
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Whole-vehicle state board: eight balanced cards in a complete 4 x 2 matrix. */
|
||||
.console-v2 .joint-twin-shell.v2-output-page {
|
||||
grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .twin-heading h3,
|
||||
.console-v2 .joint-twin-shell .twin-seat-button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell > .cabin-band {
|
||||
grid-template-rows: 58px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-grid {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
grid-template-areas: none;
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
align-content: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-grid > .domain-panel {
|
||||
grid-area: auto;
|
||||
grid-column: span 2;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .window-panel,
|
||||
.console-v2 .joint-twin-shell .lighting-panel {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .thermal-states {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .motion-state-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .thermal-states > span,
|
||||
.console-v2 .joint-seat-panel .motion-axis {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .motion-axis span {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||||
align-content: start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .seat-identity {
|
||||
min-width: 0;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .seat-identity strong {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .seat-channel-badge {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .dynamic-mode-state,
|
||||
.console-v2 .joint-seat-panel .thermal-states,
|
||||
.console-v2 .joint-seat-panel .motion-state-grid {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .seat-channel-badge {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
position: static;
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
overflow: hidden;
|
||||
font-size: 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .seat-identity {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .roof-panel .domain-readouts,
|
||||
.console-v2 .joint-twin-shell .ambient-panel .domain-readouts,
|
||||
.console-v2 .joint-twin-shell .window-panel .domain-readouts,
|
||||
.console-v2 .joint-twin-shell .lighting-panel .domain-readouts {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .roof-panel .domain-readouts > div,
|
||||
.console-v2 .joint-twin-shell .ambient-panel .domain-readouts > div,
|
||||
.console-v2 .joint-twin-shell .window-panel .domain-readouts > div,
|
||||
.console-v2 .joint-twin-shell .lighting-panel .domain-readouts > div {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .roof-panel .domain-readouts dd,
|
||||
.console-v2 .joint-twin-shell .ambient-panel .domain-readouts dd,
|
||||
.console-v2 .joint-twin-shell .window-panel .domain-readouts dd,
|
||||
.console-v2 .joint-twin-shell .lighting-panel .domain-readouts dd {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-readouts dt,
|
||||
.console-v2 .joint-twin-shell .domain-readouts dd {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .zone-temperature span,
|
||||
.console-v2 .joint-twin-shell .zone-temperature strong {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-panel .climate-display {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-panel .zone-temperature {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-content: center;
|
||||
gap: 2px 4px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-panel .zone-temperature small {
|
||||
min-width: 0;
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
color: #718384;
|
||||
font-size: 8px;
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-panel .zone-temperature small b {
|
||||
overflow: hidden;
|
||||
color: #354f51;
|
||||
font-size: 9px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-summary-visual {
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 4px 6px;
|
||||
overflow: hidden;
|
||||
color: #748485;
|
||||
background: linear-gradient(145deg, #f6f9f8, #edf3f1);
|
||||
border: 1px solid rgba(93, 132, 129, 0.16);
|
||||
border-radius: 7px;
|
||||
font-size: 8px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .shade-summary-visual > i {
|
||||
min-width: 0;
|
||||
height: 8px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #dce7e4;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .shade-summary-visual > i > b {
|
||||
width: 0;
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
background: linear-gradient(90deg, #74b6ae, var(--v2-accent));
|
||||
border-radius: inherit;
|
||||
transition: width 220ms ease;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .ambient-summary-visual {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .ambient-summary-visual > span {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 13px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .ambient-summary-visual i {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
display: block;
|
||||
background: #b9c5c3;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 3px rgba(116, 217, 255, 0.08);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .ambient-summary-visual b,
|
||||
.console-v2 .joint-twin-shell .window-summary-visual b,
|
||||
.console-v2 .joint-twin-shell .lighting-summary-visual b {
|
||||
overflow: hidden;
|
||||
color: #52696a;
|
||||
font-size: 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .window-summary-visual,
|
||||
.console-v2 .joint-twin-shell .lighting-summary-visual {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
padding-inline: 5px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .window-summary-visual > span,
|
||||
.console-v2 .joint-twin-shell .lighting-summary-visual > span {
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .window-summary-visual i {
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #dbe6e4;
|
||||
border: 1px solid #9db2af;
|
||||
border-radius: 2px 2px 4px 4px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .window-summary-visual i::after {
|
||||
content: "";
|
||||
height: var(--window-open, 0%);
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
background: linear-gradient(#8dcac4, var(--v2-accent));
|
||||
transition: height 220ms ease;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .lighting-summary-visual i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #b9c5c3;
|
||||
border-radius: 50%;
|
||||
transition: 180ms ease;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .lighting-summary-visual [data-state="on"] i {
|
||||
background: #f0b84a;
|
||||
box-shadow: 0 0 7px rgba(240, 184, 74, 0.8);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .vehicle-status-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .vehicle-status-panel .readonly-state,
|
||||
.console-v2 .joint-twin-shell .vehicle-status-panel.active .readonly-state {
|
||||
color: #315f5b;
|
||||
background: #e2efec;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .readonly-capability span {
|
||||
color: #526f71;
|
||||
background: #edf2f1;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .vehicle-primary-readout {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 0.72fr 1.28fr;
|
||||
gap: 4px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .vehicle-primary-readout > div {
|
||||
min-width: 0;
|
||||
min-height: 46px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 4px 6px;
|
||||
background: linear-gradient(145deg, #eef5f3, #f8faf9);
|
||||
border: 1px solid rgba(74, 119, 116, 0.16);
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .vehicle-primary-readout span {
|
||||
color: #708282;
|
||||
font-size: 8px;
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .vehicle-primary-readout strong {
|
||||
margin-top: 3px;
|
||||
overflow: hidden;
|
||||
color: #193d3b;
|
||||
font: 900 13px/1.15 "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .vehicle-primary-readout > div:first-child strong {
|
||||
color: var(--v2-accent-strong);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .door-state-grid {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .door-state-grid > span {
|
||||
min-width: 0;
|
||||
min-height: 29px;
|
||||
display: grid;
|
||||
grid-template-columns: 6px minmax(0, 1fr);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 5px;
|
||||
color: #52696a;
|
||||
background: #f3f5f4;
|
||||
border: 1px solid rgba(113, 141, 140, 0.16);
|
||||
border-radius: 5px;
|
||||
font-size: 9px;
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .door-state-grid i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #aab6b5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .door-state-grid b {
|
||||
grid-column: 2;
|
||||
color: #607474;
|
||||
font-size: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .door-state-grid [data-state="lock"] i {
|
||||
background: var(--v2-accent);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .door-state-grid [data-state="lock"] b {
|
||||
color: var(--v2-accent-strong);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .door-state-grid [data-state="unlock"] i {
|
||||
background: #d99a36;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .door-state-grid [data-state="unlock"] b {
|
||||
color: #9a6818;
|
||||
}
|
||||
|
||||
@media (max-height: 820px) {
|
||||
.console-v2 .joint-twin-shell > .cabin-band {
|
||||
grid-template-rows: 50px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-heading {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .cabin-title-copy p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-grid {
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel header {
|
||||
grid-template-columns: 24px minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-icon,
|
||||
.console-v2 .joint-seat-panel .seat-identity > svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel header strong,
|
||||
.console-v2 .joint-seat-panel .seat-identity strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-panel header small,
|
||||
.console-v2 .joint-seat-panel .seat-identity span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-capability-line {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-capability-line {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-display,
|
||||
.console-v2 .joint-twin-shell .roof-visual,
|
||||
.console-v2 .joint-twin-shell .ambient-visual {
|
||||
min-height: 22px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-direction-display {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .zone-temperature,
|
||||
.console-v2 .joint-twin-shell .domain-readouts > div {
|
||||
min-height: 22px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .zone-temperature span,
|
||||
.console-v2 .joint-twin-shell .zone-temperature strong,
|
||||
.console-v2 .joint-twin-shell .domain-readouts > div,
|
||||
.console-v2 .joint-twin-shell .domain-readouts dd {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .domain-readouts {
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .roof-panel .domain-readouts > div,
|
||||
.console-v2 .joint-twin-shell .ambient-panel .domain-readouts > div,
|
||||
.console-v2 .joint-twin-shell .window-panel .domain-readouts > div,
|
||||
.console-v2 .joint-twin-shell .lighting-panel .domain-readouts > div {
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-panel .zone-temperature,
|
||||
.console-v2 .joint-twin-shell .climate-panel .domain-readouts > div {
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-twin-shell .climate-panel .zone-temperature {
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .dynamic-mode-state {
|
||||
margin: 4px 0;
|
||||
padding: 3px 4px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .dynamic-mode-state b,
|
||||
.console-v2 .joint-seat-panel .thermal-states b,
|
||||
.console-v2 .joint-seat-panel .motion-axis b {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .thermal-states,
|
||||
.console-v2 .joint-seat-panel .motion-state-grid {
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .thermal-states > span,
|
||||
.console-v2 .joint-seat-panel .motion-axis {
|
||||
min-height: 24px;
|
||||
padding: 3px 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .motion-state-grid {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .thermal-states > span {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
justify-items: center;
|
||||
gap: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .thermal-states svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .motion-axis {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.console-v2 .joint-seat-panel .thermal-states b,
|
||||
.console-v2 .joint-seat-panel .motion-axis b {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user