comty/src/components/Layout/ChatSider.less

@import '~themes/vars.less';

@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
@LLightMode-backgroud: #fff;

@LDarkMode-color: #fff;
@LLightMode-color: #2F2E30;

.chatTitle {
  font-family: "Poppins", sans-serif;
  padding: 0 10px 0 0;
  float: right;
  display: flex;

  h1 {
    line-height: 1.2;
    margin-right: 5px;
  }

  svg {
    font-size: 20px;
  }
}


.something_thats_pulling_me_down {
  :global {
    text-align: center;
    bottom: 0;
    position: absolute;
    width: 100%;
  }
}

.siderhead {
  font-family: 'Source Sans Pro', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;

  ::first-letter {
    margin-left: 7px;
  }

  height: 60px;
  font-size: 17px;
}

.siderwrapper {
  border-color: transparent;
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  height: 100%;
  width: 100%;
  left: 0;
  position: absolute;

  :global {
    .ant-layout-sider-dark {
      background-color: @LDarkMode-backgroud;
      color: @DarkMode-color;

      h2 {
        color: @Theme-SiderDeco-Color;
      }

      .ant-menu-item {
        color: @DarkMode-color;
      }

      .ant-menu-inline,
      .ant-menu-vertical,
      .ant-menu-vertical-left {
        :hover {
          background-color: rgb(80, 80, 80);
          color: #fff;
        }

        border-right: 1px solid transparent;
      }
    }

    .ant-layout-sider-light {
      background-color: @Theme-SiderDeco-Backgroud;
      color: @Theme-SiderDeco-Color;

      h2 {
        color: @Theme-SiderDeco-Color;
      }

      .ant-menu-item {
        color: @Theme-SiderDeco-Color;
      }

      .ant-menu-inline,
      .ant-menu-vertical,
      .ant-menu-vertical-left {
        :hover {
          background-color: @Theme-Hover-Backgroud;
          color: #fff;
        }

        border-right: 1px solid transparent;
      }
    }
  }
}

.chatsider {
  float: right;
  background-color: transparent;
  border: 1px @LDarkMode-color solid;
  height: 100%;
  z-index: 50;

  :global {
    .ant-menu-dark {
      background-color: @LDarkMode-backgroud;
      color: @LDarkMode-color;
    }

    .ant-menu-light {
      background-color: @LLightMode-backgroud;
      color: @LLightMode-color;
    }
  }

  .menuItems {
    background-color: transparent;
    margin-bottom: 8px;
    width: 100%;
    animation: fadein 0.5s;

    :global {
      .ant-menu-item-selected {
        background-color: transparent;
      }
    }
  }

  .menuItemsCollapsed {
    background-color: transparent;
    color: @LDarkMode-color;
    width: 100%;
    animation: fadein 0.5s;

    :global {
      .ant-menu-item {
        padding: 0 !important;
        margin: 2px 0 2px 0;
        width: 100%;
        text-align: center;
        font-size: 20px;
      }

      .ant-menu-item-selected {
        background-color: rgba(82, 82, 82, 0.562);
      }
    }
  }

  .chatContainer {
    height: 100%;
    margin: 18px 0 8px 0;

    .scrollbar-container {
      position: initial;
      height: 100%;
    }

    overflow-x: hidden;
    flex: 1;

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }

    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: rgba(59, 59, 59, 0.2);
      }
    }

    :global {
      .ant-layout-sider-children {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .ant-layout-sider-collapsed {
        .ant-menu-item {
          left: 0;
          margin: 0;
          padding: 0;
        }

        .ant-menu-inline-collapsed>.ant-menu-item {
          padding: 0;
          left: 0;
        }
      }

      .scrollbar-container {
        position: initial;
        height: 100%;
      }

      .ant-menu-inline .ant-menu-item {
        font-size: 14px;
        font-family: 'Source Sans Pro', sans-serif;
      }

      .ant-menu-dark .ant-menu-item a {
        color: rgb(197, 197, 197);
      }
    }
  }
}

.scrollbar-container {
  position: initial;
  height: 100%;
}

@keyframes fadeLeftIn {
  0% {
    transform: translateX(5px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.search {
  position: relative;
  bottom: 0;
  width: 100%;
  visibility: bottom;
}


.chatbox {
  width: 100%;
  background: transparent;
  border-radius: 6px;
  height: 100%;
}