path: root/client/src/app/+video-channels/video-channels.component.scss

@use '_variables' as *;
@use '_mixins' as *;
@use '_account-channel-page' as *;
@use '_miniature' as *;

.root {
  --myGlobalTopPadding: 60px;
  --myChannelImgMargin: 30px;
  --myFontSize: 16px;
  --myGreyChannelFontSize: 16px;
  --myGreyOwnerFontSize: 14px;
}

.banner {
  @include block-ratio('img', $banner-inverted-ratio);
}

.section-label {
  @include section-label-responsive;
}

.links {
  @include grid-videos-miniature-margins;
}

.actor-info {
  min-width: 1px;
  width: 100%;

  > h4,
  > .actor-handle {
    @include ellipsis;
  }
}

.channel-info {
  // Use the same margin as the videos grid
  @include grid-videos-miniature-margins(false, 15px);
  @include margin-bottom(3rem);

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;

  background-color: pvar(--channelBackgroundColor);
  padding-top: var(--myGlobalTopPadding);
  font-size: var(--myFontSize);
}

.channel-avatar-row {
  @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
}

.support-button {
  @include button-with-icon(21px, 0, -1px);
}

.channel-description {
  grid-column: 1;
  word-break: break-word;
  padding-bottom: var(--myGlobalTopPadding);
}

.show-more {
  @include show-more-description;

  display: none;
}

.channel-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;

  &.right {
    @include margin-left(3rem);
  }

  // Only used on small screen
  &.bottom {
    @include margin-bottom(2rem);

    justify-content: center;
    display: none;
  }
}

.owner-card {
  @include margin-left(105px);

  grid-column: 2;
  // Takes all the column
  grid-row: 1 / 3;
  place-self: end;
}

// Only used on mobile
.bottom-owner {
  display: none;
}

.owner-block {
  background-color: pvar(--mainBackgroundColor);
  padding: 30px;
  width: 300px;
  font-size: var(--myFontSize);

  .avatar-row {
    display: flex;
    margin-bottom: 15px;

    .actor-info {
      @include margin-left(15px);
    }

    h4 {
      font-size: 18px;
      margin: 0;

      a {
        color: pvar(--mainForegroundColor);
      }
    }

    .actor-handle {
      font-size: var(--myGreyOwnerFontSize);
      color: pvar(--greyForegroundColor);
    }

    .account-avatar {
      @include actor-avatar-size(48px);
    }
  }

  .owner-description {
    @include fade-text(120px, pvar(--mainBackgroundColor));

    max-height: 140px;
    word-break: break-word;
  }
}

.view-account.short {
  @include peertube-button-link;
  @include orange-button-inverted;

  margin-top: 30px;
}

.view-account.complete {
  display: none;
}

.copy-button {
  @include margin-left(3px);

  border: 0;

  my-global-icon {
    width: 15px;
  }
}

@media screen and (max-width: 1400px) {
  // Takes all the row width
  .channel-avatar-row {
    grid-column: 1 / 3;
  }

  .owner-card {
    @include margin-left(60px);

    grid-row: 2;
  }
}

@media screen and (max-width: 1100px) {
  .root {
    --myGlobalTopPadding: 45px;
    --myChannelImgMargin: 15px;
  }

  .channel-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

  .channel-description:not(.expanded) {
    @include fade-text(30px, pvar(--channelBackgroundColor));

    max-height: 70px;
  }

  .show-more {
    display: inline-block;
  }

  .channel-buttons {
    &.right {
      display: none;
    }

    &.bottom {
      display: flex;
    }
  }

  .owner-card {
    display: none;
  }

  .bottom-owner {
    display: block;
    width: 100%;
    border-bottom: 2px solid $separator-border-color;
    padding: var(--myGlobalTopPadding) 45px;
    margin-bottom: 60px;
  }

  .owner-block {
    display: grid;
    width: 100%;
    padding: 0;

    .avatar-row {
      @include margin-right(30px);

      grid-column: 1;
    }

    .owner-description {
      @include fade-text(30px, pvar(--mainBackgroundColor));

      grid-column: 2;
      max-height: 70px;
    }

    .view-account {
      grid-column: 2;
    }
  }

  .view-account.complete {
    display: block;
    text-align: end;
    margin-top: 10px;
    color: pvar(--mainColor);
  }

  .view-account.short {
    display: none;
  }
}

@media screen and (max-width: $mobile-view) {
  .root {
    --myGlobalTopPadding: 15px;
    --myFontSize: 14px;
    --myGreyChannelFontSize: 13px;
    --myGreyOwnerFontSize: 13px;
  }

  .links {
    margin: auto !important;
    width: min-content;
  }

  .bottom-owner {
    padding: 15px;
    margin-bottom: 30px;

    .section-label {
      display: none;
    }
  }

  .owner-block {
    display: block;

    .avatar-row {
      display: flex;
      flex-direction: row-reverse;
      margin: 0;

      h4 {
        font-size: 16px;
      }

      .actor-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: -5px;
      }

      .account-avatar {
        @include actor-avatar-size(64px);

        margin: -30px 0 0 15px;
      }
    }

    .owner-description {
      display: none;
    }
  }
}