|  | @@ -1,4 +1,83 @@
 | 
	
		
			
				|  |  | -#app {
 | 
	
		
			
				|  |  | +#app, #app.green {
 | 
	
		
			
				|  |  | +  .indexlayout-top-menu-li {
 | 
	
		
			
				|  |  | +    &:hover, &.active {
 | 
	
		
			
				|  |  | +      color: $menuActiveText2 !important;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  .sidebar-container {
 | 
	
		
			
				|  |  | +    background-color: $menuBg;
 | 
	
		
			
				|  |  | +    // menu hover
 | 
	
		
			
				|  |  | +    .submenu-title-noDropdown,
 | 
	
		
			
				|  |  | +    .el-submenu__title {
 | 
	
		
			
				|  |  | +      &:hover {
 | 
	
		
			
				|  |  | +        background-color: $menuHover !important;
 | 
	
		
			
				|  |  | +        color: $menuActiveText2 !important;
 | 
	
		
			
				|  |  | +        &::after{
 | 
	
		
			
				|  |  | +          background-color: $menuActiveText2;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    .is-active>.el-submenu__title {
 | 
	
		
			
				|  |  | +      color: $subMenuActiveText !important;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    & .nest-menu .el-submenu>.el-submenu__title,
 | 
	
		
			
				|  |  | +    & .el-submenu .el-menu-item {
 | 
	
		
			
				|  |  | +      background-color: $subMenuBg!important;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      &:hover {
 | 
	
		
			
				|  |  | +        background-color: $subMenuHover!important;
 | 
	
		
			
				|  |  | +        color: $menuActiveText2 !important;
 | 
	
		
			
				|  |  | +        &::after{
 | 
	
		
			
				|  |  | +          background-color: $menuActiveText2;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    & .el-menu-item {
 | 
	
		
			
				|  |  | +      &:hover {
 | 
	
		
			
				|  |  | +        background-color: $subMenuHover!important;
 | 
	
		
			
				|  |  | +        color: $menuActiveText2 !important;
 | 
	
		
			
				|  |  | +        &::after{
 | 
	
		
			
				|  |  | +          background-color: $menuActiveText2;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .el-submenu .el-menu-item.is-active {
 | 
	
		
			
				|  |  | +    background-color: $subMenuActiveBg!important;
 | 
	
		
			
				|  |  | +    &::after{
 | 
	
		
			
				|  |  | +      background-color: $menuActiveText2;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .el-menu-item.is-active {
 | 
	
		
			
				|  |  | +    background-color: $menuHover !important;
 | 
	
		
			
				|  |  | +    color: $menuActiveText2 !important;
 | 
	
		
			
				|  |  | +    &::after {
 | 
	
		
			
				|  |  | +      background-color: $menuActiveAfter;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  .el-submenu .el-menu-item.is-active {
 | 
	
		
			
				|  |  | +    color: $menuActiveText2 !important;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .el-menu-item.is-active {
 | 
	
		
			
				|  |  | +    font-weight: bold;
 | 
	
		
			
				|  |  | +    position: relative;
 | 
	
		
			
				|  |  | +    &::after {
 | 
	
		
			
				|  |  | +      position: absolute;
 | 
	
		
			
				|  |  | +      top: 0;
 | 
	
		
			
				|  |  | +      right: 0;
 | 
	
		
			
				|  |  | +      content: " ";
 | 
	
		
			
				|  |  | +      width: 6px;
 | 
	
		
			
				|  |  | +      display: block;
 | 
	
		
			
				|  |  | +      height: 100%;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    .main-container {
 | 
	
		
			
				|  |  |      min-height: 100%;
 | 
	
	
		
			
				|  | @@ -10,7 +89,6 @@
 | 
	
		
			
				|  |  |    .sidebar-container {
 | 
	
		
			
				|  |  |      transition: width 0.28s;
 | 
	
		
			
				|  |  |      width: $sideBarWidth !important;
 | 
	
		
			
				|  |  | -    background-color: $menuBg;
 | 
	
		
			
				|  |  |      height: 100%;
 | 
	
		
			
				|  |  |      position: fixed;
 | 
	
		
			
				|  |  |      font-size: 0px;
 | 
	
	
		
			
				|  | @@ -77,8 +155,6 @@
 | 
	
		
			
				|  |  |        align-items: center;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |        &:hover {
 | 
	
		
			
				|  |  | -        background-color: $menuHover !important;
 | 
	
		
			
				|  |  | -        color: #14928A !important;
 | 
	
		
			
				|  |  |          position: relative;
 | 
	
		
			
				|  |  |          &::after{
 | 
	
		
			
				|  |  |            position: absolute;
 | 
	
	
		
			
				|  | @@ -86,7 +162,6 @@
 | 
	
		
			
				|  |  |            right: 0;
 | 
	
		
			
				|  |  |            content: ' ';
 | 
	
		
			
				|  |  |            width: 6px;
 | 
	
		
			
				|  |  | -          background-color: $menuActiveText2;
 | 
	
		
			
				|  |  |            display: block;
 | 
	
		
			
				|  |  |            height: 100%;
 | 
	
		
			
				|  |  |          }
 | 
	
	
		
			
				|  | @@ -95,17 +170,13 @@
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      .is-active>.el-submenu__title {
 | 
	
		
			
				|  |  |        i{color: #909399;}
 | 
	
		
			
				|  |  | -      color: $subMenuActiveText !important;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      & .nest-menu .el-submenu>.el-submenu__title,
 | 
	
		
			
				|  |  |      & .el-submenu .el-menu-item {
 | 
	
		
			
				|  |  |        min-width: $sideBarWidth !important;
 | 
	
		
			
				|  |  | -      background-color: $subMenuBg!important;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |        &:hover {
 | 
	
		
			
				|  |  | -        background-color: $subMenuHover!important;
 | 
	
		
			
				|  |  | -        color: #14928A !important;
 | 
	
		
			
				|  |  |          position: relative;
 | 
	
		
			
				|  |  |          &::after{
 | 
	
		
			
				|  |  |            position: absolute;
 | 
	
	
		
			
				|  | @@ -113,7 +184,6 @@
 | 
	
		
			
				|  |  |            right: 0;
 | 
	
		
			
				|  |  |            content: ' ';
 | 
	
		
			
				|  |  |            width: 6px;
 | 
	
		
			
				|  |  | -          background-color: $menuActiveText2;
 | 
	
		
			
				|  |  |            display: block;
 | 
	
		
			
				|  |  |            height: 100%;
 | 
	
		
			
				|  |  |          }
 | 
	
	
		
			
				|  | @@ -121,8 +191,6 @@
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |      & .el-menu-item {
 | 
	
		
			
				|  |  |        &:hover {
 | 
	
		
			
				|  |  | -        background-color: $subMenuHover!important;
 | 
	
		
			
				|  |  | -        color: #14928A !important;
 | 
	
		
			
				|  |  |          position: relative;
 | 
	
		
			
				|  |  |          &::after{
 | 
	
		
			
				|  |  |            position: absolute;
 | 
	
	
		
			
				|  | @@ -130,7 +198,6 @@
 | 
	
		
			
				|  |  |            right: 0;
 | 
	
		
			
				|  |  |            content: ' ';
 | 
	
		
			
				|  |  |            width: 6px;
 | 
	
		
			
				|  |  | -          background-color: $menuActiveText2;
 | 
	
		
			
				|  |  |            display: block;
 | 
	
		
			
				|  |  |            height: 100%;
 | 
	
		
			
				|  |  |          }
 | 
	
	
		
			
				|  | @@ -138,7 +205,6 @@
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |    .el-submenu .el-menu-item.is-active {
 | 
	
		
			
				|  |  | -    background-color: $subMenuActiveBg!important;
 | 
	
		
			
				|  |  |      position: relative;
 | 
	
		
			
				|  |  |      &::after{
 | 
	
		
			
				|  |  |        position: absolute;
 | 
	
	
		
			
				|  | @@ -146,7 +212,6 @@
 | 
	
		
			
				|  |  |        right: 0;
 | 
	
		
			
				|  |  |        content: ' ';
 | 
	
		
			
				|  |  |        width: 6px;
 | 
	
		
			
				|  |  | -      background-color: $menuActiveText2;
 | 
	
		
			
				|  |  |        display: block;
 | 
	
		
			
				|  |  |        height: 100%;
 | 
	
		
			
				|  |  |      }
 | 
	
	
		
			
				|  | @@ -236,55 +301,141 @@
 | 
	
		
			
				|  |  |        transition: none;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .el-menu-item.is-active {
 | 
	
		
			
				|  |  | +    font-weight: bold;
 | 
	
		
			
				|  |  | +    position: relative;
 | 
	
		
			
				|  |  | +    &::after {
 | 
	
		
			
				|  |  | +      position: absolute;
 | 
	
		
			
				|  |  | +      top: 0;
 | 
	
		
			
				|  |  | +      right: 0;
 | 
	
		
			
				|  |  | +      content: " ";
 | 
	
		
			
				|  |  | +      width: 6px;
 | 
	
		
			
				|  |  | +      display: block;
 | 
	
		
			
				|  |  | +      height: 100%;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -// when menu collapsed
 | 
	
		
			
				|  |  | -.el-menu--vertical {
 | 
	
		
			
				|  |  | -  &>.el-menu {
 | 
	
		
			
				|  |  | -    .svg-icon {
 | 
	
		
			
				|  |  | -      margin-right: 16px;
 | 
	
		
			
				|  |  | +#app.dark {
 | 
	
		
			
				|  |  | +  .indexlayout-top-menu-li {
 | 
	
		
			
				|  |  | +    &:hover, &.active {
 | 
	
		
			
				|  |  | +      color: $darkmenuActiveText2 !important;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | +  .sidebar-container {
 | 
	
		
			
				|  |  | +    background-color: $darkmenuBg;
 | 
	
		
			
				|  |  | +    .submenu-title-noDropdown,
 | 
	
		
			
				|  |  | +    .el-submenu__title {
 | 
	
		
			
				|  |  | +      &:hover {
 | 
	
		
			
				|  |  | +        background-color: $darkmenuHover !important;
 | 
	
		
			
				|  |  | +        color: $darkmenuActiveText2 !important;
 | 
	
		
			
				|  |  | +        &::after{
 | 
	
		
			
				|  |  | +          background-color: $darkmenuActiveText2;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    .is-active>.el-submenu__title {
 | 
	
		
			
				|  |  | +      color: $darksubMenuActiveText !important;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -  // .nest-menu .el-submenu>.el-submenu__title,
 | 
	
		
			
				|  |  | -  .el-menu-item {
 | 
	
		
			
				|  |  | -    &:hover {
 | 
	
		
			
				|  |  | -      // you can use $subMenuHover
 | 
	
		
			
				|  |  | -      background-color: $menuHover !important;
 | 
	
		
			
				|  |  | -      color: #14928A !important;
 | 
	
		
			
				|  |  | -      position: relative;
 | 
	
		
			
				|  |  | -      &::after{
 | 
	
		
			
				|  |  | -        position: absolute;
 | 
	
		
			
				|  |  | -        top: 0;
 | 
	
		
			
				|  |  | -        right: 0;
 | 
	
		
			
				|  |  | -        content: ' ';
 | 
	
		
			
				|  |  | -        width: 6px;
 | 
	
		
			
				|  |  | -        background-color: $menuActiveText2;
 | 
	
		
			
				|  |  | -        display: block;
 | 
	
		
			
				|  |  | -        height: 100%;
 | 
	
		
			
				|  |  | +    & .nest-menu .el-submenu>.el-submenu__title,
 | 
	
		
			
				|  |  | +    & .el-submenu .el-menu-item {
 | 
	
		
			
				|  |  | +      background-color: $darksubMenuBg!important;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      &:hover {
 | 
	
		
			
				|  |  | +        background-color: $darksubMenuHover!important;
 | 
	
		
			
				|  |  | +        color: $darkmenuActiveText2 !important;
 | 
	
		
			
				|  |  | +        &::after{
 | 
	
		
			
				|  |  | +          background-color: $darkmenuActiveText2;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -    .is-active {
 | 
	
		
			
				|  |  | -      background-color:$subMenuActiveBg !important;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    & .el-menu-item {
 | 
	
		
			
				|  |  | +      &:hover {
 | 
	
		
			
				|  |  | +        background-color: $darksubMenuHover!important;
 | 
	
		
			
				|  |  | +        color: $darkmenuActiveText2 !important;
 | 
	
		
			
				|  |  | +        &::after{
 | 
	
		
			
				|  |  | +          background-color: $darkmenuActiveText2;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -  // the scroll bar appears when the subMenu is too long
 | 
	
		
			
				|  |  | -  >.el-menu--popup {
 | 
	
		
			
				|  |  | -    max-height: 100vh;
 | 
	
		
			
				|  |  | -    overflow-y: auto;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    &::-webkit-scrollbar-track-piece {
 | 
	
		
			
				|  |  | -      background: #d3dce6;
 | 
	
		
			
				|  |  | +  .el-submenu .el-menu-item.is-active {
 | 
	
		
			
				|  |  | +    background-color: $darksubMenuActiveBg!important;
 | 
	
		
			
				|  |  | +    &::after{
 | 
	
		
			
				|  |  | +      background-color: $darkmenuActiveText2;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    &::-webkit-scrollbar {
 | 
	
		
			
				|  |  | -      width: 6px;
 | 
	
		
			
				|  |  | +  .el-menu-item.is-active {
 | 
	
		
			
				|  |  | +    background-color: $darkmenuHover !important;
 | 
	
		
			
				|  |  | +    color: $darkmenuActiveText2 !important;
 | 
	
		
			
				|  |  | +    &::after {
 | 
	
		
			
				|  |  | +      background-color: $darkmenuActiveAfter;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  .el-submenu .el-menu-item.is-active {
 | 
	
		
			
				|  |  | +    color: $darkmenuActiveText2 !important;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    &::-webkit-scrollbar-thumb {
 | 
	
		
			
				|  |  | -      background: #99a9bf;
 | 
	
		
			
				|  |  | -      border-radius: 20px;
 | 
	
		
			
				|  |  | +  .navbar {
 | 
	
		
			
				|  |  | +    background: #000;
 | 
	
		
			
				|  |  | +    .left-menu {
 | 
	
		
			
				|  |  | +      color: #fff;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +// when menu collapsed
 | 
	
		
			
				|  |  | +// .el-menu--vertical {
 | 
	
		
			
				|  |  | +//   &>.el-menu {
 | 
	
		
			
				|  |  | +//     .svg-icon {
 | 
	
		
			
				|  |  | +//       margin-right: 16px;
 | 
	
		
			
				|  |  | +//     }
 | 
	
		
			
				|  |  | +//   }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//   // .nest-menu .el-submenu>.el-submenu__title,
 | 
	
		
			
				|  |  | +//   .el-menu-item {
 | 
	
		
			
				|  |  | +//     &:hover {
 | 
	
		
			
				|  |  | +//       // you can use $subMenuHover
 | 
	
		
			
				|  |  | +//       background-color: $menuHover !important;
 | 
	
		
			
				|  |  | +//       color: #14928A !important;
 | 
	
		
			
				|  |  | +//       position: relative;
 | 
	
		
			
				|  |  | +//       &::after{
 | 
	
		
			
				|  |  | +//         position: absolute;
 | 
	
		
			
				|  |  | +//         top: 0;
 | 
	
		
			
				|  |  | +//         right: 0;
 | 
	
		
			
				|  |  | +//         content: ' ';
 | 
	
		
			
				|  |  | +//         width: 6px;
 | 
	
		
			
				|  |  | +//         background-color: $menuActiveText2;
 | 
	
		
			
				|  |  | +//         display: block;
 | 
	
		
			
				|  |  | +//         height: 100%;
 | 
	
		
			
				|  |  | +//       }
 | 
	
		
			
				|  |  | +//     }
 | 
	
		
			
				|  |  | +//     .is-active {
 | 
	
		
			
				|  |  | +//       background-color:$subMenuActiveBg !important;
 | 
	
		
			
				|  |  | +//     }
 | 
	
		
			
				|  |  | +//   }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//   // the scroll bar appears when the subMenu is too long
 | 
	
		
			
				|  |  | +//   >.el-menu--popup {
 | 
	
		
			
				|  |  | +//     max-height: 100vh;
 | 
	
		
			
				|  |  | +//     overflow-y: auto;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//     &::-webkit-scrollbar-track-piece {
 | 
	
		
			
				|  |  | +//       background: #d3dce6;
 | 
	
		
			
				|  |  | +//     }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//     &::-webkit-scrollbar {
 | 
	
		
			
				|  |  | +//       width: 6px;
 | 
	
		
			
				|  |  | +//     }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//     &::-webkit-scrollbar-thumb {
 | 
	
		
			
				|  |  | +//       background: #99a9bf;
 | 
	
		
			
				|  |  | +//       border-radius: 20px;
 | 
	
		
			
				|  |  | +//     }
 | 
	
		
			
				|  |  | +//   }
 | 
	
		
			
				|  |  | +// }
 |