refine Semi UI alert workspace
This commit is contained in:
@@ -6645,6 +6645,30 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-alert-event-evidence {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-alert-event-evidence strong,
|
||||
.v2-alert-event-evidence small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-alert-event-evidence strong {
|
||||
color: #b83f39;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.v2-alert-event-evidence small {
|
||||
color: #7d8b9e;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-alert-table-card > .semi-card-body > footer {
|
||||
min-height: 46px;
|
||||
padding: 6px 12px;
|
||||
@@ -6703,6 +6727,134 @@
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.v2-alert-focus-card > .semi-card-body {
|
||||
background: linear-gradient(145deg, #fff 0%, #f7faff 100%);
|
||||
}
|
||||
|
||||
.v2-alert-focus-identity {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid #e6ebf2;
|
||||
padding: 13px 14px 12px;
|
||||
}
|
||||
|
||||
.v2-alert-focus-identity > span {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.v2-alert-focus-identity small,
|
||||
.v2-alert-focus-facts small {
|
||||
color: #7e8c9f;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-alert-focus-identity strong {
|
||||
overflow: hidden;
|
||||
color: #233b56;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-alert-focus-identity code {
|
||||
overflow: hidden;
|
||||
color: #7b899c;
|
||||
font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-alert-focus-identity > .semi-tag {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-alert-focus-facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border-bottom: 1px solid #e6ebf2;
|
||||
}
|
||||
|
||||
.v2-alert-focus-facts > span {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 4px;
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
.v2-alert-focus-facts > span + span {
|
||||
border-left: 1px solid #e6ebf2;
|
||||
}
|
||||
|
||||
.v2-alert-focus-facts strong {
|
||||
overflow: hidden;
|
||||
color: #3d5068;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-alert-focus-card .v2-alert-evidence {
|
||||
padding: 11px 12px 12px;
|
||||
}
|
||||
|
||||
.v2-alert-technical-collapse.semi-collapse {
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dfe6ef;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 12px rgba(31, 53, 80, .035);
|
||||
}
|
||||
|
||||
.v2-alert-technical-collapse > .semi-collapse-item {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.v2-alert-technical-collapse .semi-collapse-header {
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.v2-alert-technical-collapse .semi-collapse-header:hover {
|
||||
background: #f7faff;
|
||||
}
|
||||
|
||||
.v2-alert-technical-heading {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-alert-technical-heading strong {
|
||||
color: #33475f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-alert-technical-heading small {
|
||||
color: #8491a3;
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.v2-alert-technical-collapse .semi-collapse-content {
|
||||
border-top: 1px solid #e7ecf2;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.v2-alert-technical-collapse .semi-collapse-content-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-alert-detail-card.v2-alert-progress-card > .semi-card-body,
|
||||
.v2-alert-detail-card.v2-alert-disposition-card > .semi-card-body {
|
||||
padding: 10px !important;
|
||||
@@ -7032,7 +7184,7 @@
|
||||
}
|
||||
|
||||
.v2-alert-context-card.semi-card {
|
||||
min-height: 104px;
|
||||
min-height: 88px;
|
||||
}
|
||||
|
||||
.v2-alert-context-card > .semi-card-body {
|
||||
@@ -7040,18 +7192,18 @@
|
||||
}
|
||||
|
||||
.v2-alert-context-card .v2-alert-kpis {
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
height: 54px;
|
||||
min-height: 54px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.v2-alert-context-card .v2-alert-kpis .v2-metric-action,
|
||||
.v2-alert-context-card .v2-alert-kpis .v2-metric-action-content {
|
||||
min-height: 64px;
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
.v2-alert-context-card .v2-alert-kpis .v2-metric-action {
|
||||
padding: 7px 5px;
|
||||
padding: 5px 4px;
|
||||
}
|
||||
|
||||
.v2-alert-context-card .v2-alert-kpis .v2-metric-action.is-notice {
|
||||
@@ -7070,18 +7222,18 @@
|
||||
|
||||
.v2-alert-context-card .v2-alert-kpis strong {
|
||||
margin-top: 0;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.v2-alert-context-card .v2-alert-secondary-states {
|
||||
min-height: 40px;
|
||||
min-height: 34px;
|
||||
border-top: 1px solid #e4e9f0;
|
||||
border-left: 0;
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
.v2-alert-context-card .v2-alert-secondary-states > .semi-button {
|
||||
min-height: 34px;
|
||||
min-height: 28px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
@@ -7090,7 +7242,7 @@
|
||||
}
|
||||
|
||||
.v2-alert-context-card .v2-alert-secondary-states b {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-alert-page.is-events .v2-alert-workspace {
|
||||
@@ -7106,9 +7258,9 @@
|
||||
}
|
||||
|
||||
.v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header {
|
||||
min-height: 50px;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.v2-alert-table-card .v2-workspace-panel-copy > .semi-typography {
|
||||
@@ -7144,17 +7296,17 @@
|
||||
}
|
||||
|
||||
.v2-alert-mobile-list {
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.v2-alert-mobile-list > .v2-alert-mobile-card.semi-card {
|
||||
border-radius: 9px;
|
||||
contain-intrinsic-size: auto 110px;
|
||||
contain-intrinsic-size: auto 96px;
|
||||
}
|
||||
|
||||
.v2-alert-mobile-card-content {
|
||||
padding: 10px 11px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.v2-alert-mobile-card-content header > strong {
|
||||
@@ -7175,7 +7327,7 @@
|
||||
}
|
||||
|
||||
.v2-alert-mobile-card-content p {
|
||||
margin: 6px 0 7px;
|
||||
margin: 4px 0 5px;
|
||||
overflow: hidden;
|
||||
color: #405168;
|
||||
font-size: 12px;
|
||||
@@ -7185,15 +7337,15 @@
|
||||
}
|
||||
|
||||
.v2-alert-mobile-card-content dl {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: .92fr .7fr 1.38fr;
|
||||
gap: 0;
|
||||
padding-top: 7px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.v2-alert-mobile-card-content dl > div {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
min-height: 32px;
|
||||
min-height: 28px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
@@ -7214,7 +7366,7 @@
|
||||
|
||||
.v2-alert-mobile-card-content dd {
|
||||
min-width: 0;
|
||||
margin: 3px 0 0;
|
||||
margin: 2px 0 0;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
line-height: 13px;
|
||||
@@ -7228,7 +7380,7 @@
|
||||
}
|
||||
|
||||
.v2-alert-table-card > .semi-card-body > footer:has(.v2-table-pagination-controls) {
|
||||
min-height: 50px;
|
||||
min-height: 44px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 5px 6px;
|
||||
@@ -7241,7 +7393,7 @@
|
||||
.v2-alert-table-card > .semi-card-body > footer .v2-table-pagination-button.semi-button,
|
||||
.v2-alert-table-card > .semi-card-body > footer .v2-table-pagination-current,
|
||||
.v2-alert-table-card > .semi-card-body > footer .v2-table-pagination-size.semi-select {
|
||||
height: 34px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.v2-alert-rules {
|
||||
|
||||
Reference in New Issue
Block a user