catstodon/app/javascript/flavours/glitch/styles/components/accounts.scss

.account {
  padding: 10px;
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  color: inherit;
  text-decoration: none;

  .account__display-name {
    flex: 1 1 auto;
    display: block;
    color: $darker-text-color;
    overflow: hidden;
    text-decoration: none;
    font-size: 14px;

    &--with-note {
      strong {
        display: inline;
      }
    }
  }

  &__note {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: $ui-secondary-color;
  }

  &.small {
    border: 0;
    padding: 0;

    & > .account__avatar-wrapper {
      margin: 0;
      margin-inline-end: 8px;
    }

    & > .display-name {
      height: 24px;
      line-height: 24px;
    }
  }
}

.follow-recommendations-account {
  .icon-button {
    color: $ui-primary-color;

    &.active {
      color: $valid-value-color;
    }
  }
}

.account__wrapper {
  display: flex;
}

.account__avatar-wrapper {
  float: left;
  margin-inline-start: 12px;
  margin-inline-end: 12px;
}

.account__avatar {
  @include avatar-radius;

  display: block;
  position: relative;
  cursor: pointer;
  width: 36px;
  height: 36px;
  background-size: 36px 36px;

  &-inline {
    display: inline-block;
    vertical-align: middle;
    margin-inline-end: 5px;
  }

  &-composite {
    @include avatar-radius;

    overflow: hidden;
    position: relative;

    & div {
      @include avatar-radius;

      float: left;
      position: relative;
      box-sizing: border-box;
    }

    &__label {
      display: block;
      position: absolute;
      top: 50%;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
      color: $primary-text-color;
      text-shadow: 1px 1px 2px $base-shadow-color;
      font-weight: 700;
      font-size: 15px;
    }
  }
}

.account__avatar-overlay {
  @include avatar-size(48px);

  position: relative;

  &-base {
    @include avatar-radius;
    @include avatar-size(36px);

    img {
      @include avatar-radius;

      width: 100%;
      height: 100%;
    }
  }

  &-overlay {
    @include avatar-radius;
    @include avatar-size(24px);

    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 1;

    img {
      @include avatar-radius;

      width: 100%;
      height: 100%;
    }
  }
}

.account__relationship {
  height: 18px;
  padding: 10px;
  white-space: nowrap;
}

.account__header__wrapper {
  flex: 0 0 auto;
  background: lighten($ui-base-color, 4%);
}

.account__disclaimer {
  padding: 10px;
  color: $dark-text-color;

  strong {
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    }
  }

  a {
    font-weight: 500;
    color: inherit;
    text-decoration: underline;

    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
    }
  }
}

.account__action-bar {
  border-top: 1px solid lighten($ui-base-color, 8%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  line-height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
}

.account__action-bar-links {
  display: flex;
  flex: 1 1 auto;
  line-height: 18px;
  text-align: center;
}

.account__action-bar__tab {
  text-decoration: none;
  overflow: hidden;
  flex: 0 1 100%;
  border-inline-start: 1px solid lighten($ui-base-color, 8%);
  padding: 10px 0;
  border-bottom: 4px solid transparent;

  &:first-child {
    border-inline-start: 0;
  }

  &.active {
    border-bottom: 4px solid $ui-highlight-color;
  }

  & > span {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    color: $darker-text-color;
  }

  strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: $primary-text-color;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    }
  }

  abbr {
    color: $highlight-text-color;
  }
}

.account-authorize {
  padding: 14px 10px;

  .detailed-status__display-name {
    display: block;
    margin-bottom: 15px;
    overflow: hidden;
  }
}

.account-authorize__avatar {
  float: left;
  margin-inline-end: 10px;
}

.notification__report {
  padding: 8px 10px;
  padding-inline-start: 68px;
  position: relative;
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  min-height: 54px;

  &__details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: $darker-text-color;
    font-size: 15px;
    line-height: 22px;

    strong {
      font-weight: 500;
    }
  }

  &__avatar {
    position: absolute;
    inset-inline-start: 10px;
    top: 10px;
  }
}

