common.scss

@import "./them.scss";

@mixin themeify  {
	@each $theme-name, $theme-map in $themes {
		//!global 把局部变量强升为全局变量
		$theme-map: $theme-map !global;
		//判断html的data-theme的属性值  #{}是sass的插值表达式
		//& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
		[data-theme="#{$theme-name}"] & {
				@content;
		}
	}
}
@function themed($key) {
	@return map-get($theme-map,$key)
};

@mixin background_color($color) {
	@include themeify {
			background-color: themed($color)!important;
	}
}
@mixin header_color($color) {
	@include themeify {
		background-color: themed($color)!important;
	}
}
@mixin nav_color($color) {
	@include themeify {
		background-color: themed($color)!important;
	}
}

@mixin menu_bg($color) {
	@include themeify {
		background-color: themed($color)!important;
	}
}
@mixin font-colr($color) {
	@include themeify {
		color: themed($color)!important;
	}
}

@mixin border-color($color) {
	@include themeify {
		border-color: themed($color)!important;
	}
}
@mixin box-shaw($type,$color) {
	@include themeify {
		box-shadow:$type themed($color)!important;
	}
}



.primaryButton{
	background: $dialog-title!important;
	border-color: $dialog-title!important;
}
.plainButton{
	color:$dialog-title;
    background: $white-back-color;
    border-color: $dialog-title;
}
html,body{
	height: 100%;
	padding: 0;
	margin: 0;
 
}

body{
  @include background_color("background_color");
}


.minHeight{
	height: calc(100vh - 140px);
	overflow: auto;
}
input{
	font-family: "微软雅黑";
}
a:link{
text-decoration:none;
 /* 指正常的未被访问过的链接*/
}
a:visited{
    text-decoration:none;
     /*指已经访问过的链接*/
}a:hover{
     text-decoration:none;
     /*指鼠标在链接*/
}
a:active{
    text-decoration:none;
    /* 指正在点的链接*/
}
.big .el-radio__label,.big{
		font-size: 16px!important;
	}
.inputBox{
	display: inline-block;
	width: 150px;
}
.maxHeight{
		max-height: 400px;
		overflow-y: auto;
	}
.innnerBox{
	padding: 10px;background: #FFFFFF;margin: 10px;
}
.selectBox{
	width:150px;
	display: inline-block;
}

.editIcon{
	cursor: pointer;
	color:#0069ff;
	font-size:16px;
}
.editIcon2{
	cursor: pointer;
	color:#87d14b;
	font-size:16px;
}
.playIcon{
	cursor: pointer;
	color:#34b3a2;
	font-size:16px;
}
.pauseIcon{
	cursor: pointer;
	color:#ffc62e;
	font-size:14px;
}
.delIcon{
	cursor: pointer;
	color:#f2365a;
	font-size:16px;
}
.no-btn{
	color:#cccccc;
}
.no-video-btn{
}
.custom-tree-node{
	width: 100%;
}
.tree-btn{
	float: right;
	margin-right: 10px;
}
.el-menu{
	@include menu_bg(menu_bg);
	border-right:0!important;
}
.blue{
	.tableSpanBorder{
		display: inline-block;
		height: 18px;
		border-left:2px solid #E5E5E5;
		margin: 0 17px;
		position: relative;
		top:3px;
	}
	.headers{
		@include header_color(header_background_color);
		line-height: 65px;
		height: 65px;
	}
	.logoImg{
		width: 136px;
		margin-top: 14px;
	}
	.headRight{
		float: right;
		span{
			color:$white-font-color
		}
		img{
			position: relative;
			top: 10px;
			width: 32px;
		}
		.exit{
			margin:{
				right: 90px;
				left: 12px;
			}
			cursor: pointer;
		}
	}
	.nav{
		height:40px;
		@include nav_color(nav_bg);
	}
	.contentBox{
		padding: 12px;
		overflow: hidden;
	}
}
.content{
	@include background_color(treeboxbg);

}
.innnerBox {
	@include background_color(treeboxbg);
}
.leftButton{
	float: left;
}
.playButton {
	float: left;
}
.detaiCon span{
	display: inline-block;
	width: 120px;
}
.arrow{
	position: absolute;
	font-size: 38px;
	top: 43%;
	cursor: pointer;
	color:$dialog-title;
}
.leftArrow{
	 @extend .arrow;
	left: -27px;
}
.rightArrow{
	 @extend .arrow;
	right: -27px;
}
.delIcon{
	cursor: pointer;
	color:#f2365a;
	font-size:16px;
}
@media screen and (max-width: 1366px) {
    .compatibleBtn {
        margin-left: 0px!important;
		margin-top: 6px!important;
    }
// 	.treeWidth{
// 		display: inline-block;
// 		width: 50px;
// 		white-space: nowrap;
// 		text-overflow: ellipsis;
// 		overflow: hidden;
// 		word-break: break-all;
// 		
// 	}
}

