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

vue and bootstrap

@import "../variables";
@import "../mixins";

@import "../plugins/imagehover/_mixins";

@figcaption-padding: 30px;
@border-color: #ffffff;
@border-margin: 5px;
@border-width: 4px;
@transition-duration: 0.35s;
@shift-distance: 10px;

[class^='imghvr-'],[class*=' imghvr-']{
  position: relative;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  .translateZ();
  > img {
    vertical-align: top;
    max-width: 100%;
  }
  figcaption {
    position: absolute;
    padding: 36px;
    .fill;
  }
  a {
    .fill;
    z-index: 1;
  }
}

[class^='imghvr-'], [class*=' imghvr-'], [class^='imghvr-']:before, [class^='imghvr-']:after, [class*=' imghvr-']:before, [class*=' imghvr-']:after,
[class^='imghvr-'] *, [class*=' imghvr-'] *, [class^='imghvr-'] *:before, [class^='imghvr-'] *:after, [class*=' imghvr-'] *:before, [class*=' imghvr-'] *:after {
  transition:@transition-duration ease
}
[class^='imghvr-zoom-out'], [class*=' imghvr-zoom-out'] {
  > img {
  }
  figcaption {
    .transform(scale(0.5));
    .transform-origin(50%,50%);
    opacity: 0;
  }
  &:hover, &.hover {
    figcaption {
      .transform(scale(1));
      opacity: 1;
      .transition-delay(@transition-duration);
    }
  }
}
.imghvr-zoom-out-right {
  &:hover, &.hover {
    > img {
      .animation(imghvr-zoom-out-right @transition-duration * 1.15 linear);
      .animation-iteration-count(1);
      .animation-fill-mode(forwards);
    }
  }
}
@keyframes imghvr-zoom-out-right
{
  50%
  {
    .transform(scale(0.8), translateX(0%));
    opacity: 0.5;
  }
  100%
  {
    .transform(scale(0.8), translateX(150%));
    opacity: 0.5;
  }
}

[class^='imghvr-flip-'], [class*=' imghvr-flip-'] {
  .perspective(50em);
  img {
    backface-visibility: hidden;
  }
  figcaption {
    opacity: 0;
  }
  &:hover {
    > img {
      opacity: 0;
    }
    figcaption {
      opacity: 1;
      .transition-delay(@transition-duration * 0.4);
    }
  }
}

.imghvr-flip-diag-2 {
  figcaption {
    .rotate3d(1,1,0,100);
  }
  &:hover {
    > img {
      .rotate3d(-1,-1,0,100);
    }
    figcaption {
      .rotate3d(0,0,0,0);
    }
  }
}

[class^='imghvr-hinge-'],[class*=' imghvr-hinge-'] {
  .perspective(50em);
  figcaption {
    opacity: 0;
    z-index: 1;
  }
  &:hover {
    img {
      opacity: 0;
    }
    figcaption {
      opacity: 1;
      .transition-delay(@transition-duration * 0.6);
    }
  }
}

.imghvr-hinge-down {
  img {
    .transform-origin(50%,100%);
  }
  figcaption {
    .transform(rotateX(-90deg));
    .transform-origin(50%,-50%);
  }
  &:hover {
    > img {
      .rotateX(90deg);
      opacity: 0;		}
    figcaption {
      .transform(rotateX(0));
    }
  }
}

[class^='imghvr-fold'], [class*=' imghvr-fold'] {
  .perspective(50em);
  img {
    .transform-origin(50%,0%);
  }
  figcaption {
    z-index: 1;
    opacity: 0;
  }
  &:hover {
    > img {
      opacity: 0;
      .transition-delay(0);
    }
    figcaption {
      .transform(rotateX(0), translate3d(0,0%, 0), scale(1));
      opacity: 1;
      .transition-delay(@transition-duration * 0.6);
    }
  }
}

.imghvr-fold-right {
  .perspective(50em);
  > img {
    .transform-origin(100%,50%);
  }
  figcaption {
    .transform(rotateY(-90deg), translate3d(50%,0%,0), scale(0.6));
    .transform-origin(0,50%);
  }
  &:hover {
    > img {
      .transform(rotateY(90), scale(0.6), translateX(-50%));
    }
  }
}

