superstar-dice/_src/components/table/style.scss

.rank-table{
  margin: px2rem(58) auto px2rem(100) auto;
  .game-table-border {
    width: px2rem(1300);
    margin: 0 auto ;
    background: #514391;
    padding: px2rem(6) 0;
    border-radius: 20px;
  }
  .game-table-bg{
    margin: 0 auto; 
    width: px2rem(1248);
    padding: 0 px2rem(15) px2rem(15);
    background: #25405e;
    border-radius: 20px;
    border: 6px solid #1a274e;
  }
  .player-name{
    display: inline-block;
    width: px2rem(146);
    text-align: left;
  }
  .table-nav{
    display: flex;
    justify-content: center;
    button{
      background: url('../../assets/but_tit01_y.png') no-repeat;
      background-size: 100%;
      width: px2rem(190);
      height: px2rem(64);
      display: flex;
      align-items: center;
      justify-content: center;
      outline: none;
      cursor: pointer;
      text-transform: uppercase;
      border: none;
      font-size: px2rem(24);
      color: #75aae4;
      position: relative;
      margin: px2rem(20) px2rem(30);
      &.active{
        color: #ffffff;
        background: url('../../assets/but_tit01_x.png') no-repeat;
        background-size: 100%;
      }
    }
  }
  table{
    width: px2rem(1240);
    margin: 0 auto;
    color: #ffffff;
    background: #25405e;
    text-align: center;
    table-layout: fixed;
    border-collapse:collapse;
    &.en-lang{
      .type{
        font-size: px2rem(16);
        margin: 0 px2rem(2);
      }
      .dice{
        margin: 0 px2rem(2);
      }
    }
    tr{
      &:nth-child(odd){
        background-color: #1b3048;
        td:first-child{
          border-top-left-radius: 12px;
          border-bottom-left-radius: 12px;
        }
        td:last-child{
          border-top-right-radius: 12px;
          border-bottom-right-radius: 12px;
        }
      }
    }
    th{
      font-size: px2rem(18);
      color: #75aae4;
      padding: px2rem(20);
      font-weight: normal;
    }
    td{
      font-size: px2rem(18);
      padding: px2rem(12) px2rem(8);
      .money-icon{
        background: url('../../assets/icon_eos.png');
        background-size: 100%;
        display: inline-block;
        vertical-align: middle;
        width: px2rem(16);
        height: px2rem(24);
        background-size: contain;
        margin-right: px2rem(4);
      }
      .link{
        color: #ffffff;
        text-decoration: none;
        &:hover{
          border-bottom: 1px solid #ffffff;
        }
        &.win-amount{
          color: #e8d86c;
        }
      }
      // &.my-belt {
      //   // span
      // }
      &.result{
        font-size: px2rem(20);
        .link{
          font-size: px2rem(18);
          color: #e8d86c;
          &:hover{
            border-bottom: 1px solid #f1e000;
          }
        }
      }
      &.history-td{
        color: #ffffff;
        text-shadow: none;
      }
      &.left {
        text-align: left;
        position: relative;
        &.enable{
          cursor: pointer;
        }
      }
    }
  }
  .state{
    font-size: px2rem(16);
    text-shadow: none;
    text-decoration: none;
    &.tranffer-0{
      color: #cd0400;
    }
    &.tranffer-1{
      color: #126ae4;
    }
    &.tranffer-2{
      color: #23b14d;
    }
    &.tranffer-3{
      color: #cd0400;
    }
  }
  .type{
    display: inline-block;
    margin: 0 px2rem(4);
    min-width: px2rem(20);
  }
  .dice{
    display: inline-block;
    vertical-align: middle;
    width: px2rem(30);
    height: px2rem(30);
    margin: 0 px2rem(4);
  }
  .load-more{
    text-align: center;
    font-size: px2rem(26);
    color: #ffffff;
    margin-top: px2rem(20);
  }
  .vip-level{
    display: inline-block;
    display: inline-block;
    width: px2rem(46);
    height: px2rem(38);
    vertical-align: middle;
  }
  @for $i from 1 through 10 {
    .icon-level#{$i} {
      background: url('../../assets/icon-level#{$i}.png') no-repeat;
      background-size: 100%;
    }
  }
  &.td-underline{
    .enable{
      &:hover{
        &::after{
          content: '';
          position: absolute;
          left: px2rem(16);
          width: px2rem(200);
          bottom: px2rem(10);
          height: 1px;
          background-color: #ffffff;
        }
      }
    }
  }
}
.dice-1{
  background: url('../../assets/dice-1.png') no-repeat;
  background-size: 100%;
}
.dice-2{
  background: url('../../assets/dice-2.png') no-repeat;
  background-size: 100%;
}
.dice-3{
  background: url('../../assets/dice-3.png') no-repeat;
  background-size: 100%;
}
.dice-4{
  background: url('../../assets/dice-4.png') no-repeat;
  background-size: 100%;
}
.dice-5{
  background: url('../../assets/dice-5.png') no-repeat;
  background-size: 100%;
}
.dice-6{
  background: url('../../assets/dice-6.png') no-repeat;
  background-size: 100%;
}
.dice-round-1 {
  animation: dice-around-1 linear infinite .5s;
}
.dice-round-2 {
  animation: dice-around-2 linear infinite .5s;
}
.dice-round-3 {
  animation: dice-around-3 linear infinite .5s;
}

