@import "reset";
@import "animate";
@import "common";

.headerBox {
  background: @blue-moderate;
  border-bottom: .04rem solid @blue-darken;

  .title {
    display: block;
    margin: 0 auto;
    width: 5rem;
    height: 3.4rem;
    .animation(@name: tada);
  }

  .sign {
    display: block;
    margin: .24rem auto 0 auto;
    width: 2.2rem;
    height: .7rem;
    line-height: .7rem;
    text-align: center;
    color: #FFF;
    font-size: .32rem;
    background: @orange;
    border-radius: .7rem;
    box-shadow: 0 .06rem rgba(49, 49, 49, 0.13);

    &:active {
      background: darken(@orange, 15%);
    }
  }

  .search {
    position: relative;
    margin: .24rem auto;
    width: 4.2rem;
    height: .7rem;

    input {
      display: block;
      box-sizing: border-box;
      padding: 0 1.2rem 0 .3rem;
      width: 100%;
      height: 100%;
      line-height: .7rem;
      border: .02rem solid @blue-darken;
      border-radius: .7rem;
      font-size: .28rem;
    }

    .searchBtn {
      position: absolute;
      top: 0;
      right: 0;
      box-sizing: border-box;
      width: 1rem;
      height: .7rem;
      line-height: .65rem;
      text-align: center;
      border: .02rem solid @blue-darken;
      background: @blue-darken;
      color: #FFF;
      font-size: .32rem;
      border-radius: 0 .7rem .7rem 0;

      &:active {
        background: darken(@blue-darken, 15%);
      }
    }
  }
}

.userList {
  li {
    position: relative;
    margin-top: .1rem;
    background: #FFF;

    a {
      display: block;
      box-sizing: border-box;
      padding: .34rem .2rem;
      width: 100%;
      height: 100%;

      .picture {
        position: absolute;
        top: .34rem;
        left: .2rem;
        width: 1.12rem;
        height: 1.12rem;
        border-radius: 50%;
      }

      .title, .slogan {
        margin: 0 1.5rem 0 1.22rem;
        height: .56rem;
        line-height: .56rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: .3rem;
        color: #000;
      }

      .title {
        span {
          margin: 0 .05rem;
        }
        span:nth-last-of-type(1) {
          font-size: .28rem;
          color: #999;
        }
      }
    }

    .vote {
      position: absolute;
      top: .34rem;
      right: .2rem;
      width: 1.4rem;
      height: 1.12rem;

      .voteNum {
        display: block;
        margin-top: .1rem;
        line-height: .4rem;
        text-align: center;
        font-size: .28rem;
        color: @orange;
      }

      .voteBtn {
        display: block;
        margin-top: .1rem;
        padding: 0;
        width: 1.4rem;
        height: .5rem;
        line-height: .5rem;
        text-align: center;
        color: #FFF;
        font-size: .24rem;
        background: @blue-darken;
        border-radius: .5rem;
        box-shadow: 0 .04rem rgba(127, 212, 245, 0.37);

        &:active {
          background: darken(@blue-darken, 15%);
        }
      }
    }
  }

  .tip {
    display: none;
    line-height: 1.5rem;
    text-align: center;
    font-size: .34rem;
    color: #999;
  }
}