/* 主题定义文件 */

/* -------- 全局样式 ------- */
body{overflow: hidden;}

/* 灰色模式 */
.gray-mode {
    filter: grayscale(100%);
}

/* 色弱模式 */
.weak-mode {
    filter: invert(80%);
}

/* iframe 视图 */
.iframe-view{
    width: 100%;
    height: calc(100vh - 84px);
    border: 0px;
}


/* -------- 主题 ------- */

/* 样式调整为继承父级 */
.nav-left .el-sub-menu__title i,
.nav-left .el-menu-item i,
.nav-right-1 .el-dropdown,
.tab-title:hover .el-icon-caret-right,
.tab-title.tab-native .el-icon-caret-right {
	color: inherit;
}

.nav-left .el-menu,
.nav-left .el-sub-menu,
.nav-left .el-sub-menu__title,
.nav-left .el-sub-menu .el-sub-menu .el-sub-menu__title,
.nav-left .el-menu-item {
	color: inherit;
	background-color: inherit;
}

.theme-def .menu-name,.theme-def .tab-title-2>span{transition: none !important;}


/* 声明变量 */
.layout-index{
	--menu-bg-color: #222;		/* 菜单 - 背景色 */
	--menu-color: #FFF;			/* 菜单 - 文字色 */
	--menu-bg-color-2: #000;	/* 二级菜单 - 背景色 */
	--menu-hover-bg-color: #4E5465;			/* 菜单悬浮 - 背景色 */
	--menu-active-bg-color: #2D8CF0;		/* 菜单选中 - 背景色 */
	--menu-active-color: #FFF;				/* 菜单选中 - 文字色 */
	--tool-bg-color: #FFF;			/* 工具栏 - 背景色 */
	--tool-color: #333;				/* 工具栏 - 文字色 */
	--tool-hover-bg-color: #EEE;			/* 工具栏悬浮 - 背景色 */

	--t-light-color: #e7f0fa;				/* 对应的浅色（在遮罩卡片风格里用到） */

	--menu-active-bg-color-copy2: var(--menu-active-bg-color);  /* copy 一下 菜单选中-背景色 的变量值，以解决分栏布局中变量相互复制的问题  */

	/* --tab-hover-bg-color: var(--menu-active-bg-color); */		/* Tab栏悬浮和选中 - 文字色 */
	/* --tab-hover-color: var(--menu-active-color); */			/* Tab栏悬浮和选中 - 文字色 */
	
	--nav-left-top-border-color: 1px #222 solid;	/* 左上 - 右边框颜色 */
	--nav-left-bottom-border-color: 1px #222 solid;	/* 左下 - 右边框颜色 */
}

/* ========================== 主题 - 0 默认样式 蓝色 ==========================  */
.theme-def {}

/* 左上 - 右边框颜色 */
.theme-def .nav-left-top{
	border-right: var(--nav-left-top-border-color);
}
/* 左下 - 右边框颜色 */
.theme-def .nav-left-bottom{
	border-right: var(--nav-left-bottom-border-color);
}

/* 左边栏背景色，前景色 */
.theme-def .nav-left {
	background-color: var(--menu-bg-color);
	color: var(--menu-color);
}

/* 二级菜单背景色 */
.theme-def .el-sub-menu .el-menu-item,
.theme-def .nav-left .el-sub-menu .el-sub-menu .el-sub-menu__title{
	background: var(--menu-bg-color-2);
}

/* 所有菜单悬浮样式*/
.theme-def .nav-left .el-sub-menu__title:hover,
.theme-def .nav-left .el-sub-menu .el-sub-menu .el-sub-menu__title:hover,
.theme-def .nav-left .el-menu-item:hover{
	background-color: var(--menu-hover-bg-color);
}
/* 所有菜单选中时 */
.theme-def .nav-left .el-menu-item.is-active {
	/* background-color: var(--menu-active-bg-color); */
	background: var(--menu-active-bg-color);
	color: var(--menu-active-color);
}

/* 工具栏背景色颜色、前景色 */
.theme-def .nav-right-1 {
	background-color: var(--tool-bg-color);
	color: var(--tool-color);
}

/* 工具栏悬浮颜色 */
.theme-def .tool-fox:hover {
	background-color: var(--tool-hover-bg-color);
}

/* tab卡片栏 - 悬浮颜色 */
.theme-def .tab-title:hover{
	color: var(--menu-active-bg-color);
	border: 1px var(--menu-active-bg-color) solid;
}
/* tab卡片栏 - 选中颜色 */
.theme-def .tab-native.tab-title {
	background-color: var(--menu-active-bg-color);
	color: var(--menu-active-color);
	border: 1px var(--menu-active-bg-color) solid;
}

/* 以下的主题 logo栏变小 */
/*.theme-3 .nav-left-top,*/
/*.theme-4 .nav-left-top,*/
/*.theme-10 .nav-left-top{height: 50px; line-height: 50px; text-indent: 0.3em;}*/

