lixin-web/webapp/less/page/index.less

vue and bootstrap

.titlebar{
  font-size:@font-size-medium;
  &,small{
    color: @brand-primary;
  }
  h2{
    font-size:@font-size-large;
  }
  ul{
    display: none;
  }

}


@media (min-width:@screen-md){
  .titlebar-line{
    position: absolute;
    height:2px;
    width: 154px;
    background: #80caf1;
    margin-top: 93px/2 - 1;
  }
  .titlebar-lr{
    .titlebar-line{
      right: ~'calc(50% + 80px)';
    }
    h2{
      margin-left: 192px;
      float: left;
    }
  }
  .titlebar-rl{
    .titlebar-line{
      left: ~'calc(50% + 80px)';
    }
    h2{
      float: right;
      margin-right: 192px;
    }
  }
  .titlebar{
    p{
      margin-top: 0px;
      padding-top: 35px;
      padding-left: 220px;
    }
  }

}

.games-lobby{
  background: #fff;
  padding-top: 10px;
  @media (min-width:@screen-sm){
    padding-top: 40px;
  }

  figure{
    margin-bottom: 15px;
    color: #fff;
    display: block;
    overflow:hidden;
    img{
      width: 100%;
    }
    .btn{
      font-size:@font-size-medium;
      padding-top: 1px;
      padding-bottom: 1px;
      float: right;
      margin-top: 5px;
      .fa{
        width: 20px;
      }
    }
    i{
      font-size:34px;
      margin-right: 5px;
    }

    h3{
      margin: 0;
      font-size:@font-size-medium;
    }
  }
}

.games-live-launch{
  li{
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
  }

}

.site-features{
  font-size:@font-size-medium;
  li{
    text-align: center;
    div{
      margin:auto;
    }
  }
  h4{
    margin-top: 20px;
  }
}

.site-help{
  background: @brand-primary;
  &,a{
    color: fade(#fff,80);
  }
  a{
    &:hover,&:focus{
      text-decoration: underline;
    }
  }
  i{
    font-size:@font-size-large;
    .icon-alignment();
    margin-right: 8px;
    width: 28px;
    border-right:1px solid fade(#fff,40);
  }
  .icon-help-service{
    display: inline-block;
    margin-left: -2px;
  }
  p{
    line-height: 27px;
    max-width:248px;
    margin-bottom: 20px;
    & + ul{
      li{
        line-height: 16px;
        height: 16px;
        margin-bottom: 10px;
      }
    }
  }
  h4{
    font-size: 20px;
    position: relative;
    padding-bottom: 21px;
    margin-bottom: 30px;
    &:after{
      width: 34px;
      height: 3px;
      background: #fff000;
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
    }
    & + ul{
      li{
        margin-bottom: 20px;
      }
    }
  }
  @media(min-width:@screen-sm){
    .row{
      > li{
        height: 289px;
        border-left:1px solid fade(#fff,10);
        padding-left: 35px;
        &:first-child{
          border-left:none;
          padding-left: 0;
        }
      }
    }
  }
}


.icon-licence{
  .text-hide();
  margin-bottom: 30px;
  background-image: url(../../img/icon-licence.png);
  width: 251px;
  height: 45px;
}