io.parrots
Version:
Parrots.io App
269 lines • 8.18 kB
text/less
parrots-page-system-node-info{
position: relative;
width: 100%;
height: 100%;
}
.parrots-page-system-node-info {
display: flex;
position: absolute;
width: 100%;
height: 100%;
>.wrapper-node-info {
display: inline-block;
position: absolute;
height: 100%;
width: 65%;
overflow: auto;
>.wrapper-head-info {
display: inline-block;
width: 100%;
>.label-title {
display: flex;
padding-top: 9%;
padding-left: 7%;
font-size: 35px;
}
>.label-description {
display: flex;
padding-left: 7%;
padding-bottom: 6%;
color: extract(@CLR_0, 7);
}
}
>.wrapper-head-show-del-node {
display: flex;
height: 10%;
width: 100%;
align-items: center;
background-color: extract(@CLR_1, 8);
>.label-title-name-node {
padding-left: 5%;
}
>.icon-error {
display: flex;
align-items: center;
position: absolute;
right: 12.5%;
justify-content: center;
width: 50px;
height: 50px;
&:before {
cursor: pointer;
content: "G";
font-family: 'PhloxGlyphicons';
font-size: 13pt;
}
}
>.icon-trash {
display: flex;
align-items: center;
position: absolute;
right: 5.5%;
justify-content: center;
width: 50px;
height: 50px;
&:before {
cursor: pointer;
content: "g";
font-family: 'PhloxGlyphicons';
font-size: 13pt;
}
}
.selected {
color: @CLR_BRAND;
}
}
>.container-node-del {
display: flex;
width: 100%;
height: 15%;
background-color: extract(@CLR_1, 9);
font-weight: unset;
align-items: center;
margin-bottom: unset;
cursor: pointer;
border-bottom: 1px solid extract(@CLR_1, 7);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container-node-del input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
left: 17px;
height: 18px;
width: 18px;
background-color: #eee;
}
.container-node-del:hover input ~ .checkmark {
background-color: #ccc;
}
.container-node-del input:checked ~ .checkmark {
background-color: @CLR_BRAND;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container-node-del input:checked ~ .checkmark:after {
display: block;
}
.container-node-del .checkmark:after {
left: 5.5px;
top: 1px;
width: 6px;
height: 13px;
border: solid extract(@CLR_1, 9);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.icon-node {
margin-left: 5%;
}
.icon-node-del {
margin-left: 9%;
}
.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;
}
>.btn-del-node-active {
display: flex;
height: 10%;
width: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
color: extract(@CLR_1, 9);
background-color: @CLR_BRAND;
border-bottom: 1px solid extract(@CLR_1, 6);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
>.btn-del-node {
display: flex;
height: 10%;
width: 100%;
justify-content: center;
align-items: center;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 7);
border-bottom: 1px solid extract(@CLR_1, 6);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
>.container-node {
display: flex;
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;
}
>.btn-create-node {
display: flex;
height: 10%;
width: 100%;
justify-content: center;
align-items: center;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 7);
border-bottom: 1px solid extract(@CLR_1, 6);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
>.wrapper-setting-node {
display: inline-block;
position: absolute;
left: 65.1%;
width: 35%;
height: 100%;
background-color: extract(@CLR_1, 7);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>.label-setting {
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);
}
>.block-setting {
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);
>.label-title-setting {
padding-left: 7%;
color: extract(@CLR_1, 1);
}
>.label-data-setting {
right: 17%;
position: absolute;
}
}
}
}