Misago/frontend/style/misago/users-lists.less

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


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

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

    .status-icon {
      width: 16px;
      height: 16px;

      margin-right: 2px;

      font-size: 16px;
      line-height: 16px;
    }
  }

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


// 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;
      }

      .user-status {
        margin-right: 4px;

        .status-icon {
          position: relative;
          top: -1px;

          &.ui-preview {
            position: relative;
            top: 1px;
          }
        }
      }
    }

    .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.ui-preview {
    .rank-user {
      .user-status {
        .status-icon {
          position: relative;
          top: 2px;
        }
      }
    }
  }

  .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;
      }

      .user-status {
        margin-right: @line-height-computed * .6;

        .status-icon {
          position: relative;
          top: -1px;

          &.ui-preview {
            top: 2px;
          }
        }

        .status-label {
          font-size: @font-size-small;
          line-height: @font-size-small;
        }
      }

      .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;
      }
    }
  }
}