discourse/app/assets/stylesheets/common/components/user-card.scss

@use "sass:math";

.user-card {
  --card-width: 39em;
  --avatar-width: 8em;
  --avatar-margin: -3.3em; // extends the avatar above the card
}

.animated-placeholder {
  height: 20px;
  position: relative;
}

.card-avatar-placeholder {
  width: var(--avatar-width);
  height: var(--avatar-width);
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  &:before {
    animation: placeHolderShimmer 4s linear infinite forwards;
    position: absolute;
    left: 0;
    content: "";
    background: linear-gradient(
      to right,
      var(--primary-very-low) 10%,
      var(--primary-low) 18%,
      var(--primary-very-low) 33%
    );
    height: var(--avatar-width);
    width: var(--card-width);
  }
}

// shared styles for user and group cards
.user-card,
.group-card {
  width: var(--card-width);
  box-shadow: var(--shadow-card);
  color: var(--primary);
  background: var(--secondary) center center;
  background-size: cover;
  outline: 2px solid transparent;

  .card-content {
    padding: 10px;
    background: rgba(var(--secondary-rgb), 0.85);
    &:after {
      content: "";
      display: block;
      clear: both;
    }
    a.card-huge-avatar {
      display: block;
    }
    .bio {
      @include line-clamp(2);
    }
  }
  .card-row:not(.first-row) {
    margin-top: 0.5em;
  }
  // avatar - names - controls
  .first-row {
    .names {
      padding-left: 1.25em;

      .user-profile-link {
        display: flex;
        align-items: center;

        &:focus-visible {
          border: 1px solid;
          @include default-focus;
        }
      }

      .d-icon {
        margin: 0 0.25em;
      }

      .name-username-wrapper {
        margin-right: 0;
        flex: 0 1 auto;
      }
      span {
        display: block;
      }
    }
    .usercard-controls {
      list-style-type: none;
      margin: 0;
      button {
        width: 100%;
      }
    }
  }
  .btn {
    margin-bottom: 5px;
  }
  h1 {
    line-height: var(--line-height-medium);
    .d-icon {
      color: var(--primary);
    }
  }
  h3 {
    display: inline;
    margin-right: 0.5em;
    color: var(--primary);
    &.email,
    .desc,
    a {
      color: var(--primary-high);
    }
  }
  h1,
  h2,
  h3 {
    margin: 0;
    @include ellipsis;
  }
  h1,
  h2 {
    a {
      color: var(--primary);
    }
  }
  h2,
  h3 {
    font-weight: normal;
  }
  p {
    margin: 0 0 5px 0;
  }
}

// styles for user cards only
.user-card {
  // avatar - names - controls
  .first-row {
    display: flex;
    .avatar-placeholder {
      width: var(--avatar-width);
      height: var(--avatar-width);
    }
    .user-card-avatar {
      margin-top: var(--avatar-margin);
      max-height: var(--avatar-width);
    }
    .avatar {
      width: var(--avatar-width);
      height: var(--avatar-width);
    }
    .new-user a {
      color: var(--primary-low-mid);
    }
  }
  // user bio - suspension reason
  .second-row {
    max-height: 150px;
    overflow: auto;
    .bio {
      a:not(.mention) {
        color: var(--tertiary);
      }
      .overflow {
        max-height: 60px;
        overflow: hidden;
      }
    }
    .suspended {
      color: var(--danger);
      .suspension-reason-title,
      .suspension-date {
        font-weight: bold;
      }
    }
    .profile-hidden,
    .inactive-user {
      font-size: var(--font-up-1);
      margin-top: 0.5em;
    }
  }
  // featured topic
  .featured-topic {
    .desc {
      color: var(--primary-high);
    }
    a {
      color: var(--primary);
      text-decoration: underline;
    }
  }

  // location and website
  .location-and-website {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    .location,
    .website-name {
      display: flex;
      overflow: hidden;
      align-items: center;
      .d-icon {
        margin-right: 0.25em;
      }
    }
    .website-name a,
    .location span {
      @include ellipsis;
      color: var(--primary);
    }
    .location,
    .local-time,
    .website-name {
      margin-right: 0.5em;
    }
    .website-name a {
      text-decoration: underline;
    }
  }
  // custom user fields
  .public-user-fields {
    margin: 0;
    .user-field-value-list-item:not(:last-of-type) {
      &:after {
        // create comma separated list
        content: ",";
      }
    }
  }

  // badges
  .badge-section {
    line-height: 0;
    .user-badge {
      @include ellipsis;
      background: var(--primary-very-low);
      border: 1px solid var(--primary-low);
      color: var(--primary);
    }
    .user-card-badge-link {
      overflow: hidden;
    }
    .user-card-badge-link,
    .more-user-badges {
      vertical-align: top;
      display: inline-block;
    }
    .more-user-badges a {
      @extend .user-badge;
    }
  }
}

// styles for group cards only
.group-card {
  // avatar - names and controls
  .first-row {
    display: flex;
    .group-card-avatar {
      margin-top: var(--avatar-margin);
    }
    .avatar-flair {
      display: flex;
      background-size: contain;
      background-repeat: no-repeat;
      width: var(--avatar-width);
      height: var(--avatar-width);
      color: var(--primary);
      .d-icon {
        margin: auto;
        font-size: calc(var(--avatar-width) / 1.5);
      }
      &.rounded {
        border-radius: 50%;
      }
    }
  }
  // group bio
  .second-row {
    max-height: 150px;
    overflow: auto;
    .bio {
      a:not(.mention) {
        color: var(--tertiary);
      }
      img {
        max-width: 100%;
        height: auto;
      }
      .overflow {
        max-height: 60px;
        overflow: hidden;
      }
    }
  }
}

h3.user-status {
  display: flex;

  img.emoji {
    margin-bottom: 1px;
    margin-right: 0.3em;
  }

  .relative-date {
    flex: 1 0 auto;
    text-align: left;
    font-size: var(--font-down-3);
    padding-top: 0.5em;
    margin-left: 0.6em;
    color: var(--primary-medium);
  }
}