.notification__message {
  margin-inline-start: 42px;
  padding-top: 8px;
  padding-inline-start: 26px;
  cursor: default;
  color: $darker-text-color;
  font-size: 15px;
  position: relative;

  .fa {
    color: $highlight-text-color;
  }

  > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.account--panel {
  background: lighten($ui-base-color, 4%);
  border-top: 1px solid lighten($ui-base-color, 8%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  display: flex;
  flex-direction: row;
  padding: 10px 0;
}

.account--panel__button,
.detailed-status__button {
  flex: 1 1 auto;
  text-align: center;
}

.relationship-tag {
  color: $white;
  margin-bottom: 4px;
  display: block;
  background-color: rgba($black, 0.45);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.7;

  &:hover {
    opacity: 1;
  }
}

.account-gallery__container {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 2px;
}

.account-gallery__item {
  border: 0;
  box-sizing: border-box;
  display: block;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin: 2px;

  &__icons {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
  }
}

.notification__filter-bar,
.account__section-headline {
  background: darken($ui-base-color, 4%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  cursor: default;
  display: flex;
  flex-shrink: 0;

  button {
    background: transparent;
    border: 0;
    margin: 0;
  }

  button,
  a {
    display: block;
    flex: 1 1 auto;
    color: $darker-text-color;
    padding: 15px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    position: relative;

    &.active {
      color: $primary-text-color;

      &::before {
        display: block;
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 3px;
        border-radius: 4px;
        background: $highlight-text-color;
      }
    }
  }

  &.directory__section-headline {
    background: darken($ui-base-color, 2%);
    border-bottom-color: transparent;

    a,
    button {
      &.active {
        &::before {
          display: none;
        }

        &::after {
          border-color: transparent transparent darken($ui-base-color, 7%);
        }
      }
    }
  }
}

.account__moved-note {
  padding: 14px 10px;
  padding-bottom: 16px;
  background: lighten($ui-base-color, 4%);
  border-top: 1px solid lighten($ui-base-color, 8%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);

  &__message {
    position: relative;
    margin-inline-start: 58px;
    color: $dark-text-color;
    padding: 8px 0;
    padding-top: 0;
    padding-bottom: 4px;
    font-size: 14px;

    > span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &__icon-wrapper {
    inset-inline-start: -26px;
    position: absolute;
  }

  .detailed-status__display-avatar {
    position: relative;
  }

  .detailed-status__display-name {
    margin-bottom: 0;
  }
}

.account__header__content {
  color: $darker-text-color;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;

  p {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  a {
    color: inherit;
    text-decoration: underline;

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

.account__header {
  overflow: hidden;

  &.inactive {
    opacity: 0.5;

    .account__header__image,
    .account__avatar {
      filter: grayscale(100%);
    }
  }

  &__info {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
  }

  &__image {
    overflow: hidden;
    height: 145px;
    position: relative;
    background: darken($ui-base-color, 4%);

    img {
      object-fit: cover;
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
    }
  }

  &__bar {
    position: relative;
    background: lighten($ui-base-color, 4%);
    padding: 5px;
    border-bottom: 1px solid lighten($ui-base-color, 12%);

    .avatar {
      display: block;
      flex: 0 0 auto;
      width: 94px;

      .account__avatar {
        background: darken($ui-base-color, 8%);
        border: 2px solid lighten($ui-base-color, 4%);
      }
    }
  }

  &__tabs {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 7px 10px;
    margin-top: -81px;
    height: 130px;
    overflow: hidden;
    margin-inline-start: -2px; // aligns the pfp with content below

    .account-role {
      margin: 0 2px;
      padding: 4px 0;
      box-sizing: border-box;
      min-width: 90px;
      text-align: center;
    }

    &__buttons {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 55px;
      overflow: hidden;

      .button {
        flex-shrink: 1;
        white-space: nowrap;

        @media screen and (max-width: $no-gap-breakpoint) {
          min-width: 0;
        }
      }

      .icon-button {
        border: 1px solid lighten($ui-base-color, 12%);
        border-radius: 4px;
        box-sizing: content-box;
        padding: 2px;
      }
    }

    &__name {
      padding: 5px 10px;

      .account-role {
        vertical-align: top;
      }

      .emojione {
        width: 22px;
        height: 22px;
      }

      h1 {
        font-size: 16px;
        line-height: 24px;
        color: $primary-text-color;
        font-weight: 500;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        small {
          display: block;
          font-size: 14px;
          color: $darker-text-color;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;

          span {
            user-select: all;
          }
        }
      }
    }

    .spacer {
      flex: 1 1 auto;
    }
  }

  &__bio {
    overflow: hidden;
    margin: 0 -5px;

    .account__header__content {
      padding: 20px 15px;
      padding-bottom: 5px;
      color: $primary-text-color;
    }

    .account__header__joined {
      font-size: 14px;
      padding: 5px 15px;
      color: $darker-text-color;

      .columns-area--mobile & {
        padding-inline-start: 20px;
        padding-inline-end: 20px;
      }
    }

    .account__header__fields {
      margin: 0;
      border-top: 1px solid lighten($ui-base-color, 12%);

      a {
        color: lighten($ui-highlight-color, 8%);
      }

      dl:first-child .verified {
        border-radius: 0 4px 0 0;
      }

      .verified a {
        color: $valid-value-color;
      }
    }
  }

  &__extra {
    margin-top: 4px;

    &__links {
      font-size: 14px;
      color: $darker-text-color;
      padding: 10px 0;

      a {
        display: inline-block;
        color: $darker-text-color;
        text-decoration: none;
        padding: 5px 10px;
        font-weight: 500;

        strong {
          font-weight: 700;
          color: $primary-text-color;
        }
      }
    }
  }

  &__account-note {
    margin: 0 -5px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
    border-top: 1px solid lighten($ui-base-color, 12%);
    border-bottom: 1px solid lighten($ui-base-color, 12%);

    &__header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 5px;
      color: $darker-text-color;
    }

    &__content {
      white-space: pre-wrap;
      padding: 10px 0;
    }

    &__buttons {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      flex: 1 0;

      .icon-button {
        font-size: 14px;
        padding: 2px 6px;
        color: $darker-text-color;

        &:hover,
        &:active,
        &:focus {
          color: lighten($darker-text-color, 7%);
          background-color: rgba($darker-text-color, 0.15);
        }

        &:focus {
          background-color: rgba($darker-text-color, 0.3);
        }

        &[disabled] {
          color: darken($darker-text-color, 13%);
          background-color: transparent;
          cursor: default;
        }
      }

      .flex-spacer {
        flex: 0 0 5px;
        background: transparent;
      }
    }

    strong {
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
    }

    textarea {
      display: block;
      box-sizing: border-box;
      width: calc(100% + 20px);
      color: $secondary-text-color;
      background: $ui-base-color;
      padding: 10px;
      margin: 0 -10px;
      font-family: inherit;
      font-size: 14px;
      resize: none;
      border: 0;
      outline: 0;
      border-radius: 4px;

      &::placeholder {
        color: $dark-text-color;
        opacity: 1;
      }
    }
  }
}

.moved-account-banner,
.follow-request-banner,
.account-memorial-banner {
  padding: 20px;
  background: lighten($ui-base-color, 4%);
  display: flex;
  align-items: center;
  flex-direction: column;

  &__message {
    color: $darker-text-color;
    padding: 8px 0;
    padding-top: 0;
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 16px;
  }

  &__action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
  }

  .detailed-status__display-name {
    margin-bottom: 0;
  }
}

.follow-request-banner .button {
  width: 100%;
}

.account-memorial-banner__message {
  margin-bottom: 0;
}