//
// Users Lists
// --------------------------------------------------


// Fancy Web 9000.0 users cards list
//
//==
.users-cards {
  .row {
    margin-bottom: @line-height-computed;

    .user-card {
      background: @user-card-bg;
      border-radius: @border-radius-large;
      .box-shadow(@user-card-shadow 0px 0px 0px 2px);
      display: block;
      overflow: hidden;
      padding: 3px;
      position: relative;

      color: @text-color;

      img {
        border-radius: @border-radius-base;
        width: 100%;
      }

      .card-footer {
        background: fadeOut(@user-card-bg, 15%);
        position: absolute;
        bottom: 0px;
        padding: @padding-base-vertical @padding-base-horizontal;
        width: 100%;

        h4, small {
          word-wrap: break-word;
        }

        small {
          display: block;
          margin-top: @line-height-computed / -3;
          margin-bottom: @line-height-computed / 3;

          color: @text-color;
          font-size: @font-size-base;
        }
      }
    }

    .col-md-2, .col-md-1 {
      .user-card {
        .card-footer {
          background: fadeOut(@user-card-bg, 7%);
          padding: @padding-xs-vertical @padding-small-horizontal;

          h4 {
            font-size: @font-size-base;
          }

          small {
            font-size: @font-size-small;
          }
        }
      }
    }
  }

  a.user-card {
    &:hover {
      .box-shadow(@user-card-hover-shadow 0px 0px 0px 2px);

    }

    &:active {
      .box-shadow(@user-card-active-shadow 0px 0px 0px 2px);
    }
  }
}


// Users ranking
//
//==
.users-ranking {
  &>tbody {
    &>tr {
      &>td {
        vertical-align: middle;

        .avatar {
          border-radius: @border-radius-base;
        }

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

      &.highlight {
        color: @brand-accent;

        .item-title {
          &:link, &:visited {
            color: @brand-accent;
          }
        }
      }
    }
  }
}


// Compact users list for use in modals and stuff
//
//==
.users-list-compact {
  &>li {
    border-bottom: 1px solid @hr-border;
    padding: @line-height-computed / 2 0px;

    &:last-child {
      border-bottom: none;
    }

    img {
      border-radius: @border-radius-small;
      height: 24px;
    }

    .item-title {
      font-weight: bold;
    }

    .btn {
      margin-left: @line-height-computed / 2;
      margin-top: -3px;
    }
  }
}