Proyectos de Subversion LeadersLinked - Antes de SPA

.active_chats-list {

  display: flex;

  align-items: flex-end;

  gap: 10px;

  width: fit-content;

  z-index: 100;

}

.personal-chat {

  background: $bg-color;

  border: 1px solid $border-primary;

  border-top-left-radius: $border-radius;

  border-top-right-radius: $border-radius;

  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);

  width: 260px;

  position: relative;

  z-index: 10;

  .chat-header {

    background-color: $bg-color-secondary;

    border-bottom: 1px solid $border-primary;

    display: flex;

    font-weight: bold;

    gap: .5rem;

    padding: .5rem;

    a {

      color: $subtitle-color;

    }

    small {

      color: $subtitle-color;

      font-size: 12px;

      &::after {

        content: "";

        position: absolute;

        height: 10px;

        width: 10px;

        left: 30px;

        top: 35px;

        border-radius: 50%;

        &.online:after {

          background-color: $online-green;

        }

        &.offline:after {

          background-color: #bdbdbd;

        }

      }

    }

    &>img {

      width: 36px;

      height: 36px;

      border-radius: 50%;

    }

    &.notify {

      animation: notify 2s infinite;

    }

    .info-content {

      display: flex;

      flex-direction: column;

    }

    .btn-group,

    .btn-group-vertical {

      position: relative;

      display: inline-block;

      vertical-align: middle;

      cursor: pointer;

    }

  }

}

.chatbox-icon {

  right: 230px;

  bottom: 23px;

  padding-top: 15px;

  margin-bottom: 0;

  z-index: 998;

  cursor: pointer;

  display: none;

  position: fixed;

}

.options {

  display: flex;

  gap: 5px;

  color: $subtitle-color;

}

.chat-conversation {

  background-color: $bg-color;

  display: flex;

  flex-flow: column-reverse;

  overflow: auto;

  padding: 1rem;

  height: 275px;

}

.conversation-list {

  display: flex;

  flex-direction: column;

  gap: .5rem;

  .conversation-text {

    align-items: center;

    display: flex;

    flex-direction: row;

    gap: .5rem;

    width: 100%;

    .ctext-wrap {

      background: $chat-received;

      border-radius: 0 10px 10px 10px;

      display: inline-block;

      padding: 5px;

      position: relative;

      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

      max-width: 65%;

      p {

        color: $chat-color;

        word-break: break-word;

      }

      img,

      video {

        border-radius: 10px;

        max-height: 200px;

        outline: none;

        width: 100%;

      }

      label {

        align-items: center;

        color: $chat-color;

        font-size: 0.8rem;

        gap: .5rem;

        display: inline-flex;

      }

      .emojione {

        height: 1rem;

        width: 1rem;

      }

      .pdf {

        width: 40px;

      }

    }

    .icon {

      border-radius: 50px;

      color: $chat-color;

      cursor: pointer;

      display: grid;

      height: 1.5rem;

      padding: 0;

      place-items: center;

      transition: all 0.2s;

      width: 1.5rem;

      &:hover {

        background: $chat-send;

      }

    }

    .display-reactions {

      align-items: center;

      background: $bg-color;

      border-radius: 10px;

      box-shadow: $shadow;

      color: $icons-color;

      display: flex;

      gap: 0.5rem;

      padding: 1rem;

      button {

        color: $icons-color;

      }

    }

  }

  .conversation-text.odd {

    flex-direction: row-reverse;

    .ctext-wrap {

      background: $chat-send;

      border-radius: 10px 0 10px 10px;

    }

  }

}

.chat-text_box {

  align-items: center;

  background-color: $bg-color-secondary;

  display: flex;

  gap: .5rem;

  padding: 0.5rem;

  position: relative;

  .btn-emoji {

    margin: 0;

    padding: 0;

  }

  textarea {

    background-color: var(--bg-color-secondary);

    border: none;

    height: 1.8rem;

    padding: 5px;

    outline: none;

    resize: none;

  }

}

.subpanel_title {

  background: $bg-color-secondary;

  color: $subtitle-color;

  cursor: pointer;

  font-weight: bold;

  padding: 0.5rem 1rem;

  font-size: 1.1rem;

  display: flex;

  justify-content: space-between;

  height: 30px;

  .subpanel_title-icons {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: $subtitle-color;

  }

}

/*chat end*/

*::-webkit-scrollbar {

  width: 6px !important;

  height: 6px !important;

}

*::-webkit-scrollbar-thumb {

  background-color: rgba(0, 0, 0, 0.2);

}

*::-webkit-scrollbar-track {

  background: rgba(255, 255, 255, 0.08);

}

*::-webkit-input-placeholder {

  color: #ccc;

  font-size: 15px;

}

*::-moz-placeholder {

  color: #ccc;

  font-size: 15px;

}

.customtab2 {

  border-bottom: 1px solid #f7fafc;

  border-top: 1px solid #f7fafc;

  background: #f9f9f9;

  li {

    a {

      color: #333333;

    }

    &:hover {

      a {

        color: #333333;

        border-bottom: 1px solid #333;

      }

    }

    &.active {

      a,

      a:hover,

      a:focus {

        background: #333333;

        border: 1px solid #333333;

        color: #ffffff;

      }

    }

  }

}

.menu-tabs {

  display: flex;

  align-items: center;

}

.menu-item {

  cursor: pointer;

  flex: 1;

  text-align: center;

}

// Animations

@keyframes notify {

  0% {

    background-color: unset;

  }

  50% {

    background-color: #00b0ff;

  }

  100% {

    background-color: unset;

  }

}