/*.theme-3 .nav-left-top .admin-logo,*/
/*.theme-4 .nav-left-top .admin-logo,*/
/*.theme-10 .nav-left-top .admin-logo{width: 28px; height: 28px; position: relative; top: -2px;}*/

/*.theme-3 .nav-left-bottom,*/
/*.theme-4 .nav-left-bottom,*/
/*.theme-10 .nav-left-bottom{height: calc(100% - 85px + 36px);}*/




/* ------------------------ 主题 theme-blue 蓝色 (什么也不覆盖 即：全部取默认样式) ------------------------  */
.theme-blue {}

/* ------------------------ 主题 theme-green 绿色 ------------------------  */
.theme-green {
	--menu-active-bg-color: #009688;	/* 菜单选中 - 背景色 */
	--t-light-color: #ddf6f8;		/* 对应浅色 */
}

/* ------------------------ 主题 theme-red 红色 ------------------------  */
.theme-red {
	--menu-active-bg-color: #dd4949;	/* 菜单选中 - 背景色 */
	--t-light-color: #feedeb;		/* 对应浅色 */
}

/* ------------------------ 主题 theme-purple 紫色 ------------------------  */
.theme-purple {
	--menu-active-bg-color: #A906B3;	/* 菜单选中 - 背景色 */
	--t-light-color: #f2d9f3;		/* 对应浅色 */
}

/* ------------------------ 主题 theme-tit 钛合金 ------------------------  */
.theme-tit {
	--menu-active-bg-color: #805322;	/* 菜单选中 - 背景色 */
	--t-light-color: #ebe5dd;		/* 对应浅色 */
}

/* ------------------------ 主题 theme-ash 简约灰 ------------------------  */
.theme-ash {
	--menu-active-bg-color: #4e5465;	/* 菜单选中 - 背景色 */
	--t-light-color: #e5e5e5;		/* 对应浅色 */
}

/* ------------------------ 主题 theme-dark-green 简约草绿 ------------------------  */
.theme-dark-green {
	--menu-bg-color: #FFF;		/* 菜单 - 背景色 */
	--menu-color: #333;			/* 菜单 - 文字色 */
	--menu-bg-color-2: #fff;	/* 二级菜单 - 背景色 */
	--menu-hover-bg-color: #ECF5FF;			/* 菜单悬浮 - 背景色 */
	--menu-active-bg-color: #73D13D;		/* 菜单选中 - 背景色 */

	--t-light-color: #eaf6eb;		/* 对应浅色 */

	--nav-left-top-border-color: 1px #ddd solid;	/* 左上 - 右边框颜色 */
	--nav-left-bottom-border-color: 1px #ddd solid;	/* 左下 - 右边框颜色 */
}

/* tab卡片栏 - 悬浮颜色 */
.theme-dark-green .tab-title:hover{
	color: var(--menu-active-bg-color);
	border: 1px var(--menu-active-bg-color) solid;
}
/* tab卡片栏 - 选中颜色 */
.theme-dark-green .tab-native.tab-title {
	background-color: var(--menu-active-bg-color);
	color: var(--menu-active-color);
	border: 1px var(--menu-active-bg-color) solid;
}
.theme-dark-green .layout-column .nav-cmb-left{
	border-right: 1px #e5e5e5 solid;
}


/* ------------------------ 主题 theme-white 简约白 ------------------------  */
.theme-white {
	--menu-bg-color: #FFF;		/* 菜单 - 背景色 */
	--menu-color: #333;			/* 菜单 - 文字色 */
	--menu-bg-color-2: #f5f5f5;	/* 二级菜单 - 背景色 */
	--menu-hover-bg-color: #E7F0FA;			/* 菜单悬浮 - 背景色 */
	--menu-active-bg-color: #E7F0FA;		/* 菜单选中 - 背景色 */
	--menu-active-color: #409EFF;				/* 菜单选中 - 文字色 */

	--nav-left-top-border-color: 1px #ddd solid;	/* 左上 - 右边框颜色 */
	--nav-left-bottom-border-color: 1px #ddd solid;	/* 左下 - 右边框颜色 */
}
/* tab卡片栏 - 悬浮颜色 */
.theme-white .tab-title:hover{
	color: var(--menu-active-color);
	border: 1px var(--menu-active-color) solid;
}
/* tab卡片栏 - 选中颜色 */
.theme-white .tab-native.tab-title {
	background-color: var(--menu-active-bg-color);
	color: var(--menu-active-color);
	border: 1px var(--menu-active-color) solid;
}

/* 浅色调遮罩调整 */
.theme-white .tab-style-mask-light .tab-native.tab-title{
	color: var(--menu-active-color) !important;
}
/* 分栏布局的菜单选中前景色调整 */
.theme-white .layout-column .nav-sub-menu-box{
	--menu-active-color: #409EFF;
}
.theme-white .layout-column .nav-cmb-left{
	border-right: 1px #e5e5e5 solid;
}