@keyframes dice-around-1 {
  0% {  
    background: url(../../assets/dice-round-1.png) center center / 100% 100% ;
  }
  25% {
    background: url(../../assets/dice-round-2.png) center center / 100% 100% ;

  }
  50% {
    background: url(../../assets/dice-round-3.png) center center / 100% 100% ;

  }
  75% {
    background: url(../../assets/dice-round-4.png) center center / 100% 100% ;

  }
  100% {
    background: url(../../assets/dice-round-1.png) center center / 100% 100% ;

  }
}
@keyframes dice-around-2 {
  0% {  
    background: url(../../assets/dice-round-2.png) center center / 100% 100% ;
  }
  25% {
    background: url(../../assets/dice-round-3.png) center center / 100% 100% ;

  }
  50% {
    background: url(../../assets/dice-round-4.png) center center / 100% 100% ;

  }
  75% {
    background: url(../../assets/dice-round-1.png) center center / 100% 100% ;

  }
  100% {
    background: url(../../assets/dice-round-2.png) center center / 100% 100% ;

  }
}
@keyframes dice-around-3 {
  0% {  
    background: url(../../assets/dice-round-3.png) center center / 100% 100% ;
  }
  25% {
    background: url(../../assets/dice-round-4.png) center center / 100% 100% ;

  }
  50% {
    background: url(../../assets/dice-round-1.png) center center / 100% 100% ;

  }
  75% {
    background: url(../../assets/dice-round-2.png) center center / 100% 100% ;

  }
  100% {
    background: url(../../assets/dice-round-3.png) center center / 100% 100% ;
  }
}

.moblie-list{
  display: none;
  .list-item{
    margin: px2rem(10) px2rem(10) px2rem(20);
    background-color: #314e6e;
    padding-bottom: px2rem(10);
    .top{
      height: px2rem(52);
      line-height: px2rem(52);
      background-color: #415b7a;
      color: #ffffff;
      font-size: px2rem(24);
      padding-left: px2rem(10);
      .amount{
        float: right;
        margin-right: px2rem(10);
      }
    }
    .content{
      padding: px2rem(16) px2rem(16) px2rem(8);
      padding-right: 0;
      color: #ffffff;
      font-size: 0;
    }
    .bottom{
      height: px2rem(40);
      line-height: px2rem(40);
      text-align: right;
      font-size: px2rem(20);
      color: #c0c5cc;
      padding-right: px2rem(10);
    }
    .m-dice-item{
      display: inline-block;
      vertical-align: top;
      width: px2rem(30);
      height: px2rem(30);
      margin-right: px2rem(10);
    }
    .type{
      display: inline-block;
      margin: 0 px2rem(6);
      font-size: px2rem(28);
    }
    .right{
      float: right;
      font-size: px2rem(24);
      margin-right: px2rem(12);
      em{
        color: #e8d86c;
      }
      .status{
        color: #23b14d;
        display: inline-block;
        margin-left: px2rem(6);
      }
      .game-eos-icon{
        margin-right: px2rem(10);
      }
    }
  }
  .game-eos-icon{
    transform: scale(1.3);
    margin-left: px2rem(10);
    vertical-align: middle;
  }
}
@media #{$phone} {
  .moblie-list{
    display: block;
  }
  .rank-table{
    .game-table-border{
      width: 100%;
      border-radius: 10px;
    }
    .game-table-bg{
      width: 100%;
      box-sizing: border-box;
      border-radius: 10px;
      padding: 0;
    }
    table{
      display: none;
    }
  }
}

.live-table{
  // td{
  //   &:nth-child(3) {
  //     text-align: left;
  //   }
  // }
  // table-layout:fixed;
  // th{
  //   &:nth-child(4) {
  //     width: px2rem(100);
  //   }
  // }
  // td{
  //   &:nth-child(4) {
  //     width: px2rem(100);
  //   }
  // }
  &.en-lang{
    td{
      &:nth-child(3) {
        font-size: px2rem(16);
      }
    }
  }
}
.huge-table{
  // table-layout:fixed;
  // th{
  //   &:nth-child(5) {
  //     width: px2rem(100);
  //   }
  // }
  // td{
  //   &:nth-child(4) {
  //     text-align: left;
  //   }
  //   &:nth-child(5) {
  //     width: px2rem(100);
  //   }
  // }
  &.en-lang{
    td{
      &:nth-child(4) {
        font-size: px2rem(16);
      }
    }
  }
}