443 lines
12 KiB
CSS
443 lines
12 KiB
CSS
/* Data workspaces: quiet grouping, readable records, explicit primary actions.
|
|
* Loaded after legacy page styles; rules stay within the three data workspaces.
|
|
*/
|
|
.v2-vehicle-directory-v3.v2-vehicle-search-page,
|
|
.v2-history-page,
|
|
.v2-mileage-page,
|
|
.v2-vehicle-record-page.v2-vehicle-record-v3 {
|
|
gap: 20px;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 > .v2-vehicle-discovery-shell,
|
|
.v2-history-page > .v2-history-discovery-shell,
|
|
.v2-mileage-page .v2-mileage-discovery-shell {
|
|
border: 1px solid var(--v2-color-border);
|
|
border-radius: 16px;
|
|
background: var(--v2-color-surface);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-command-bar.v2-workspace-command-bar,
|
|
.v2-history-page .v2-history-command-bar.v2-workspace-command-bar {
|
|
min-height: 66px;
|
|
margin: 0;
|
|
padding: 16px 20px;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--v2-color-border);
|
|
border-radius: 16px 16px 0 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-workspace-command-copy,
|
|
.v2-history-page .v2-workspace-command-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 5px;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-workspace-command-title.semi-typography,
|
|
.v2-history-page .v2-workspace-command-title.semi-typography {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-workspace-command-description.semi-typography,
|
|
.v2-history-page .v2-workspace-command-description.semi-typography {
|
|
color: var(--v2-color-text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-search-form,
|
|
.v2-history-page .v2-history-toolbar,
|
|
.v2-mileage-page .v2-mileage-filter {
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
background: transparent;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-business-filter-grid {
|
|
gap: 16px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-business-filter-grid label > span,
|
|
.v2-history-page .v2-history-toolbar label > span,
|
|
.v2-mileage-page .v2-mileage-filter label > span {
|
|
color: var(--v2-color-text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 > .v2-vehicle-recent-card.semi-card,
|
|
.v2-history-page .v2-history-table-card.semi-card,
|
|
.v2-mileage-page .v2-mileage-results.semi-card {
|
|
border: 1px solid var(--v2-color-border);
|
|
border-radius: 16px;
|
|
background: var(--v2-color-surface);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-context h5 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-context small,
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-status small {
|
|
color: var(--v2-color-text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-table .semi-table-thead > tr > th,
|
|
.v2-history-page .v2-history-data-table .semi-table-thead > tr > th,
|
|
.v2-mileage-page .v2-mileage-table .semi-table-thead > tr > th {
|
|
padding: 12px 16px;
|
|
border-color: var(--v2-color-border);
|
|
background: var(--v2-color-surface-subtle);
|
|
color: var(--v2-color-text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-table .semi-table-tbody > tr > td {
|
|
height: 68px;
|
|
padding: 13px 16px;
|
|
border-bottom-color: var(--v2-color-border);
|
|
box-shadow: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-table .semi-table-row::before {
|
|
display: none;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-identity strong,
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-profile strong {
|
|
color: var(--v2-color-text);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-identity small,
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-profile small {
|
|
margin-top: 5px;
|
|
color: var(--v2-color-text-secondary);
|
|
font-size: 12px;
|
|
letter-spacing: .01em;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-open {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.v2-history-page .v2-history-table-card > .semi-card-body > .v2-workspace-panel-header,
|
|
.v2-mileage-page .v2-mileage-results > .semi-card-body > .v2-workspace-panel-header {
|
|
min-height: 72px;
|
|
padding: 16px 20px;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v2-history-page .v2-history-empty.v2-workspace-empty-guide {
|
|
min-height: 320px;
|
|
padding: 56px 24px;
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v2-history-page .v2-history-empty .semi-empty-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.v2-history-page .v2-history-empty .semi-empty-description {
|
|
margin-top: 12px;
|
|
color: var(--v2-color-text-secondary);
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.v2-history-page .v2-history-empty .v2-workspace-empty-guide-icon {
|
|
border: 0;
|
|
border-radius: 16px;
|
|
background: var(--v2-color-surface-subtle);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v2-history-page .v2-history-data-table .semi-table-tbody > tr > td,
|
|
.v2-mileage-page .v2-mileage-table .semi-table-tbody > tr > td {
|
|
min-height: 52px;
|
|
padding: 15px 16px;
|
|
font-size: 13px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.v2-mileage-page .v2-mileage-table .semi-table-tbody > tr > td strong,
|
|
.v2-mileage-page .v2-mileage-table .semi-table-tbody > tr > td span {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.v2-mileage-page .v2-mileage-table .semi-table-tbody > tr > td.is-total strong,
|
|
.v2-mileage-page .v2-mileage-table .semi-table-tbody > tr > td.is-plate strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.v2-mileage-page .v2-mileage-evidence {
|
|
gap: 16px;
|
|
color: var(--v2-color-text-secondary);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-identity-primary .v2-plate {
|
|
color: var(--v2-color-text);
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
letter-spacing: -.03em;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-identity-vin b {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
letter-spacing: .02em;
|
|
}
|
|
|
|
@media (max-width: 1100px) and (min-width: 681px) {
|
|
.v2-vehicle-directory-v3 .v2-vehicle-command-bar.v2-workspace-command-bar,
|
|
.v2-history-page .v2-history-command-bar.v2-workspace-command-bar {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-workspace-command-actions,
|
|
.v2-history-page .v2-workspace-command-actions {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.v2-vehicle-directory-v3.v2-vehicle-search-page,
|
|
.v2-history-page,
|
|
.v2-mileage-page,
|
|
.v2-vehicle-record-page.v2-vehicle-record-v3 {
|
|
gap: 12px;
|
|
}
|
|
|
|
.v2-history-page .v2-history-command-bar.v2-workspace-command-bar,
|
|
.v2-history-page .v2-history-table-card > .semi-card-body > .v2-workspace-panel-header,
|
|
.v2-mileage-page .v2-mileage-results > .semi-card-body > .v2-workspace-panel-header {
|
|
min-height: 60px;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.v2-history-page .v2-history-empty.v2-workspace-empty-guide {
|
|
min-height: 280px;
|
|
padding: 36px 18px;
|
|
}
|
|
|
|
.v2-history-page .v2-history-empty .semi-empty-title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.v2-mileage-page .v2-mileage-evidence {
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* Keep search suggestions outside the rounded surface without clipping them. */
|
|
.v2-vehicle-directory-v3 .v2-vehicle-query-panel.v2-workspace-filter-panel.semi-card,
|
|
.v2-vehicle-directory-v3 .v2-vehicle-query-panel > .semi-card-body,
|
|
.v2-vehicle-directory-v3 .v2-vehicle-search-form {
|
|
border: 0;
|
|
border-radius: 0 0 16px 16px;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-table .semi-table-tbody > .semi-table-row.is-online > .semi-table-row-cell:first-child,
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-table .semi-table-tbody > .semi-table-row.is-offline > .semi-table-row-cell:first-child {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-open {
|
|
flex-wrap: nowrap;
|
|
flex-shrink: 0;
|
|
gap: 5px;
|
|
padding-inline: 4px;
|
|
white-space: nowrap;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-open > svg {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
@media (min-width: 681px) {
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-metric-rail.is-queue.has-context > .semi-card-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(300px, 1.15fr) minmax(0, 1.5fr);
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-metric-rail .v2-workspace-metric-context {
|
|
order: -1;
|
|
padding: 14px 16px;
|
|
border: 0;
|
|
border-right: 1px solid var(--v2-color-border);
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-context {
|
|
flex-wrap: wrap;
|
|
gap: 8px 14px;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-context > span:first-child {
|
|
flex: 1 1 180px;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-directory-metric-rail .v2-workspace-metric-list {
|
|
min-width: 0;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-record-nav > .semi-card-body > .v2-vehicle-section-nav {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
padding: 10px 14px;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-section-nav .semi-button {
|
|
min-height: 38px;
|
|
flex: 0 0 auto;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-event-list .v2-event-row > div > strong {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-event-list .v2-event-row > div > p,
|
|
.v2-vehicle-record-v3 .v2-event-list .v2-event-row > time,
|
|
.v2-vehicle-record-v3 .v2-live-report-meta,
|
|
.v2-vehicle-record-v3 .v2-map-update-time {
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta small,
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-vin small,
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta strong,
|
|
.v2-vehicle-record-v3.is-mobile-layout .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta small,
|
|
.v2-vehicle-record-v3.is-mobile-layout .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-meta strong {
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button,
|
|
.v2-vehicle-record-v3.is-mobile-layout .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button {
|
|
min-height: 38px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.v2-content.is-section-vehicles .v2-monitor-return > a,
|
|
.v2-content.is-section-vehicles .v2-monitor-return > span,
|
|
.v2-content.is-section-vehicles .v2-monitor-return > em {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@media (min-width: 681px) {
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command {
|
|
min-height: 100px;
|
|
padding: 0;
|
|
grid-template-columns: minmax(235px, .7fr) minmax(0, 2fr);
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-copy {
|
|
display: flex;
|
|
min-height: 100px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
padding: 16px 20px;
|
|
border-right: 0;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-workspace-command-actions {
|
|
grid-template-columns: minmax(220px, .85fr) minmax(270px, 1.15fr);
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-primary {
|
|
justify-content: flex-start;
|
|
padding: 0;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-plate {
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-content: center;
|
|
gap: 6px;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.v2-vehicle-record-v3 .v2-vehicle-command-header.v2-vehicle-record-command .v2-identity-actions > .semi-button {
|
|
width: auto;
|
|
flex: 0 0 auto;
|
|
padding-inline: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.v2-vehicle-directory-v3 .v2-vehicle-mobile-scope-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-mobile-scope-row > .v2-mobile-filter-toggle.semi-button {
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 56px;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-mobile-scope-row .v2-mobile-filter-toggle-content {
|
|
width: 100%;
|
|
min-width: 0;
|
|
grid-template-columns: 38px minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.v2-vehicle-directory-v3 .v2-vehicle-mobile-scope-row > .v2-vehicle-mobile-sync.semi-button {
|
|
width: auto;
|
|
min-width: 118px;
|
|
min-height: 44px;
|
|
justify-self: end;
|
|
padding: 10px 14px;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|