feat: refine vehicle console and self-repair workflow
This commit is contained in:
@@ -29,24 +29,6 @@
|
||||
linear-gradient(158deg, var(--v2-sidebar) 0%, #eef2fa 61%, var(--v2-sidebar-deep) 132%);
|
||||
}
|
||||
|
||||
.console-v2[data-module="self-calibration"] .v2-avatar {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
background:
|
||||
radial-gradient(circle at 28% 25%, rgba(255, 255, 255, 0.96), transparent 18%),
|
||||
linear-gradient(135deg, #183c7a 3%, #6688d4 48%, #e5b0c8 55%, #315eaa 100%);
|
||||
}
|
||||
|
||||
.console-v2[data-module="self-calibration"] .v2-profile {
|
||||
grid-template-columns: 46px minmax(0, 1fr) 28px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.console-v2[data-module="self-calibration"] .v2-role-select > span,
|
||||
.console-v2[data-module="self-calibration"] .v2-role-select .v2-dropdown-trigger {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.console-v2[data-module="self-calibration"] .v2-role-select > .v2-dropdown-trigger {
|
||||
max-width: none;
|
||||
gap: 5px;
|
||||
@@ -80,7 +62,7 @@
|
||||
grid-row: 2;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 15px;
|
||||
padding: clamp(14px, 1.55vw, 24px) 0 0;
|
||||
padding: var(--v2-module-title-block) 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -98,7 +80,7 @@
|
||||
}
|
||||
|
||||
.v2-calibration-mode-switch button {
|
||||
min-height: 52px;
|
||||
min-height: var(--v2-sidebar-item-height);
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
@@ -123,14 +105,15 @@
|
||||
|
||||
.v2-calibration-mode-switch button:hover {
|
||||
color: var(--v2-accent-strong);
|
||||
background: rgba(255, 255, 255, 0.52);
|
||||
background: color-mix(in srgb, var(--v2-accent-soft) 34%, white);
|
||||
border-color: color-mix(in srgb, var(--v2-accent) 10%, white);
|
||||
}
|
||||
|
||||
.v2-calibration-mode-switch button.active {
|
||||
color: #111f20;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-color: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: 0 10px 28px rgba(30, 56, 107, 0.08);
|
||||
border-color: color-mix(in srgb, var(--v2-accent) 18%, white);
|
||||
box-shadow: 0 10px 28px color-mix(in srgb, var(--v2-accent) 10%, transparent);
|
||||
}
|
||||
|
||||
.v2-calibration-mode-switch button.active svg {
|
||||
@@ -139,28 +122,30 @@
|
||||
|
||||
.v2-calibration-config-stack {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
gap: 8px;
|
||||
padding-left: 9px;
|
||||
border-left: 1px solid color-mix(in srgb, var(--v2-accent) 14%, transparent);
|
||||
}
|
||||
|
||||
.v2-calibration-config-card {
|
||||
min-width: 0;
|
||||
min-height: 52px;
|
||||
min-height: var(--v2-sidebar-card-height);
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 11px;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
color: #314565;
|
||||
background: rgba(255, 255, 255, 0.52);
|
||||
border: 1px solid rgba(49, 94, 170, 0.11);
|
||||
border-radius: 13px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid rgba(255, 255, 255, 0.78);
|
||||
border-radius: var(--v2-sidebar-card-radius);
|
||||
}
|
||||
|
||||
.v2-calibration-config-card > svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
justify-self: center;
|
||||
color: #5f7fb7;
|
||||
color: var(--v2-accent);
|
||||
}
|
||||
|
||||
.v2-calibration-config-card > div {
|
||||
@@ -170,14 +155,15 @@
|
||||
|
||||
.v2-calibration-config-card small {
|
||||
color: #7786a2;
|
||||
font-size: 9px;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v2-calibration-config-card strong {
|
||||
overflow: hidden;
|
||||
color: #1e386b;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -207,7 +193,7 @@
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
color: #1e386b;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -274,6 +260,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-inline: var(--v2-module-title-inline);
|
||||
}
|
||||
|
||||
.v2-calibration-heading > div:first-child {
|
||||
@@ -466,17 +453,32 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.v2-calibration-seat-scene .calibration-cartoon-viewer {
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.v2-calibration-seat-scene .calibration-cartoon-viewer.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.v2-calibration-seat-scene .seat-model-host canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
outline: 0;
|
||||
cursor: grab;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.v2-calibration-seat-scene .seat-model-host canvas:active {
|
||||
cursor: grabbing;
|
||||
.v2-calibration-seat-scene .v2-repair-seat-fallback {
|
||||
inset: 4px 18px 18px;
|
||||
transform: scale(0.82);
|
||||
}
|
||||
|
||||
.v2-calibration-seat-scene .repair-css-halo {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.v2-calibration-seat-scene .model-loading {
|
||||
@@ -1090,7 +1092,7 @@
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 1.15fr) minmax(250px, 0.94fr) minmax(270px, 0.91fr);
|
||||
grid-template-columns: minmax(420px, 1.06fr) minmax(380px, 0.94fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@@ -1108,8 +1110,7 @@
|
||||
}
|
||||
|
||||
.v2-calibration-live-grid .v2-calibration-stage > header,
|
||||
.v2-calibration-live-grid .v2-calibration-video-panel > header,
|
||||
.v2-calibration-live-grid .v2-calibration-mqtt-panel > header {
|
||||
.v2-calibration-live-grid .v2-calibration-video-panel > header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -1460,6 +1461,37 @@
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@media (max-height: 820px) {
|
||||
.console-v2[data-module="self-calibration"] .v2-calibration-sidebar {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.v2-calibration-sidebar .v2-section-heading h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.v2-calibration-sidebar > .v2-field-caption {
|
||||
margin-bottom: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-calibration-mode-switch button {
|
||||
min-height: 41px;
|
||||
grid-template-columns: 21px minmax(0, 1fr);
|
||||
padding: 0 9px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-calibration-mode-switch button svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.v2-calibration-config-card {
|
||||
min-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.v2-calibration-hero-grid {
|
||||
grid-template-columns: minmax(0, 1.5fr) minmax(245px, 0.75fr);
|
||||
@@ -1474,7 +1506,7 @@
|
||||
}
|
||||
|
||||
.v2-calibration-live-grid {
|
||||
grid-template-columns: minmax(220px, 1.1fr) minmax(210px, 0.94fr) minmax(225px, 0.96fr);
|
||||
grid-template-columns: minmax(390px, 1.06fr) minmax(340px, 0.94fr);
|
||||
}
|
||||
|
||||
.v2-calibration-live-axes .v2-calibration-axis-grid {
|
||||
|
||||
Reference in New Issue
Block a user