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

vue and bootstrap

body{
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 0;
  @media (min-width:@screen-lg-desktop){
    //fix modal
    background-size: initial;
    background-position: 0 0;
  }
}

.lottery-main{
  position: relative;
  //margin-top:@bar-height + 10 + 34;
  margin-top:@bar-height + 10;
  @media(min-width:@screen-sm){
    margin-top:@banner-top + 10;
  }
}


.lottery-header{
  background-color: #68b7cd;
  #gradient > .directional(#64aed4,#6dc3c3,99deg);
  //position: relative;
  @media (min-width:@screen-sm){

    //margin-left: ceil((@grid-gutter-width / -2));
    //margin-right: ceil((@grid-gutter-width / -2));
    > div{
      padding-left: 0;
      padding-right: 0;
      > div{
        //margin-left: ceil((@grid-gutter-width / -2));

      }
      &:first-child{
        > div:first-child{
          height: 110px;
        }
      }
    }
  }
  @media (min-width:@screen-md){
    height: 110px;
    > div{
      &:first-child{
        > div:first-child{
          &:after{
            content: '';
            position: absolute;
            border-right: 1px dashed fade(#fff,40);
            height: 98px;
            right: 0px;
            top: 6px;
          }
        }
      }
    }
  }
  @media (max-width: @screen-sm-max) and(min-width: @screen-sm){
    > div{
      &:first-child{
        //margin-bottom: 5px;
      }
      &:last-child > div{
        margin-left: 0;
        //height: 200px;
      }
    }
  }
}

@media (min-width: @screen-sm){
  .lottery-title-bar{
    background: #767676;
    height: 16px;
    border:3px solid #fff;
    border-radius:10px;
    margin-left: -35px;
    margin-right: -35px;
  }
}



.lottery-body{
  background-color: #fff;
  //background-image: -webkit-linear-gradient(top, fade(#000,35) 0, transparent 15px);
  position: relative;
  .label{
    color: inherit;
  }
  @media (min-width:@screen-sm){
    padding-top: 34px;
    margin-top: -8px;
    &:after{
      content: '';
      background-repeat:repeat-x;
      position: absolute;
      left: 0;
      right: 0;
    }
    .lottery-body_t_shadow{
      box-shadow:0 10px 15px rgba(0,0,0,.65);
      position: absolute;
      top: -8px;
      left: -5px;
      right: -5px;
      height: 5px;
    }
  }
  @media (max-width: @screen-xs-max){
    //padding-left: ceil((@grid-gutter-width / 2));
    //padding-right: ceil((@grid-gutter-width / 2));
  }
}

.lottery-body{
  &:after{
    height: 10px;
    background-image: url(../../img/lottery/lotto_bd_landscape_decorate.png);
    bottom: -10px;
  }
  @media (min-width:@screen-sm){
    margin-bottom: 60px;
    box-shadow:1px 5px 18px fade(#000,27);
    padding-left: 13px;
    padding-right: 13px;
  }
}

.play-content{
  padding: 6px 0 20px 0;
}
.lottery-betting{
  border:solid #d5d5d5;
  border-width:0 1px 1px;
  > .loader{
    height: 400px;
    .display(flex);
    .align-items(center);
    .justify-content(center);
    .ball-rotate{
      > div{
        &,&:before,&:after{
          background: @brand-warning;
        }
      }
    }
  }

  @media (max-width:@screen-xs-max){
    & + div{
      > div{
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }
}

.lottery-trend-btn{
  margin-left: 10px;
  border-color:fade(#fff,60);
  border-radius:0;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 6px;
  padding-right: 6px;
  &,&:hover,&:focus{
    color: #fff;
  }
}

.lottery-logo{
  display: none;
  @media (min-width:@screen-sm){
    display: block;
    transition:.5s;
    .text-hide();
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    right: 0;
    [data-lottery="ssc"] &{
      top: 17px;
    }
  }
}

.fixed-table-container{
  border-color:@gray-light;
}