chat_ui/assets/chat/scss/components/chatlist/file-list.scss

// <style scoped lang="scss">
.btn-default {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #444444;
  font-size: 0.9rem;
  padding: 0 1em;
  height: 32px;
  line-height: 1;
}

.btn-default:hover {
  color: #00b6e3;
  background-color: transparent;
  border-color: transparent;
}

.c-btn-danger {
  color: #dc3545;
}

.file-list {
  height: 7em;
  overflow: auto;
  margin: 0;
  // margin-right: 2em;

  .file-list-item {
    &:hover {
      background-color: #c8f8ff;
    }
  }
}

.file-icon-container {
  .icon {
    font-size: 1.7rem;
  }
}
.drop-container {
  background: #fff;
  border-radius: 1em;
  position: absolute;
  max-width: 35em;
  margin: auto;
  height: 20em;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  pointer-events: none;

  span {
    border: 3px dashed #b8ecff80;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    border-radius: 1em;
    margin: 1.5em;

    animation-name: movingBorder;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    // animation-fill-mode: forwards;
    animation-direction: alternate-reverse;
  }

  &.replays {
    left: 1em;
    right: 1em;
  }

  @keyframes movingBorder {
    from {
      border: 3px dashed #b8ecff80;
    }
    to {
      border: 3px dashed #b8ecff;
    }
  }
}

.dropped-list {
  background: #fff;
  border-radius: 1em;
  position: absolute;
  max-width: 35em;
  margin: auto;
  height: 26em;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 1em;
  overflow: auto;
  z-index: 5;
  box-shadow: 0px 0px 1px 1px #eee;

  .uploading-animation {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1em;
    position: absolute;
    max-width: 35em;
    margin: auto;
    height: 26em;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 1em;
    overflow: auto;
    z-index: 5;
    box-shadow: 0px 0px 1px 1px #eee;

    display: flex;
    align-content: center;
    justify-content: center;

    .loading-container {
      background: inherit;
    }

    z-index: -1;
  }

  &.uploading {
    .uploading-animation {
      z-index: 99;
    }
  }

  &.replays {
    left: 1em;
    right: 1em;
  }

  .heading-part {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  ul {
    list-style: none;
  }
}

.custom-control {
  padding-left: 0;
  padding-right: 1.2rem;

  .custom-control-input {
    left: unset;
    right: 0;
    width: 1.2rem;
    height: 1.45rem;

    &:checked ~ .custom-control-label::before {
      // border-color: #3DEF90;
      border-color: transparent;
      background-color: transparent;
    }

    &:checked ~ .custom-control-label::after {
      background-image: url("#{$VITE_COMMON_ASSETS_URL}/img/checked.svg");
      background-size: cover;
    }
  }

  .custom-control-label::before {
    border-radius: 0.45rem;
    left: unset;
    right: -1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    border-color: #bac4ce;
  }

  .custom-control-label::after {
    left: unset;
    right: -1.2rem;
    width: 1.2rem;
    height: 1.2rem;
  }
}

.select-options {
  height: 0;
  overflow: hidden;
  transition: height 0.2s;

  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 2;
  top: 0.5em;

  .btn {
    font-size: 0.8rem;
  }

  &.show {
    height: auto;
    overflow: auto;
    transition: height 0.2s;
  }
}

.multiselect {
  min-width: 11em;

  // * {
  // font-size: 0.8em;
  // }
}

// mehdi
// .group-info {
// .group-description {
//   max-width: 30em !important;
// }
// }
#replays {
  .group-description {
    // max-height: 3em;
    max-height: 1.6em;
    overflow: auto;
  }
}
// .hiden {
//   display: none;
// }

// .open {
//   position: relative;

//   margin: auto 5px;

//   span {
//     font-size: 1.4rem;
//     position: relative;
//     right: 8px;

//     &:hover {
//       border-radius: 50%;
//       background-color: #bac4ce;
//       color: black;
//     }
//   }
// }

// @media only screen and (min-width: 768px) and (max-width: 991.98px) {
//   // .group-info .group-description {
//   //   max-width: 20em !important;
//   // }
//   .hiden1 {
//     display: none;
//   }
// }

// @media only screen and (min-width: 576px) and (max-width: 766.98px) {
//   // .group-info .group-description {
//   //   max-width: 17em !important;
//   // }
//   .hiden2 {
//     display: none;
//   }
// }

// @media (max-width: 575.98px) {
//   // .group-info .group-description {
//   //   max-width: 17em !important;
//   // }
//   .hiden3 {
//     display: none;
//   }

//   .menu-multiselect {
//     display: flex;
//     width: 100%;
//     height: 3rem !important;
//     background-color: #fff;
//     position: relative;

//     align-items: center;
//     flex-direction: row-reverse;
//   }

//   #replays {
//     position: fixed;
//     top: 0;
//     background-color: #fff;
//     z-index: 9999;
//     width: 100%;
//     height: 100%;

//     .replay-list {
//     }

//     .comment-form-container {
//       bottom: -1em;
//     }
//   }
// }