@import '~themes/default.less';

.menuStyle{
  .ant-menu {
    color: #eee;
    background: transparent;

    .ant-menu-sub {
      background: transparent;
    }

    .ant-menu-item {
      font-weight: 500;
      font-size: 1.6rem;
      .anticon{
        font-size: 1.6rem;
      }
      &-selected, &:hover {
        background: rgba(255, 255, 255, .2);
        color: #fff;
        font-weight: 700;

        &::after {
          border-bottom: none !important;
          border-right: none !important;
        }
      }

      a {
        color: inherit;
      }
    }

    .ant-menu-submenu {
      padding: 0;
      font-weight: 500;
      font-size: 1.6rem;
      .anticon{
        font-size: 1.6rem;
      }
      &-selected, &:hover {
        background: transparent;
        color: #fff;
        font-weight: 700;

        &::after {
          border-bottom: none !important;
          border-right: none !important;
        }
      }
      .ant-menu-submenu-title{
        &:hover{
          color: #fff;
          background: rgba(255, 255, 255, .2);
        }
      }

      a {
        color: inherit;
      }
    }

    .anticon {
      color: inherit;
    }
  }
  .ant-pro-sider-links {
    .ant-menu-item {
      padding: 0 !important;
      margin: 0 !important;
    }
    .ant-menu-submenu-title {
      height: auto !important;
    }
    .anticon {
      font-size: 1.6rem !important;
    }
  }
}

.root {
  :global {
    .ant-layout-sider-collapsed{
      label {
        margin-left: 2rem;
      }
      .anticon{
        line-height: 1.6rem !important;
      }
    }
    .ant-pro-layout-watermark-wrapper{
      height: 100%;
    }
    .ant-layout-header{
      .ant-menu-submenu-title {
        padding: 0 20px!important;
      }
      color: #eee;
    }
    .ant-layout-sider{
      color: #eee;
    }

    .ant-pro-top-nav-header-logo{
      a, h1{
        font-size: 1.8rem;
        font-weight: 700;
      }
    }

    .ant-pro-sider-logo {
      width: 100%;
      white-space: nowrap;
      padding: 0 !important;
      a, h1{
        color: inherit !important;
        font-size: 1.8rem;
        font-weight: 700;
      }
    }
    .ant-pro-sider-fixed {
      transition: all 0.3s ease;
      box-shadow: @shadow-1-down;
    }
    .ant-pro-sider-extra {
      margin: 5px 0 !important;
    }
    .ant-layout-sider-children {
      padding: 5px;
    }
  }

  &.Default{ //默认
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #001529;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #001529;
        .menuStyle();
      }
    }
  }
  &.FlagRed{ //默认
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #BA000D;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #BA000D;
        .menuStyle();
      }
    }
  }
  &.SpaceBlue{ //航天蓝
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #21419B;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #21419B;
        .menuStyle();
      }
    }
  }
  &.DaybreakBlue{ //拂晓蓝
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #1890ff;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #1890ff;
        .menuStyle();
      }
    }
  }
  &.DustRed{ // 薄暮
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #F5222D;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #F5222D;
        .menuStyle();
      }
    }
  }
  &.Volcano{ // 火山
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #FA541C;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #FA541C;
        .menuStyle();
      }
    }
  }
  &.SunsetOrange{ //日暮
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #FAAD14;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #FAAD14;
        .menuStyle();
      }
    }
  }
  &.Cyan{ //明青
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #13C2C2;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #13C2C2;
        .menuStyle();
      }
    }
  }
  &.PolarGreen{ //极光绿
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #52C41A;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #52C41A;
        .menuStyle();
      }
    }
  }
  &.GeekBlue{ //极客蓝
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #2F54EB;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #2F54EB;
        .menuStyle();
      }
    }
  }
  &.GoldenPurple{ //酱紫
    :global{
      .__layout_main__ > .ant-layout > .ant-layout > .ant-layout-header{
        background: #722ED1;
        .menuStyle();
      }
      .__layout_main__ > .ant-layout > .ant-layout-sider{
        background: #722ED1;
        .menuStyle();
      }
    }
  }
}

.head-content {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 700;
  height: 100%;
  img {
    height: 24px;
    width: 24px;
    margin-right: 8px;
  }
}

.content {
  height: 100%;
  position: relative;
  overflow: hidden;
  .breadcrumb {
    padding: 10px;
  }
  .main {
    margin: 10px;
    height: calc(100% - 20px);
    overflow: auto;
    background: white;
    box-shadow: @shadow-1-down;
  }
}

.expand-button {
  display: flex;
  padding: 5px 0 0 0;
  justify-content: center;
  button {
    background: rgba(255,255,255,.1) !important;
    border-color: transparent!important;;
    color: #eee!important;;
    font-size: 1rem!important;;
    &:hover {
      color: #fff;
      background: rgba(255,255,255,.2);
    }
  }
  :global{
    .ant-input-group{
      .ant-input-affix-wrapper, .ant-input-group-addon{
        background: rgba(255,255,255,.1);
        border-color: transparent;
        input{
          background: transparent;
          color: #eee;
        }
      }
    }
  }
}
