Misago/emberapp/app/styles/misago/user-card.less

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


// Shape card
.user-card {
  background-color: @user-card-bg;
  border-radius: @user-card-border-radius;

  margin: @line-height-computed / 2 0px;
  .shadow-2dp();

  .media {
    padding: @padding-base-horizontal;
  }
}


// Avatar
.user-card .media-left {
  padding-right: @line-height-computed / 2;

  .user-avatar {
    border-radius: @avatar-radius-small;
    height: 44px;
    width: auto;
  }
}


// Username and status
.user-card .media-body {
  padding: 4px 0px;

  h4 {
    margin: 0px;

    color: @user-card-username-color;
  }

  p {
    margin-top: @line-height-computed / 3;
    margin: 0px;

    color: @user-card-status-color;
    font-size: @font-size-small;

    .user-state {
      display: inline;
    }
  }
}


// Footer and nav
.user-card footer {
  background-color: @user-card-footer-bg;
  border-top: 1px solid @user-card-footer-border;
  border-radius: 0px 0px @user-card-border-radius @user-card-border-radius;
  padding: @padding-base-vertical;

  nav {
    display: table;
    width: 100%;
    table-layout: fixed;

    ul {
      display: table-row;

      li {
        display: table-cell;
      }
    }
  }
}


// Make user card look bigger on large displays
@media (min-width: @screen-md-min) {
  .user-card.full-size {
    .media {
      padding-bottom: 0px;

      &>div {
        display: block;
        width: 100%;

        text-align: center;
      }
    }

    .media-left {
      padding: 0px;

      .user-avatar {
        border-radius: @avatar-radius;
        margin-top: @line-height-computed;

        width: 80%;
        height: auto;
      }
    }

    .media-body {
      margin: @line-height-computed * .75 0px;
      padding: 0px @padding-base-horizontal;

      h4 {
        margin-bottom: @line-height-computed / 4;

        font-size: @font-size-large;
      }
    }
  }
}


// UI preview
.ui-preview.user-card {
  .media {
    background-color: @user-card-bg;

    p {
      margin-top: 4px;

      font-size: @font-size-small - 4px;
    }

    .ui-preview-img {
      border-radius: @avatar-radius-small;

      .user-avatar {
        margin: 0px;
      }
    }
  }

  footer {
    border-top: none;
    margin-top: 1px;
  }
}

@media (min-width: @screen-md-min) {
  .ui-preview.user-card.full-size {
    .media {
      .ui-preview-img {
        border-radius: @avatar-radius;
        margin-top: @line-height-computed;

        width: 80%;

        .user-avatar {
          margin: 0px;
          width: 100%;
          height: auto;
        }
      }

      .media-body {
        margin: @line-height-computed * .8 0px;

        p {
          margin-top: 4px;

          font-size: @font-size-small - 2px;
        }
      }
    }
  }
}