ifm/WebRoot/views/htclient/css/extra.css

 .outter-controller{
	 position:fixed;
	 right:-50px;
	 top:50%;
	 height:140px;
	 width:50px;
	 border-radius:10px 0 0 10px;
	 margin-top:-70px;
	 padding:13px 0;
	 background: -webkit-linear-gradient(#01417f,#021e46);
    background: -o-linear-gradient(#01417f,#021e46);
    background: -moz-linear-gradient(#01417f,#021e46);
    background: linear-gradient(#01417f,#021e46);
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	cursor:pointer;
	transition: right 0.5s;
	-moz-transition: right 0.5s;; /* Firefox 4 */
	-webkit-transition: right 0.5s;; /* Safari 和 Chrome */
-o-transition: right 0.5s;; /* Opera */
 }
 .tit{
	 position:absolute;
	 left:-20px;
	 width:20px;
	 height:100%;
	 top:0;
 }
 .extra-icon img{
	width:35px;
 }
 .extra-container{
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    overflow: hidden;
    z-index: 999;
    display: none;
 }
 
 #lightcontroller,#foodLinecontroller{
	position: absolute;
    width: 1200px;
    height: 850px;
    left: 50%;
    top: 70px;
    background-color: #021429;
    border-radius: 10px;
    margin-left: -600px;
    box-shadow: 0px -10px 5px 0px rgba(255,255,255,0.1), -10px 0px 5px 0px rgba(255,255,255,0.1), 10px 0px 10px 0px rgba(255,255,255,0.1), 0px 10px 10px 0px rgba(255,255,255,0.1);
}
.open-box-head {
    height: 50px;
    line-height: 50px;
    width: 100%;
    text-align: center;
    position: relative;
    color: #ccf5f9;
    font-size: 22px;
    letter-spacing: 0.1em;
}
.open-box-head:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 5%;
    height: 2px;
    width: 90%;
    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
}
.open-box-body{
	display:flex;
	width:100%;
	height:calc(100% - 50px)
}

.lightbuild-choose,.foodLinebuild-choose {
    width: 240px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
    color: #fff;
    padding-left: 30px;
    height: 100%;
    border-right: 2px solid #335bcc;
}
.areabuild-name.active {
    color: #335bcc;
}
.areabuild-name {
    font-size: 22px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    width: 100%;
}
.light-container,.foodLine-container{
	width:calc(100% - 240px);
	height:100%;
}
.container-head-info{
	min-width:300px;
	margin-left:20px;
	margin-top:10px;
	border-radius:15px 0 0 15px;
	padding-left:20px;
	background:linear-gradient(to right, rgba(255,2,2,0.8), rgba(255,161,161,0.3));
	color:#fff;
	height:30px;
	line-height:30px;
}
.light-list,.foodLine-list{
	width:100%;
	
	display:none;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:0 20px 20px;
	
}
.light-list.active,.foodLine-list.active{
	display:flex;
}
.light-box,.foodLine-box{
	width:45%;
	height:420px;
	margin-top:10px;
}
.light-box{
	height:220px;
}
/* .light-box{
	height:310px;
} */
.light-head,.foodLine-head{
	width:100%;
	height:30px;
	
}
.light-name,.foodLine-name{
	height: 100%;
    width: 87px;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
	color:#fff;
    position: relative;
    background: -webkit-linear-gradient(#01417f,#021e46);
    background: -o-linear-gradient(#01417f,#021e46);
    background: -moz-linear-gradient(#01417f,#021e46);
    background: linear-gradient(#01417f,#021e46);
}
.light-name:before,.foodLine-name:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 5px solid #010a19;
    border-right: 5px solid transparent;
}
.light-name:after,.foodLine-name:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 5px solid #010a19;
    border-left: 5px solid transparent;
}
.light-content,.foodLine-content{
	width:100%;
	height:calc(100% - 30px);
	 background: #021e46;
	 border-radius:0 10px 10px 10px;
	 padding:10px;
}
.relation-romms{
	width:100%;
	font-size:14px;
	color:#fff;
	margin-bottom:10px;
}
.foodLineStatus{
	color:#fff;
	font-size:14px;
	margin-bottom:10px;
}
.auto-mode{
	color:#2196f3;
	margin-right:10px;
}
.handle-mode{
	color:#8bc34a;
	margin-right:10px;
}
.foodLine-stop{
	color:#f44336;
	margin-right:10px;
}
.foodLine-run{
	color:#4caf50;
	margin-right:10px;
}
.foodLine-error{
	color:#ff9800;
	margin-right:10px;
}
.foodLine-full{
	color:#00bcd4
}
.foodLine-null{
	color:#9e9e9e
}
.light-awayset,.foodLine-awayset{
	font-size:14px;
	color:#fff;
	margin-bottom:10px;
}
.foodLineright-item{
	margin-left:30px;
}
.foodLineright-item>input {
    width: 60px;
    text-align: center;
    height: 20px;
    border: 1px solid #335bcc;
    border-radius: 4px;
    outline: none;
    background-color: transparent;
    color: #fff;
	margin-right:5px;
}
.timer-table{
	width:100%;
	position:relative;
}
.clear-btn{
	padding:3px 10px;
	background-color:#607d8b;
	color:#fff;
	font-size:14px;
	right:20px;
	top:56px;
	position:absolute;
	border-radius:5px;
	cursor:pointer;
}
.clear-btn:hover{
	background-color:#3e5967
}
.timer-name{
	color:#fff;
	font-size:14px;
}
.timer-dataTable td>input{
    width: 120px;
    text-align: center;
    height: 24px;
    border: 1px solid #335bcc;
    border-radius: 4px;
    outline: none;
    background-color: transparent;
    color: #fff;
	margin:0 10px;
}
.timer-dataTable tr td {
    border: 1px solid #0b52e0;
    height: 30px;
    line-height: 30px;
    text-align: center;
	color:#fff
}
.timer-dataTable tr td:first-child{
	width:30px;
}
.lightsave-btns,.foodLinesave-btns{
	width:100%;
	display:flex;
	justify-content:center;
	margin-top:15px;
}
.btn-savesert{
	padding:3px 10px;
	background-color:#2196f3;
	color:#fff;
	font-size:14px;
	border-radius:5px;
	cursor:pointer;
}
.btn-savesert:hover{
	background-color:#1a75bd
}