refactor(ui): converge semi vehicle directory
This commit is contained in:
@@ -24318,3 +24318,148 @@
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Semi UI vehicle directory convergence.
|
||||
* The directory remains dense, but uses one white evidence surface, explicit
|
||||
* row affordances and a quieter three-signal summary.
|
||||
*/
|
||||
.v2-vehicle-directory-v3 > .v2-vehicle-recent-card > .semi-card-body {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-metric-rail .v2-workspace-metric-list {
|
||||
grid-template-columns: 1.08fr .92fr 1fr;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-metric-rail.is-queue.has-context > .semi-card-body {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(340px, .96fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-context {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-context > .v2-vehicle-directory-context-actions {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-context-actions > .semi-tag {
|
||||
min-height: 22px;
|
||||
margin: 0;
|
||||
border-radius: 999px;
|
||||
padding-inline: 8px;
|
||||
font-size: 9px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-context-actions > .semi-button {
|
||||
min-width: 58px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
color: #45627f;
|
||||
font-size: 9px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-directory-table.semi-table-wrapper,
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-grid {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-table .semi-table-thead > .semi-table-row > .semi-table-row-head {
|
||||
height: 40px;
|
||||
background: #f8fafc;
|
||||
color: #66778e;
|
||||
font-size: 10px;
|
||||
letter-spacing: .015em;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
height: 52px;
|
||||
background: #fff;
|
||||
transition: background-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-table .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell,
|
||||
.v2-vehicle-directory-table .semi-table-tbody > .semi-table-row:focus-visible > .semi-table-row-cell {
|
||||
background: #f6f9fe;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-table .semi-table-tbody > .semi-table-row.is-online > .semi-table-row-cell:first-child {
|
||||
box-shadow: inset 3px 0 #23a779;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-table .semi-table-tbody > .semi-table-row.is-offline > .semi-table-row-cell:first-child {
|
||||
box-shadow: inset 3px 0 #c9d2de;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-table .semi-table-tbody > .semi-table-row:hover .v2-vehicle-directory-open {
|
||||
background: #eaf3ff;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-open {
|
||||
display: inline-flex;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
border-radius: 999px;
|
||||
padding-inline: 10px;
|
||||
color: #155fc5;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
transition: background-color .16s ease;
|
||||
}
|
||||
|
||||
.v2-vehicle-recent-card > .semi-card-body > .v2-vehicle-directory-pagination {
|
||||
background: #fbfcfe;
|
||||
box-shadow: 0 -8px 22px rgba(43, 62, 86, .025);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) and (min-width: 681px) {
|
||||
.v2-vehicle-directory-metric-rail.is-queue.has-context > .semi-card-body {
|
||||
grid-template-columns: minmax(0, 1fr) 270px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.v2-vehicle-directory-metric-rail.is-queue.has-context > .semi-card-body {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-grid {
|
||||
padding: 0 10px 5px;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-item-shell {
|
||||
border-bottom: 1px solid #e9eef5;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-item-shell:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-item.semi-button {
|
||||
min-height: 64px;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
transition: background-color .16s ease;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-item.semi-button:active {
|
||||
background: #eef5ff;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-item-shell.is-online {
|
||||
box-shadow: inset 2px 0 #23a779;
|
||||
}
|
||||
|
||||
.v2-vehicle-directory-v3 .v2-vehicle-recent-item-shell.is-offline {
|
||||
box-shadow: inset 2px 0 #c9d2de;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user