Nicola Carminati
319 lines
12 KiB
Plaintext
319 lines
12 KiB
Plaintext
// out: false, sourceMap: false, main: ../style.less
|
|
@import "colors.less";
|
|
|
|
.maintenance-container{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 104px;
|
|
.maintenance-box{
|
|
width: 1808px;
|
|
height: 872px;
|
|
border-radius: 2px;
|
|
background-color: @color-background-white;
|
|
box-shadow: 0 1px 2px 0 @color-black-40;
|
|
.maintenance-header{
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: solid 2px @color-whitethree;
|
|
.maintenance-header-label{
|
|
margin-left: 23px;
|
|
font-size: 20px;
|
|
color: @color-darkish-blue;
|
|
}
|
|
}
|
|
.maintenance-body{
|
|
width: 1808px;
|
|
height: calc(~'100% - 66px');
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.maintenance-box-left{
|
|
width: 952px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
margin: 0 24px 0 24px;
|
|
.maintenance-box-left-head{
|
|
display: flex;
|
|
flex-flow: row;
|
|
margin: 16px 0 16px 0;
|
|
> div {
|
|
height: 70px;
|
|
display: flex;
|
|
flex-flow: column;
|
|
margin-right: 12px;
|
|
label{
|
|
font-size: 14px;
|
|
display: block;
|
|
line-height: 1.29;
|
|
color: @color-warm-grey;
|
|
margin-bottom: 4px;
|
|
}
|
|
select{
|
|
border-radius: 2px;
|
|
height: 48px;
|
|
box-shadow: 0 1px 2px 0 @color-black-40;
|
|
border: solid 1px @color-silver;
|
|
font-size: 18px;
|
|
line-height: 1.11;
|
|
color: @color-greyish-brown;
|
|
padding-left: 16px;
|
|
}
|
|
select.maintenance-select-interval-date{
|
|
width: 192px;
|
|
}
|
|
|
|
input.custom{
|
|
width: 288px;
|
|
height: 48px;
|
|
border-radius: 2px;
|
|
box-shadow: 0 1px 3px 0 @color-black-50;
|
|
border: solid 1px @color-silver;
|
|
font-size: 18px;
|
|
line-height: 1.11;
|
|
padding-left: 16px;
|
|
}
|
|
input[type="checkbox"]{
|
|
color: @color-silver;
|
|
}
|
|
}
|
|
.multiselect{
|
|
width: 250px;
|
|
}
|
|
.selectBox{
|
|
position: relative;
|
|
}
|
|
.selectBox select{
|
|
width: 100%;
|
|
padding: 8px;
|
|
option{
|
|
display: none;
|
|
}
|
|
}
|
|
.overSelect{
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
.checkboxes{
|
|
display: none;
|
|
}
|
|
.checkboxesView{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
display: block;
|
|
z-index: 100;
|
|
box-shadow: 0 3px 5px 0 @color-black-40;
|
|
label{
|
|
font-size: 18px;
|
|
margin:4px;
|
|
display: flex;
|
|
flex-flow: row;
|
|
}
|
|
label:first-child{
|
|
margin-top: 8px;
|
|
}
|
|
.label-state{
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
}
|
|
.maintenance-box-left-body{
|
|
width: 952px;
|
|
height: 680px;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
border: solid 1px @color-label-grey;
|
|
table{
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
thead{
|
|
border-bottom: solid 2px @color-label-grey;
|
|
}
|
|
thead tr{
|
|
width: 928px;
|
|
}
|
|
thead tr th{
|
|
height: 46px;
|
|
}
|
|
tr:nth-child(even) {background: #dddddd}
|
|
tr:nth-child(odd) {background: #FFF}
|
|
|
|
th:nth-child(1), td:nth-child(1){
|
|
width:190px;
|
|
max-width:190px;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
th:nth-child(2), td:nth-child(2){
|
|
width:300px;
|
|
max-width:300px;
|
|
}
|
|
th:nth-child(3), td:nth-child(3){
|
|
width:150px;
|
|
max-width:150px;
|
|
}
|
|
th:nth-child(4), td:nth-child(4){
|
|
width:150px;
|
|
max-width:150px;
|
|
}
|
|
th:nth-child(5){
|
|
width:30px;
|
|
max-width:30px;
|
|
}
|
|
td:nth-child(5){
|
|
width:30px;
|
|
max-width:30px;
|
|
text-align: left;
|
|
.machine-img{
|
|
filter: invert();
|
|
}
|
|
}
|
|
th, td{
|
|
overflow: hidden;
|
|
div{
|
|
overflow: hidden;
|
|
max-height: 64px;
|
|
}
|
|
}
|
|
tbody{
|
|
display: block;
|
|
height: 560px;
|
|
width: 944px;
|
|
tr{
|
|
cursor: pointer;
|
|
height: 64px;
|
|
padding: 10px;
|
|
td{
|
|
text-align: center;
|
|
div.maintenance-progress{
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
&.selected{
|
|
background-color: rgba(23, 145, 255, 0.75);
|
|
color: @color-white;
|
|
.machine-img{
|
|
filter: none;
|
|
}
|
|
td div.maintenance-progress.selected{
|
|
label{
|
|
color: @color-white;
|
|
}
|
|
.progress{
|
|
border: solid 2px @color-white;
|
|
}
|
|
.progress {
|
|
&.yellow{
|
|
border: solid 2px @color-squash;
|
|
}
|
|
}
|
|
.progress {
|
|
&.red{
|
|
border: solid 2px @color-scarlet;
|
|
}
|
|
}
|
|
.progress.fill{
|
|
background-color: @color-background-white;
|
|
}
|
|
.progress {
|
|
&.yellow.fill{
|
|
background-color: @color-squash;
|
|
}
|
|
}
|
|
.progress {
|
|
&.red.fill{
|
|
background-color: @color-scarlet;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
tfoot{
|
|
position:absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
}
|
|
tr{
|
|
width: 100%;
|
|
display: table;
|
|
}
|
|
tfoot tr td{
|
|
height: 64px;
|
|
width: 100%;
|
|
font-size: 18px;
|
|
color: @color-darkish-blue;
|
|
position: relative;
|
|
bottom:0;
|
|
border-top: solid 2px @color-silver;
|
|
td{
|
|
padding: 0;
|
|
}
|
|
div.group-label-button{
|
|
text-align: center;
|
|
margin: 8px 0 8px 0;
|
|
button{
|
|
background-image: linear-gradient(to bottom,@color-nice-blue,@color-darkish-blue);
|
|
color: @color-white;
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0;
|
|
.fa {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.maintenance-box-right{
|
|
width: 784px;
|
|
height: 760px;
|
|
display: flex;
|
|
background-color: white;
|
|
margin-right: 24px;
|
|
.message-disable-maintenance{
|
|
width: 101%;
|
|
height: 101%;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
background-color: #ffffffcc;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #4b4b4b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.maintenance-box-right{
|
|
position: relative;
|
|
&.enableMaintenance::after{
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left:0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|