io.parrots
Version:
Parrots.io App
265 lines • 8.48 kB
text/less
parrots-page-system-auto-scale {
position: relative;
width: 100%;
height: 100%;
}
.parrots-page-system-auto-scale {
display: flex;
position: absolute;
width: 100%;
height: 100%;
>.wrapper-auto-scale {
display: inline-block;
position: absolute;
background-color: extract(@CLR_1, 9);
height: 100%;
width: 65%;
overflow: auto;
border-right: 1px solid extract(@CLR_1, 6);
>.wrapper-head-auto-scale {
display: inline-block;
width: 100%;
padding-left: 9%;
>.label-title-auto-scale {
display: flex;
padding-top: 9%;
font-size: 35px;
}
>.label-description-auto-scale {
display: flex;
color: extract(@CLR_0, 7);
}
}
>.wrapper-switch-label-sub-title {
display: flex;
width: 100%;
margin-top: 5%;
>.wrapper-switch {
margin-left: 8%;
margin-top: 1.5%;
.phx-switch input.toggle + label:before {
background: @CLR_BRAND;
}
.phx-switch input.toggle:checked + label:after {
box-shadow: inset 0 0 0 1px @CLR_BRAND, 0 2px 4px rgba(0, 0, 0, 0.2);
}
}
>.wrapper-label-sub-title {
display: block;
margin-left: 2%;
>.label-sub-title-auto-scale {
display: flex;
font-size: 13pt;
font-weight: bold;
}
>.label-sub-description-auto-scale {
display: flex;
font-size: 8pt;
}
}
}
>.wrapper-controller-line-max-min {
width: 10%;
height: 309px;
position: relative;
top: -404px;
>.wrapper-controller-line-max {
display: block;
cursor: pointer;
position: relative;
font-size: 9pt;
background-color: @CLR_BRAND;
height: 1.5px;
width: 720%;
margin-left: 100%;
>.label-max-controller {
display: flex;
position: relative;
margin-left: -35px;
top: -45px;
}
>.point-line-max {
display: flex;
position: relative;
background-color: @CLR_BRAND;
height: 10px;
width: 10px;
border-radius: 5px;
margin-left: 0;
top: -21px;
}
>.label-value-max-controller {
display: flex;
position: relative;
margin-left: -38px;
top: -43px;
}
}
>.wrapper-controller-line-min {
display: block;
cursor: pointer;
position: relative;
font-size: 9pt;
background-color: greenyellow;
height: 1.5px;
width: 720%;
margin-left: 100%;
>.label-min-controller {
display: flex;
position: relative;
margin-left: -35px;
top: 5px;
}
>.point-line-min {
display: flex;
position: relative;
background-color: greenyellow;
height: 10px;
width: 10px;
border-radius: 5px;
margin-left: 0;
top: -21px;
}
>.label-value-min-controller {
display: flex;
position: relative;
margin-left: -38px;
top: 5px;
}
}
}
>.label-per-second {
display: flex;
position: relative;
top: -413px;
justify-content: flex-end;
margin-right: 12%;
font-size: 9pt;
}
>.wrapper-title-node {
display: flex;
position: relative;
height: 10%;
width: 100%;
top: -345px;
font-weight: bold;
align-items: center;
background-color: extract(@CLR_1, 8);
>.label-node-name {
padding-left: 5%;
}
>.label-node-server {
right: 5%;
position: absolute;
}
}
>.container-node {
display: flex;
position: relative;
top: -345px;
width: 100%;
height: 15%;
background-color: extract(@CLR_1, 9);
align-items: center;
border-bottom: 1px solid extract(@CLR_1, 6);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>.icon-node {
margin-left: 5%;
}
>.wrapper-node-name-id {
display: inline-block;
padding-left: 2%;
>.label-name-node {
display: flex;
font-size: 12pt;
}
>.label-id-node {
display: flex;
font-size: 8.12pt;
color: extract(@CLR_0, 7);
}
}
>.wrapper-node-ping-datetime {
display: inline-block;
justify-content: flex-end;
right: 18%;
position: absolute;
>.label-ping-node {
display: flex;
color: extract(@CLR_0, 7);
font-size: 12pt;
justify-content: flex-end;
>.value-ping-node {
color: extract(@CLR_0, 1);
padding-left: 1%;
}
}
>.label-datetime {
display: flex;
font-size: 8.12pt;
color: extract(@CLR_1, 1);
}
}
>.icon-status-node {
display: flex;
right: 6%;
position: absolute;
height: 30pt;
width: 40px;
}
}
}
>.wrapper-setting-auto-scale {
display: inline-block;
position: absolute;
left: 65.1%;
width: 35%;
height: 100%;
background-color: extract(@CLR_1, 8);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>.label-setting-auto-scale {
display: flex;
width: 100%;
height: 10%;
padding-top: 12%;
padding-left: 82%;
color: extract(@CLR_1, 1);
border-bottom: 1px solid extract(@CLR_1, 6);
}
>.wrapper-controller-auto-scale {
display: flex;
cursor: pointer;
width: 100%;
height: 10%;
background-color: extract(@CLR_1, 9);
align-items: center;
border-bottom: 1px solid extract(@CLR_1, 6);
>.wrapper-arrow-right {
right: 7%;
position: absolute;
}
}
>.wrapper-controller-auto-scale-show {
display: flex;
width: 100%;
height: 10%;
background-color: extract(@CLR_1, 8);
align-items: center;
border-bottom: 1px solid extract(@CLR_1, 6);
}
.label-controller-auto-scale {
padding-left: 7%;
color: extract(@CLR_1, 1);
}
.value-controller-auto-scale {
right: 20%;
position: absolute;
}
}
}