comty/src/layouts/PrimaryLayout.less

@import '~themes/vars.less';

.SecondHeader{
  float: right;
  display: flex;
  img {
    border-radius: 15px;
    width: 40px;
  }
  .notif_box {
    margin: 0 15px 0 5px;
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background-color: #78CFED;
  }
}

.mobilewarning{
  background-color: rgba(0, 0, 0, 0.975);
  color: white;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  text-align: center;
  :global {
    .ant-result-title {
      color: white;
    }
  }
}

.content {
  vertical-align: middle;
  width: 100%; 
  float: right;
  padding: 35px 25px 15px 60px;
  transition: all 0.2s ease;
  &.collapsed {
    width: ~'calc(100% - 180px)';
    transition: all 0.2s ease;
  }
}

.layout{
  background-color: @Theme-Layout-Backgroud; //#E2E6E9;
  transition: background-color 200ms linear;
  &.md_radius{
    width: 95%;
    margin: auto;
    position: relative;
    border-radius: 15px;
  }
  &.md_dark{
    background-color: @DarkMode-backgroud_container;
    color: @DarkMode-color_container;
    transition: background-color 200ms linear;
    :global {
      h1{
        color: @DarkMode-color_container;
      }
      h2{
        color: @DarkMode-color_container;
      }
      h3{
        color: @DarkMode-color_container;
      }
      h4{
        color: @DarkMode-color_container;
      }
      h5{
        color: @DarkMode-color_container;
      }
      h6{
        color: @DarkMode-color_container;
      }
      p{
        color: @DarkMode-color_container;
      }
      span{
        color: @DarkMode-color_container;
      }
      pre{
        color: @DarkMode-color_container;
      }
      .ant-pro-page-header-wrap-page-header-warp {
        color: @DarkMode-color_container;
        background-color: @DarkMode-backgroud_container;
        transition: background-color 200ms linear;
      }
      .ant-card{
        background-color: @DarkMode-backgroud;
      }
      .ant-input {
        color: @DarkMode-color_container;
        background-color: @DarkMode-backgroud;
      }
      .ant-btn-primary[disabled]{
        color: @DarkMode-color_container;
        background-color: @DarkMode-backgroud;
      }
      transition: background-color 200ms linear;
    }
  }
}

.BarControlWrapper{
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 30;
}

.leftContainer{
  align-self: center;
  width: 100vw;
  position: relative;
  float: left;
  overflow-x: hidden;
  height: 100vh;
  bottom: 0;
 :global{
  #scroller{
    overflow-y: scroll !important;
  }
  
 }
}

.rightContainer{
  background-color:#201F23;
  border-radius: 32px 0 0 32px;
  padding: 20px 15px 15px 15px;
  width: 27%;
  height: 100vh;
  position: relative;
  float: left;
  overflow-y: hidden !important;
  overflow-x: hidden;
  color: @DarkMode-color_container !important;
  :global{
    h1{
       color: @DarkMode-color_container;
    }
    #scroller{
      overflow-y: hidden;
    }
    .gCVnuz{
       color: @DarkMode-color_container !important;
       overflow-y: hidden;
    }
  }
}

@media (max-width: 767px) {
  .content {
    padding: 12px;
  }
  .layout {
    height: 100vh;
    flex: 1;
  }
}