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

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

  .userInfo {
    position: relative;
    padding: .5rem .4rem;

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

    .vote {
      position: absolute;
      top: .5rem;
      right: .4rem;
      width: 1rem;
      height: 1.12rem;
      line-height: 1.12rem;
      text-align: center;
      color: @orange;
      font-size: .4rem;
    }

    .info, .bio {
      margin: 0 1.1rem 0 1.22rem;
      height: .56rem;
      line-height: .56rem;
      color: #FFF;
      font-size: .3rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .info {
      span:nth-of-type(1) {
        font-weight: bold;
      }
      span:nth-last-of-type(1) {
        font-size: .28rem;
      }
    }
  }

  .slogan {
    padding: 0 .4rem;
    line-height: .6rem;
    font-size: .32rem;
    color: #FFF382;
  }

  .voteBtn {
    display: block;
    margin: .4rem auto 0 auto;
    width: 2rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    color: #FFF;
    font-size: .3rem;
    background: @blue-darken;

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

.voteList {
  display: none;
  margin-top: .8rem;

  .list {
    margin-top: .4rem;
    li {
      position: relative;
      border-bottom: .02rem solid #EEE;

      &:nth-last-of-type(1) {
        border-bottom: none;
      }

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

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

        .title, .bio {
          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;
        }
      }

      .vote {
        position: absolute;
        top: .3rem;
        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%);
          }
        }
      }
    }
  }

  .title {
    padding: 0 .2rem;

    .left, .right, .center {
      float: left;
      width: 2rem;
      height: .5rem;
      line-height: .5rem;
      font-size: 0;
    }

    .center {
      margin: 0 .1rem;
      width: 1.8rem;
      text-align: center;
      color: #FFF;
      font-size: .24rem;
      background: @orange;
      border-radius: .5rem;
    }

    .left {
      span:nth-of-type(1) {
        display: inline-block;
        width: 1.9rem;
        height: .02rem;
        background: @orange;
        vertical-align: middle;
      }
      span:nth-of-type(2) {
        display: inline-block;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
        background: @orange;
        vertical-align: middle;
      }
    }

    .right {
      span:nth-of-type(1) {
        display: inline-block;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
        background: @orange;
        vertical-align: middle;
      }
      span:nth-of-type(2) {
        display: inline-block;
        width: 1.9rem;
        height: .02rem;
        background: @orange;
        vertical-align: middle;
      }
    }
  }
}