feat: unify history metrics with semi ui
This commit is contained in:
@@ -15192,121 +15192,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Shared Semi UI metric rail applied to history data.
|
||||
* The rail mirrors the mileage workspace: one primary outcome, then three
|
||||
* supporting facts. Empty history screens omit the rail entirely.
|
||||
*/
|
||||
.v2-history-summary-rail.semi-card {
|
||||
min-width: 0;
|
||||
min-height: 88px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d8e3ef;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 26px rgba(31, 53, 80, .05);
|
||||
}
|
||||
|
||||
.v2-history-summary-rail > .semi-card-body {
|
||||
display: grid;
|
||||
min-height: 88px;
|
||||
grid-template-columns: minmax(280px, .78fr) minmax(0, 1.72fr);
|
||||
}
|
||||
|
||||
.v2-history-summary-card.semi-card {
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-history-summary-card > .semi-card-body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 11px 16px !important;
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-primary > .semi-card-body {
|
||||
overflow: hidden;
|
||||
background: linear-gradient(128deg, #0c61e7 0%, #1c73ee 68%, #2c82ef 100%);
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-primary > .semi-card-body::after {
|
||||
position: absolute;
|
||||
top: -80px;
|
||||
right: -44px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border: 26px solid rgba(255, 255, 255, .08);
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.v2-history-summary-card small,
|
||||
.v2-history-summary-card span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
color: #7c8a9d;
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-history-summary-card strong {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 5px 0 4px;
|
||||
overflow: hidden;
|
||||
color: #22354d;
|
||||
font-size: clamp(18px, 1.45vw, 24px);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 760;
|
||||
line-height: 1.08;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-primary :is(small,strong,span) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-primary small,
|
||||
.v2-history-summary-card.is-primary span {
|
||||
color: rgba(255, 255, 255, .72);
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-primary .v2-history-summary-value {
|
||||
font-size: clamp(25px, 2.1vw, 34px);
|
||||
letter-spacing: -.035em;
|
||||
}
|
||||
|
||||
.v2-history-summary-secondary.semi-card-group {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-history-summary-secondary > .v2-history-summary-card + .v2-history-summary-card > .semi-card-body::before {
|
||||
position: absolute;
|
||||
inset: 18px auto 18px 0;
|
||||
width: 1px;
|
||||
background: #e3eaf2;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-sources strong {
|
||||
font-size: clamp(13px, 1.05vw, 17px);
|
||||
}
|
||||
|
||||
.v2-history-result-meta {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
@@ -15317,6 +15202,19 @@
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.v2-history-summary-unit {
|
||||
margin-left: 3px;
|
||||
color: #8493a5;
|
||||
font-size: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.v2-history-summary-rail .v2-workspace-metric-list > span.is-primary .v2-history-summary-unit {
|
||||
color: #6f90bb;
|
||||
}
|
||||
|
||||
.v2-history-discovery-shell {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
@@ -15577,16 +15475,6 @@
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) and (min-width: 681px) {
|
||||
.v2-history-summary-rail > .semi-card-body {
|
||||
grid-template-columns: minmax(230px, .7fr) minmax(0, 1.6fr);
|
||||
}
|
||||
|
||||
.v2-history-summary-card > .semi-card-body {
|
||||
padding-inline: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.v2-history-discovery-shell {
|
||||
display: contents;
|
||||
@@ -15682,65 +15570,6 @@
|
||||
max-width: 205px;
|
||||
}
|
||||
|
||||
.v2-history-summary-rail.semi-card {
|
||||
min-height: 132px;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-history-summary-rail > .semi-card-body {
|
||||
min-height: 132px;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 70px 58px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-primary.semi-card,
|
||||
.v2-history-summary-card.is-primary > .semi-card-body {
|
||||
min-height: 70px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-primary > .semi-card-body {
|
||||
padding: 7px 13px 8px !important;
|
||||
}
|
||||
|
||||
.v2-history-summary-card.is-primary .v2-history-summary-value {
|
||||
margin-block: 2px 1px;
|
||||
font-size: 24px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.v2-history-summary-secondary.semi-card-group {
|
||||
min-height: 58px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dfe7f0;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.v2-history-summary-secondary .v2-history-summary-card > .semi-card-body {
|
||||
min-height: 58px;
|
||||
padding: 7px 8px !important;
|
||||
}
|
||||
|
||||
.v2-history-summary-secondary > .v2-history-summary-card + .v2-history-summary-card > .semi-card-body::before {
|
||||
inset-block: 8px;
|
||||
}
|
||||
|
||||
.v2-history-summary-secondary .v2-history-summary-card small,
|
||||
.v2-history-summary-secondary .v2-history-summary-card span {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-history-summary-secondary .v2-history-summary-card strong,
|
||||
.v2-history-summary-secondary .v2-history-summary-card.is-sources strong {
|
||||
margin-block: 2px 1px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Reference in New Issue
Block a user