.el-main{
	@include background_color(mian_bg);
}
.home,.home-box{
	height: 100%;
}
.home-box .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background: red
}
.home-box .el-tabs__nav{
  width: 100%;
}
.home-box .el-tabs__item{
  width: 25%!important;
  padding: 0!important;
	text-align: center;
	// @include font-colr(tabs_color);
}
.el-tabs__item{
	@include font-colr(tabs_color);
}
.el-tabs__item.is-active{
	@include font-colr(tabs_active_color);
}
/* 设置区域设置按钮 */
.editbtn .el-radio-button__inner{
  border: 0;
}
.editbtn .el-radio-button:first-child,.editbtn .el-radio-button__inner{
  border: 0!important;
}
.editbtn .el-radio-button:last-child,.editbtn .el-radio-button__inner{
  border-radius: 0;
  border: 0;
}
.editbtn .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  border: 0;
  background: none;
  box-shadow:none;
  color: #3BB7FF;
}
.editbtn .el-radio-button__inner{
  background: none;
  padding: 0;
}
.el-radio-button--small .el-radio-button__inner{
  font-size: 18px;
  color: #3BB7FF;
}
.editbtn{
  height: 46px;
  width: 48px;
  line-height: 46px;
  text-align: center;
  font-size: 14px;
  background: #D7EDFF;
  cursor: pointer;
}
.editbtn {
  display: block;
  border-radius: 0;
  border: 0;
}
.video-box .el-radio-button{
	display: block;
}
.editbtn .el-radio-button:first-child .el-radio-button__inner{
  border:0;
}

/* 抓拍展示 */
.pic-box {
  width: 98%;
	margin-bottom:10px;
	@include background_color(picbox_bg);
	border-radius:2px;
	overflow :hidden;
  font-size :14px;
	@include font-colr(pic_color);
	padding: 6px;
 }
.picbackground{
	height: 133px;
	background-size:100% 100%;
}
.home-box .el-card{
	border:0;
}
.picbackground img{
  height: 100%;
  width:100%;
}
.pic-info{
	padding-left:10px;
}
.pic-info li{
		overflow:hidden;
		margin-bottom:3px;
}
.pic-info li span{
  display:inline-block;
}
.pic-info li span:nth-child(1){
    width:60px;
}
.pic-info li span:nth-child(2){
	@include font-colr(pic_info_color);
	padding-left: 10px;
	
}
.el-input-group__append{
  background-color: #0d3a79;
  border: 0px;
}
.wtbox .el-table{
  border-bottom: 0px
}
.setting-box{
	// @include background_color(table_th_bg);
}

.wtbox .el-table td, .el-table th{
  padding: 8px 0
}

::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background-color: #333;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px rgba(0,0,0,.3);
  background-color: #fff;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: rgba(133, 133, 133, 0.31);
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button{
  height: 10px;
  background-color: #B0AEDA;
}

