feat(web): refine Semi UI alert center
This commit is contained in:
@@ -8402,7 +8402,7 @@
|
||||
* command rail and reserves the remaining height for the operational list.
|
||||
*/
|
||||
.v2-alert-page {
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
padding: 14px 18px 18px;
|
||||
background: #f6f8fb;
|
||||
}
|
||||
@@ -8503,6 +8503,7 @@
|
||||
|
||||
.v2-alert-filter-card.semi-card {
|
||||
overflow: visible;
|
||||
border-color: #d8e1ec;
|
||||
}
|
||||
|
||||
.v2-alert-filter-card > .semi-card-body > .v2-workspace-filter-heading {
|
||||
@@ -8510,24 +8511,36 @@
|
||||
}
|
||||
|
||||
.v2-alert-filter.v2-alert-filter-primary {
|
||||
min-height: 70px;
|
||||
min-height: 54px;
|
||||
grid-template-columns: minmax(250px, 1.45fr) minmax(122px, .62fr) minmax(136px, .68fr) auto auto auto;
|
||||
gap: 10px;
|
||||
padding: 11px 13px;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.v2-alert-filter.v2-alert-filter-primary label {
|
||||
position: relative;
|
||||
gap: 5px;
|
||||
color: #66778e;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.v2-alert-filter.v2-alert-filter-primary label > span {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-alert-filter.v2-alert-filter-primary label > div,
|
||||
.v2-alert-filter.v2-alert-filter-primary .semi-select,
|
||||
.v2-alert-filter.v2-alert-filter-primary .semi-input-wrapper,
|
||||
.v2-alert-filter.v2-alert-filter-primary > .semi-button {
|
||||
min-height: 38px;
|
||||
min-height: 36px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -8588,7 +8601,7 @@
|
||||
}
|
||||
|
||||
.v2-alert-workspace.is-inspector-open {
|
||||
grid-template-columns: minmax(680px, 1fr) 390px;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 390px);
|
||||
}
|
||||
|
||||
.v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header {
|
||||
@@ -8646,12 +8659,51 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row {
|
||||
position: relative;
|
||||
transition: background-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row::before {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 7px;
|
||||
bottom: 7px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: #c2cad5;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-critical::before {
|
||||
background: #e5484d;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-major::before {
|
||||
background: #ed8d32;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-minor::before {
|
||||
background: #d9a31d;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row:hover {
|
||||
background: #f7faff;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-selected {
|
||||
background: #eef5ff;
|
||||
box-shadow: inset 0 0 0 1px rgba(18, 104, 243, .16);
|
||||
}
|
||||
|
||||
.v2-alert-event-table.semi-table-wrapper {
|
||||
min-width: 1102px;
|
||||
min-width: 970px;
|
||||
}
|
||||
|
||||
.v2-alert-event-table.is-compact.semi-table-wrapper {
|
||||
min-width: 758px;
|
||||
min-width: 660px;
|
||||
}
|
||||
|
||||
.v2-alert-event-evidence {
|
||||
@@ -9529,10 +9581,15 @@
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.v2-alert-table-card .v2-workspace-panel-copy > .semi-typography {
|
||||
.v2-alert-table-card .v2-workspace-panel-copy > .semi-typography:not(h5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-alert-table-card .v2-workspace-panel-copy > h5.semi-typography {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll.is-mobile-scroll {
|
||||
min-height: 0;
|
||||
flex: 1 1 0;
|
||||
@@ -25382,8 +25439,8 @@
|
||||
}
|
||||
|
||||
.v2-alert-filter.v2-alert-filter-primary {
|
||||
min-height: 66px;
|
||||
padding: 9px 13px;
|
||||
min-height: 52px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.v2-alert-filter.v2-alert-filter-primary label > div,
|
||||
@@ -25417,13 +25474,18 @@
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||
height: 56px;
|
||||
padding: 8px 10px;
|
||||
height: 52px;
|
||||
padding: 7px 10px;
|
||||
color: #405269;
|
||||
font-size: 12.5px;
|
||||
transition: background-color .16s ease;
|
||||
}
|
||||
|
||||
.v2-alert-event-table .semi-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
|
||||
background: #f6f9fe;
|
||||
}
|
||||
@@ -25445,7 +25507,7 @@
|
||||
}
|
||||
|
||||
.v2-alert-workspace.is-inspector-open {
|
||||
grid-template-columns: minmax(650px, 1fr) 420px;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 390px);
|
||||
}
|
||||
|
||||
.v2-alert-workspace.is-inspector-open .v2-alert-event-table.is-compact.semi-table-wrapper {
|
||||
|
||||
Reference in New Issue
Block a user