io.parrots
Version:
Parrots.io App
168 lines • 5.65 kB
text/less
parrots-page-monitor-system {
position: absolute;
width: 100%;
height: 100%;
}
.parrots-page-monitor-system {
display: block;
position: absolute;
width: 100%;
height: 100%;
>.wrapper-head-monitor {
.wrapper-under-line(72pt);
position: absolute;
box-shadow: 0px 2px 4px extract(@CLR_1, 6);
align-items: center;
font-weight: bold;
z-index: 2;
justify-content: flex-end;
cursor: unset;
>.wrapper-head-state {
display: block;
position: relative;
margin-right: 4.5%;
margin-left: 4.5%;
>.value-state {
display: flex;
font-size: 14pt;
font-weight: bold;
}
>.label-state {
display: flex;
font-size: 8pt;
}
}
>.line-head-state {
height: 100%;
width: 1px;
border-right: 1px solid extract(@CLR_1, 8);
}
}
>.wrapper-content-state {
display: flex;
padding-top: 72pt;
width: 100%;
height: 100%;
>.wrapper-content-chart {
height: 100%;
>.wrapper-row {
margin-top: 3%;
>.wrapper-col {
margin-bottom: 3%;
>.wrapper-chart {
width: 100%;
cursor: pointer;
box-shadow: 0px 4px 8px extract(@CLR_1, 7);
margin-bottom: 4%;
}
.selected-chart {
border: 1px solid #14bce2;
}
>.label-name-chart {
left: 15px;
position: absolute;
font-size: 10pt;
font-weight: bold;
}
>.value-state-chart {
right: 25px;
position: absolute;
font-size: 8pt;
}
}
}
}
>.wrapper-detail-chart {
background-color: extract(@CLR_1, 7);
height: 100%;
>.label-title-detail-chart {
display: flex;
margin-top: 8%;
margin-left: 5%;
font-size: 25pt;
font-weight: bold;
}
div {
display: flex;
>.label-sub-title-detail-chart {
margin-left: 5%;
font-size: 12pt;
font-weight: bold;
}
>.label-description-detail-chart {
margin-left: 2%;
font-size: 8pt;
margin-top: 0.75%;
}
}
>.wrapper-label-head-deatil-chart {
display: flex;
margin-top: 8%;
margin-bottom: 2%;
font-weight: bold;
font-size: 12pt;
>.label-name-node {
margin-left: 5%;
}
>.label-server-node {
right: 8%;
position: absolute
}
}
>.wrapper-list-node {
display: block;
>.wrapper-item-node {
display: flex;
margin-left: 2%;
border-bottom: 1px solid extract(@CLR_1, 8);
height: 75px;
width: 96%;
background-color: extract(@CLR_1, 9);
>.wrapper-icon-name-item-node {
display: flex;
align-items: center;
border-right: 1px solid extract(@CLR_1, 8);
width: 32%;
height: 100%;
>.icon-node {
margin-left: 9.5%;
height: 30px;
}
>.wrapper-name-item-node {
display: block;
margin-left: 7.5%;
>.label-name-item-node {
display: flex;
font-size: 12pt;
font-weight: bold;
}
>.label-id-item-node {
display: flex;
font-size: 8pt;
}
}
}
>.wrapper-chart-item-node {
display: flex;
height: 100%;
width: 57% ;
>.wrapper-chart-node {
width: 100%;
}
}
>.label-server-item-node {
display: flex;
z-index: 1;
border-left: 1px solid extract(@CLR_1, 8);
font-weight: bold;
right: 0;
width: 11%;
height: 100%;
justify-content: center;
align-items: center;
}
}
}
}
}
}