Add AccountAvatarComponent (#3965)

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-watch / comment / video-comment.component.scss

@import '_variables';
@import '_mixins';

.root-comment {
  font-size: 15px;
  display: flex;

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;

    .vertical-border {
      width: 2px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.05);
      margin: 10px calc(1rem + 1px);
    }
  }

  .right {
    width: 100%;
  }

  .comment {
    flex-grow: 1;
    // Fix word-wrap with flex
    min-width: 1px;

    .highlighted-comment {
      display: inline-block;
      background-color: #F5F5F5;
      color: #3d3d3d;
      padding: 0 5px;
      font-size: 13px;
      margin-bottom: 5px;
      font-weight: $font-semibold;
      border-radius: 3px;
    }

    .comment-account-date {
      display: flex;
      margin-bottom: 4px;

      .video-author {
        height: 20px;
        background-color: #888888;
        border-radius: 12px;
        margin-bottom: 2px;
        max-width: 100%;
        box-sizing: border-box;
        flex-direction: row;
        align-items: center;
        display: inline-flex;
        padding-right: 6px;
        padding-left: 6px;
        color: white !important;
      }

      .comment-account {
        word-break: break-all;
        font-weight: 600;
        font-size: 90%;

        a {
          @include disable-default-a-behaviour;

          color: pvar(--mainForegroundColor);

          &:hover {
            text-decoration: underline;
          }
        }

        .comment-account-fid {
          opacity: .6;
        }
      }

      .comment-date {
        font-size: 90%;
        color: pvar(--greyForegroundColor);
        margin-left: 5px;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .comment-html {
      @include peertube-word-wrap;

      // Mentions
      ::ng-deep a {

        &:not(.linkified-url) {
          @include disable-default-a-behaviour;

          color: pvar(--mainForegroundColor);

          font-weight: $font-semibold;
        }

      }

      // Paragraphs
      ::ng-deep p {
        margin-bottom: .3rem;
      }

      &.comment-html-deleted {
        color: pvar(--greyForegroundColor);
        margin-bottom: 1rem;
      }
    }

    .comment-actions {
      margin-bottom: 10px;
      display: flex;

      ::ng-deep .dropdown-toggle,
      .comment-action-reply {
        color: pvar(--greyForegroundColor);
        cursor: pointer;
        margin-right: 10px;

        &:hover, &:active, &:focus, &:focus-visible {
          color: pvar(--mainForegroundColor);
        }
      }

      ::ng-deep .action-button {
        background-color: transparent;
        padding: 0;
        font-weight: unset;
      }
    }

    my-video-comment-add {
      ::ng-deep form {
        margin-top: 1rem;
        margin-bottom: 0;
      }
    }
  }

  .children {
    // Reduce avatars size for replies
    .comment-avatar {
      @include avatar(25px);
    }

    .left {
      margin-right: 6px;
    }
  }
}

@media screen and (max-width: 1200px) {
  .children {
    margin-left: -10px;
  }
}

@media screen and (max-width: 600px) {
  .root-comment {
    .children {
      margin-left: -20px;

      .left {
        align-items: flex-start;

        .vertical-border {
          margin-left: 2px;
        }
      }
    }

    .comment {
      .comment-account-date {
        flex-direction: column;

        .comment-date {
          margin-left: 0;
        }
      }
    }
  }
}