refine Semi UI monitor workspace
This commit is contained in:
lingniu
@@ -8855,3 +8855,340 @@
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Semi UI workspace migration: global monitor command bar and fleet overview. */
|
||||
.v2-filterbar.semi-card {
|
||||
border-color: #dce5ef;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 7px 24px rgba(31, 53, 80, .055);
|
||||
}
|
||||
|
||||
.v2-filterbar > .semi-card-body {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
flex: 1 1 680px;
|
||||
grid-template-columns: minmax(260px, 1fr) minmax(122px, 142px) minmax(122px, 142px) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .v2-sr-only {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .semi-select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
border: 1px solid #d7e0eb;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .semi-select:hover {
|
||||
border-color: #b8c7da;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .semi-select-focus {
|
||||
border-color: #8ab4f7;
|
||||
box-shadow: 0 0 0 3px rgba(18, 104, 243, .07);
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .semi-select .semi-select-selection-text {
|
||||
height: 34px;
|
||||
color: #4d5c70;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .v2-filter-reset.semi-button {
|
||||
height: 36px;
|
||||
border-color: #d7e0eb;
|
||||
border-radius: 8px;
|
||||
color: #59677c;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .v2-filter-reset.semi-button:disabled {
|
||||
border-color: #e7ecf2;
|
||||
background: #f8fafc;
|
||||
color: #a7b2c1;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-actions {
|
||||
display: flex;
|
||||
min-width: max-content;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.v2-filter-live-status {
|
||||
position: relative;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 17px;
|
||||
background: #f3f6fa;
|
||||
padding: 0 10px;
|
||||
color: #718096;
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.v2-filter-live-status.has-filters {
|
||||
background: #edf5ff;
|
||||
color: #2867bb;
|
||||
}
|
||||
|
||||
.v2-filter-live-status b {
|
||||
display: inline-grid;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
background: #1268f3;
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.v2-monitor-mode.v2-segmented-tabs {
|
||||
display: grid;
|
||||
width: 142px;
|
||||
height: 36px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
overflow: hidden;
|
||||
border: 1px solid #d7e0eb;
|
||||
border-radius: 9px;
|
||||
background: #f3f6fa;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.v2-monitor-mode.v2-segmented-tabs > .semi-button {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
padding: 0 8px;
|
||||
color: #65758a;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-monitor-mode.v2-segmented-tabs > .semi-button.is-active {
|
||||
background: #fff;
|
||||
color: #1268f3;
|
||||
box-shadow: 0 2px 8px rgba(24, 53, 91, .11);
|
||||
}
|
||||
|
||||
.v2-monitor-mode .v2-segmented-tab-label {
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-actions > .v2-monitor-mobile-entry.semi-button {
|
||||
height: 36px;
|
||||
border-color: #d7e0eb;
|
||||
border-radius: 8px;
|
||||
color: #52657c;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.v2-kpis.semi-card {
|
||||
border-color: #dce5ef;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 7px 24px rgba(31, 53, 80, .05);
|
||||
}
|
||||
|
||||
.v2-kpi {
|
||||
isolation: isolate;
|
||||
min-height: 74px;
|
||||
padding: 12px 15px;
|
||||
transition: background-color .18s ease;
|
||||
}
|
||||
|
||||
.v2-kpi.is-primary {
|
||||
background: linear-gradient(135deg, #f8fbff 0%, #fff 76%);
|
||||
}
|
||||
|
||||
.v2-kpi.is-online {
|
||||
background: linear-gradient(135deg, #f4fcf8 0%, #fff 78%);
|
||||
}
|
||||
|
||||
.v2-kpi.is-primary::after {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
right: 14px;
|
||||
left: 14px;
|
||||
height: 2px;
|
||||
border-radius: 0 0 2px 2px;
|
||||
background: linear-gradient(90deg, #1268f3, #72a8ff);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.v2-kpi.is-online::after {
|
||||
background: linear-gradient(90deg, #17a673, #75d3aa);
|
||||
}
|
||||
|
||||
.v2-kpi small {
|
||||
color: #708096;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
letter-spacing: .015em;
|
||||
}
|
||||
|
||||
.v2-kpi strong {
|
||||
margin-top: 8px;
|
||||
color: #23364d;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.v2-kpi.is-primary strong {
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
.v2-kpi.is-support {
|
||||
background: #f9fafc;
|
||||
}
|
||||
|
||||
.v2-kpi.is-support small {
|
||||
color: #8a96a6;
|
||||
font-size: 9px;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.v2-kpi.is-support strong {
|
||||
color: #748297;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.v2-filterbar > .semi-card-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v2-filter-live-status-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.v2-filterbar > .semi-card-body {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v2-filter-live-status-label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.v2-filterbar > .semi-card-body {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .v2-search-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .semi-select,
|
||||
.v2-monitor-filter-fields > .v2-filter-reset.semi-button {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-fields > .semi-select .semi-select-selection-text {
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-actions {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.v2-filter-live-status {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-filter-live-status-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-filter-live-status b {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.v2-monitor-mode.v2-segmented-tabs {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.v2-monitor-mode.v2-segmented-tabs > .semi-button {
|
||||
height: 36px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-actions > .v2-monitor-mobile-entry.semi-button {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-monitor-filter-actions > .v2-monitor-mobile-entry .v2-monitor-mobile-entry-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-kpi {
|
||||
min-height: 66px;
|
||||
padding: 9px 11px;
|
||||
}
|
||||
|
||||
.v2-kpi.is-primary::after {
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.v2-kpi strong {
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user