Misago/frontend/style/misago/active-posters.less

//
// Active posters list
// --------------------------------------------------


.active-posters {
  li {
    display: block;
    overflow: auto;
  }

  .rank-user {
    .rank-name, .user-title {
      font-size: @font-size-small;
    }
  }

  .rank-position, .rank-posts-total, .rank-posts-counted {
    small {
      color: @text-muted;
    }
  }
}


// User status
.active-posters .user-status {
  font-size: @font-size-small;

  @media screen and (min-width: @screen-md-min) {
    margin-right: @line-height-computed * .6;
  }

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

    position: relative;
    bottom: 2px;

    &.ui-preview {
      width: @font-size-small;
    }
  }

  .ui-preview {
    height: @font-size-small;
    position: relative;

    top: 2px;
    bottom: auto;
  }
}


// Compact displays
@media screen and (max-width: @screen-sm-max) {
  .active-posters {
    .rank-user-avatar {
      float: left;

      img {
        width: 36px;
        height: 36px;

        position: relative;
        top: 3px;
      }
    }

    .rank-user {
      float: left;
      margin-left: @line-height-computed * .66;
      width: 40%;

      .user-name .item-title {
        margin-top: 4px;

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

      .rank-name {
        font-weight: normal;
      }
    }

    .rank-position, .rank-posts-total, .rank-posts-counted {
      float: right;
      width: 40%;

      position: relative;
      bottom: 2px;

      line-height: @font-size-base;

      strong, small {
        display: inline-block;

        font-size: @font-size-base * .66;
        line-height: @font-size-base * .66;
      }

      strong {
        width: 34px;
        padding-right: 4px;

        text-align: right;
        font-weight: normal;
      }
    }
  }

  .active-posters.ui-preview {
    .rank-user .rank-name {
      position: relative;
      bottom: 1px;

      .ui-preview-text {
        height: @font-size-small;
      }
    }

    .rank-position, .rank-posts-total, .rank-posts-counted {
      strong {
        position: relative;
        bottom: 3px;

        .ui-preview-text {
          height: @font-size-base * .66;
        }
      }
    }
  }
}


// Full displays
@media screen and (min-width: @screen-md-min) {
  .active-posters {
    li>* {
      float: left;
      padding-top: 4px;
    }

    .rank-user-avatar {
      padding-top: 0px;
    }

    .rank-user {
      padding-top: 0px;
      padding-left: @line-height-computed * .8;
      width: 25%;

      .user-name .item-title {
        margin-top: 2px;

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

      .rank-name {
        margin-right: @line-height-computed * .6;
      }
    }

    .rank-position {
      width: 23%;
    }

    .rank-posts-total {
      width: 23%;
    }

    .rank-posts-counted {
      width: 23%;
    }

    .rank-position, .rank-posts-total, .rank-posts-counted {
      font-size: @font-size-large;
      font-weight: bold;
      text-align: center;

      strong {
        display: block;
      }

      small {
        display: block;

        font-size: @font-size-small;
        font-weight: normal;
      }
    }
  }
}