.imghvr-blur {
  figcaption {
    opacity: 0;
  }
  &:hover {
    > img {
      .blur(30px);
      .scale(1.2);
      opacity: 0;
    }
    figcaption {
      opacity: 1;
      .transition-delay(@transition-duration * 0.6);
    }
  }
}

.titlebar{

    position: relative;
  margin-left:auto;
  margin-right:auto;
    height: 93px;
    h2{
      margin-top: 26px;
      div{
        margin-bottom: 5px;
      }
    }
    i{
      position: absolute;
      margin:auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    ul{
      position: absolute;display: block;
      margin-top: 36px;
      left: ~'calc(50% + 80px)';
    }
    li{
      float: left;
      margin-right: 35px;
    }
}

.games-live-launch{
  &,figcaption{
    background: @brand-warning;
  }
}

.games-sports-launch{
  &,figcaption{
    background: @brand-info;
  }
}

.games-lottery-launch{
  &,figcaption{
    background: @brand-primary;
  }
}

.games-game-launch{
  &,figcaption{
    background: #ecc800;
  }

}

.games-poker-launch{
  &,figcaption{
    background: @brand-success;
  }
}

.games-lobby{
  .titlebar{
    margin-bottom: 40px;
    & + div{
      margin-left: ceil((@grid-gutter-width / -2));
      margin-right: floor((@grid-gutter-width / -2));
      > div{
        &:first-child{
          padding-right: 5px;
        }
        &:nth-child(2){
          padding-left: 10px;
          padding-right: 10px;
        }
        &:last-child{
          padding-left: 5px;
        }
        &:first-child,&:last-child{
          figure{
            margin-bottom: 19px;
          }
        }
      }
    }
  }
  .games-live-launch{
    i{
      padding-top: 10px;
    }
  }
  figure{
    text-align:center;
    i{
      font-size: 60px;
      margin-right: 0;
      padding-top: 22px;
      display: inline-block;
    }
    h3{
      margin-bottom: 10px;
      margin-top: 10px;
    }
    .btn{
      padding-top: 3px;
      padding-bottom: 3px;
      margin-top: 0;
      font-size:@font-size-base;
      padding-right: 30px;
      float: none;
      margin-top: 15px;
    }
    p {
      text-align: left;
      line-height: 20px;
    }
  }
  .games-game-launch{
    i {
      font-size: 50px;
    }
  }
  .games-sports-launch{
    i {
      font-size: 76px;
      margin-top: -20px;
    }
  }
}

.game-download-banner{
  height: 120px;
  background-image: url(../../img/index_download.jpg);
  background-position: 50% 0;
  margin-top: 55px - 19;
  overflow: hidden;
  color: #fff;
  font-size: 23px;
  margin-bottom: 45px;
  .btn{
    color: #fff;
    border-color:#fff;
    font-size:@font-size-large;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 35px;
    padding-right: 58px;
    padding-left: 20px;
    margin-left: 20px;
    i{
      font-size:1.5em;
      margin-right: 9px;
      .icon-alignment();
    }

    span{
      width: 38px;
    }
  }
  .container > div{
    float: left;
    &:first-child{
      //background-image: url(../../img/download_handle.png);
      width: 154px;
      height: 115px;
      margin-top: 10px;
      margin-left: 15px;
      margin-right: 25px;
      & + div{
        margin-top: 20px;
        span{
          color: #fff000;
        }
      }
    }
  }
  .pull-right{
    margin-top: 42px;
  }
  small{
    display: block;
    font-size: @font-size-medium;
    margin-top: 10px;
  }

}

.site-features{
  margin-bottom: 20px;
  .titlebar{
    margin-bottom: 56px;
  }
}

.site-promotions{
  height: 463px;
  padding-top: 70px;
  background-position: 50% 0;

}

.footer{
  .imoon-top{
    background: #fff000;
    color: @gray-base;
  }
}

.el-tooltip__popper{
  &.is-ft-tooltip{
    background: #fff000;
    color: @gray-base;
    &[x-placement^=top] .popper__arrow{
      &,&:after{
        border-top-color: #fff000;
      }
    }
  }
}

.site-help{
  padding-top: 56px;
  padding-bottom: 50px;
  border-bottom:1px solid fade(#fff,10);
}