refactor(ui): polish semi mileage workspace
This commit is contained in:
lingniu
@@ -23942,6 +23942,195 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Mileage matrix polish.
|
||||
* The filter row keeps complete dates visible, the summary reads as one
|
||||
* restrained Semi metric rail and the matrix remains the dominant workspace
|
||||
* on both desktop and mobile.
|
||||
*/
|
||||
@media (min-width: 1101px) {
|
||||
.v2-mileage-query-panel .v2-mileage-filter {
|
||||
grid-template-columns:
|
||||
minmax(250px, 1.1fr)
|
||||
minmax(270px, .96fr)
|
||||
auto
|
||||
minmax(208px, .78fr)
|
||||
minmax(326px, 1.18fr);
|
||||
}
|
||||
|
||||
.v2-mileage-date-range .semi-datepicker-input {
|
||||
min-width: 270px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 681px) {
|
||||
.v2-mileage-page {
|
||||
gap: 10px;
|
||||
padding: 14px 18px 16px;
|
||||
background: #f4f7fa;
|
||||
}
|
||||
|
||||
.v2-mileage-discovery-shell,
|
||||
.v2-mileage-results.semi-card {
|
||||
border-color: #dce5ef;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 8px 26px rgba(31, 52, 78, .055);
|
||||
}
|
||||
|
||||
.v2-mileage-discovery-shell > .v2-mileage-command-bar {
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.v2-mileage-command-bar .v2-workspace-command-copy > .semi-typography:first-child {
|
||||
color: #263a51;
|
||||
font-size: 15px;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.v2-mileage-query-panel .v2-mileage-filter {
|
||||
min-height: 66px;
|
||||
padding: 9px 12px 10px;
|
||||
}
|
||||
|
||||
.v2-mileage-summary .v2-workspace-metric-list > span {
|
||||
min-height: 58px;
|
||||
padding-inline: 13px;
|
||||
}
|
||||
|
||||
.v2-mileage-summary .v2-workspace-metric-list > span.is-primary {
|
||||
background: #f4f8ff;
|
||||
box-shadow: inset 0 2px #6d9ee9;
|
||||
}
|
||||
|
||||
.v2-mileage-summary .v2-workspace-metric-list > span.is-primary.is-success {
|
||||
background: #f4faf7;
|
||||
box-shadow: inset 0 2px #63b88f;
|
||||
}
|
||||
|
||||
.v2-mileage-summary .v2-workspace-metric-list > span > strong {
|
||||
font-size: clamp(18px, 1.5vw, 23px);
|
||||
font-weight: 750;
|
||||
letter-spacing: -.02em;
|
||||
}
|
||||
|
||||
.v2-mileage-results > .semi-card-body > .v2-workspace-panel-header {
|
||||
min-height: 50px;
|
||||
padding-inline: 15px 12px;
|
||||
}
|
||||
|
||||
.v2-mileage-matrix-guide {
|
||||
min-height: 34px;
|
||||
padding-inline: 15px;
|
||||
}
|
||||
|
||||
.v2-mileage-table .semi-table-thead > .semi-table-row > .semi-table-row-head {
|
||||
height: 44px;
|
||||
background: #f5f8fb;
|
||||
color: #52667d;
|
||||
font-weight: 680;
|
||||
}
|
||||
|
||||
.v2-mileage-table .semi-table-tbody > .semi-table-row:nth-child(even) > .semi-table-row-cell:not(.is-total) {
|
||||
background-color: #fbfcfe;
|
||||
}
|
||||
|
||||
.v2-mileage-table .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
|
||||
background-color: #f2f7fd;
|
||||
}
|
||||
|
||||
.v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-total {
|
||||
background-color: #f3f7fc;
|
||||
}
|
||||
|
||||
.v2-mileage-table .semi-table-row-cell.is-period {
|
||||
color: #0d5fc7;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.v2-mileage-page {
|
||||
gap: 7px;
|
||||
background: #f1f5f9;
|
||||
padding: 8px 8px calc(82px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.v2-mileage-mobile-discovery > .v2-mobile-filter-toggle.semi-card,
|
||||
.v2-mileage-summary.v2-workspace-metric-rail.is-queue.semi-card,
|
||||
.v2-mileage-results.semi-card {
|
||||
border-color: #d9e3ee;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 20px rgba(31, 52, 78, .055);
|
||||
}
|
||||
|
||||
.v2-mileage-summary .v2-workspace-metric-list > span {
|
||||
min-height: 54px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.v2-mileage-summary .v2-workspace-metric-list > span.is-primary {
|
||||
background: #f4f8ff;
|
||||
box-shadow: inset 2px 0 #5d97eb;
|
||||
}
|
||||
|
||||
.v2-mileage-summary .v2-workspace-metric-list > span.is-primary.is-success {
|
||||
background: #f4faf7;
|
||||
box-shadow: inset 2px 0 #55b384;
|
||||
}
|
||||
|
||||
.v2-mileage-summary .v2-workspace-metric-list > span > strong {
|
||||
font-size: 19px;
|
||||
letter-spacing: -.02em;
|
||||
}
|
||||
|
||||
.v2-mileage-matrix-guide {
|
||||
min-height: 46px;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
|
||||
.v2-mileage-matrix-guide > .v2-mileage-matrix-guide-mobile {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 2px 5px;
|
||||
}
|
||||
|
||||
.v2-mileage-matrix-guide-mobile > .is-mobile-hint {
|
||||
min-height: 18px;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 8.5px;
|
||||
}
|
||||
|
||||
.v2-mileage-matrix-guide-mobile > span {
|
||||
gap: 3px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-mileage-matrix-guide .semi-tag {
|
||||
min-width: 28px;
|
||||
height: 18px;
|
||||
padding-inline: 4px;
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
.v2-mileage-table-wrap {
|
||||
overscroll-behavior: contain;
|
||||
scroll-snap-type: x proximity;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
|
||||
.v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-date {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-total {
|
||||
background-color: #f3f7fc;
|
||||
}
|
||||
|
||||
.v2-mileage-table .semi-table-row-cell.is-period {
|
||||
color: #0d5fc7;
|
||||
font-weight: 780;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The source diagnostic now follows the same Semi UI metric hierarchy as
|
||||
* monitor, history and mileage workspaces. The first two facts remain visible
|
||||
|
||||
Reference in New Issue
Block a user