Misago/frontend/style/misago/user-card.less

//
// User Card
// --------------------------------------------------


.user-card {
  background: @body-bg;
  border: 1px solid @gray-lighter;
  border-radius: @border-radius-large;
  margin-bottom: @line-height-computed;
  overflow: hidden;

  .user-card-bg-image{
    background: @body-bg;

    &>img {
      display: none;
    }
  }

  .user-details {
    padding: @padding-base-vertical @padding-base-horizontal;
    overflow: auto;

    .user-avatar {
      float: left;

      img {
        width: 60px;
        height: 60px;
      }
    }

    .user-name {
      margin-left: 76px;

      .item-title {
        font-size: @font-size-large;
      }
    }

    .user-subscript {
      margin-left: 76px;
      margin-bottom: 0px;
      overflow: auto;

      color: @text-muted;
      font-size: @font-size-base * 0.66;

      &>* {
        display: block;
        float: left;
        height: auto;

        padding: 0px;
        margin: 0px;
        margin-right: 8px;

        .status-icon {
          margin-right: 3px;

          position: relative;
          bottom: 1px;
        }

        .ui-preview, .ui-preview-text {
          height: @font-size-base * 0.66;

          position: relative;
          bottom: 0px;

          font-size: @font-size-base * 0.66;
          line-height: @font-size-base * 0.66;
        }

        .status-icon.ui-preview {
          width: @font-size-base * 0.66;
          margin-right: 0px;
          bottom: 0px;
        }
      }
    }
  }

  .user-card-stats {
    border-top: 1px solid @gray-lighter;
    display: table;
    table-layout: fixed;
    width: 100%;

    ul {
      display: table-row;

      li {
        display: table-cell;
        overflow: auto;
        padding: @padding-base-vertical @padding-base-horizontal;

        font-size: @font-size-small;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}

.user-card.ui-preview {
  .user-name .ui-preview-text {
    height: @font-size-large;
  }

  .user-card-stats .ui-preview-text {
    height: @font-size-small;
    width: 14px;

    position: relative;
    top: 0px;

    font-size: @font-size-small;
    line-height: @font-size-small;
  }
}


// compact down user card on mobile
@media screen and (max-width: @screen-sm-max) {
  .user-card {
    .user-details {
      .user-avatar img {
        width: 46px;
        height: 46px;
      }

      .user-name {
        margin-left: 58px;
        margin-top: @padding-small-vertical;
        margin-bottom: @padding-base-vertical;
      }

      .user-subscript {
        margin-left: 58px;
      }
    }
  }
}