.dev-box .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background:rgba(0,0,0,.3);
}
.clearpright{
  padding-right: 0!important;
}
.chart-header-box .el-input--small .el-input__inner{
  height:23px;
  line-height:23px;
  font-size: 12px;
}
.chart-header-box .el-input--small .el-input__icon{
  line-height: 23px;
}
.ol-zoom{
  bottom:.5em;
  left:auto!important;
  right: .5em;
  top:auto!important;
}
.rotate-north {
  right: .5em;
  bottom: 3.8em;
}
.nav-tag-box {
  line-height: 40px;
  height: 40px;
  overflow: hidden;
}
.nav-tag-box .el-tag{
  border-radius: 0;
  border: 0;
  border-right: 1px solid #ccc;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 25px;
  background: none;
  cursor: pointer;
  color: #888888;
}
.nav-tag-box .el-tag .el-icon-close{
  color: #888888;
  cursor: pointer;
}
.nav-tag-box .el-tag .el-icon-close:hover{
  background: none;
  cursor: pointer;
  color: #3BB7FF;
}
.alarm-event-box .el-table__body tr{
  background: #fff!important;
}
.alarm-event-box .el-table .el-table__header th{
  background:rgba(248,249,250,1);
  box-shadow:0px 1px 0px 0px rgba(0,0,0,0.09);
}
.img-box img{
  height: 20vh;
 width:20vw;
 height: 100%;
 width: 100%;
}
.ol-popup img{
 height :100%;
 width :100%;
}
.el-table__expanded-cell{
  padding: 0px 50px!important;
}
.ml10{
  margin-left: 10px;
}
.mt10{
  margin-top: 10px;
}
.codes-tab-box .el-tabs__item{
	width: 112px!important;
}
.is-opend {
  background: red;
}


.el-input-group__append{
	@include background_color(font_color2);
  color: #ffffff;
}
.search-vchan .el-input-group {
  box-shadow:-1.2px 2px 1px 0px rgba(78, 8, 8, 0.1);
}

.card-hover:hover,.pic-hover:hover  {
  webkit-transform: translateY(-4px) scale(2);
  -moz-transform: translateY(-4px) scale(1.01);
  -ms-transform: translateY(-4px) scale(1.01);
  -o-transform: translateY(-4px) scale(1.01);
  transform: translateY(-4px) scale(1);
  -webkit-box-shadow: 0 14px 24px rgba(62,57,107,.1);
  box-shadow: 0 14px 24px rgba(62,57,107,.1);
}
.pic-hover:hover {
  box-shadow: 2px 3px 4px rgba(2, 2, 2,0.2);
}

.card-hover,.pic-hover {
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  -moz-transition: all .25s ease;
  transition: all .25s ease;
}
.statusbox {
  display: inline-block;
  min-width: 60px;
  border-radius: 2px;
  background:rgba(204,204,204,1);
  color: #fff;
  font-size: 14px;
}
.taskstatus  .statusbox{
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
.runningbox {
  background: #36BEA6;
}
.finishedbox{
  background:rgba(255,198,46,1);
}
.pausebox{
  background:rgba(232,84,30,1);
}
.alarm-event-box .el-table .el-table__header th{
  background: none!important;
}
.el-submenu__title{
	font-size: 15px;
	@include font-colr(menu_color);
}
.el-table--small td, .el-table--small th {
	height: 35px;
	padding: 0;
}
.el-radio__label{
  color: #333;
}
.show-box .el-image__inner--center{
  transform:none;
  left: 0;
}
.detailDialog .el-icon-circle-close{
  color: #fff;
}
.tasktip{
  max-width: 120px;
}
.el-submenu.is-opened .el-submenu__title{
	@include background_color(menu_bg);
	@include font-colr(submenu_houver);
}
.el-submenu.is-opened .el-submenu__title i, .el-submenu__title .el-submenu__title i{
  color: #0069ff;
}
.el-submenu__title:hover{
	@include font-colr(submenu_houver);
	@include background_color(menu_bg);
}
.el-submenu:hover .el-submenu__title:hover{
	@include font-colr(submenu_houver);
}
.el-submenu__title i:last-child{
  font-weight: 600;
}
.el-submenu:hover .el-submenu__title i{
	@include font-colr(submenu_houver);
}

.el-submenu .el-menu-item{
	line-height: 43px;
	@include font-colr(menu_color);
}
.el-menu-item:hover {
  color:  #2d8cf0;
}
.el-loading-mask{
	@include background_color(loading_bg);
}