Front/src/theme/css/status.less
@import (reference) "base.less";

.autoprefix-keyframe-transform(@name, @func, @t1, @t2, @t3: undefined, @use-prefix: true) {
  .base(@prefix, @bind) {
    .t1() {
        @{prefix}@{func}: @t1;
    }
    .t2() {
        @{prefix}@{func}: @t2;
    }
    .t3() {
        @{prefix}@{func}: @t3;
    }
    @start: ~"@{bind}@@{prefix}keyframes @{name} { `'\n'` 0%";
    @{start} { .t1(); }
    .test() when (@t3 = undefined) {
      100% { .t2(); }
    }
    .test() when not (@t3 = undefined) {
      50% { .t2(); }
      100% { .t3(); }
    }
    .test();
  }
  @end:  ~"} `'\n'`";
  .end() {
    @{end} {.wtf {color: #fff}}
  }
  .base(~'', ~'');
  .base(-o-, @end);
  .base(-webkit-, @end);
  .base(-moz-, @end);
  .base(-ms-, @end);
  .end();
}

.autoprefix-keyframe-transform(rotate-full, transform, rotate(0deg), rotate(360deg));


.status {
  .margin(@t: 7em, @b: 7em);
  .text(@align: center);

  .img {
    .background(@image: url(../image/logo.svg));
    .margin(@all: 0 auto 2.5em auto);
  }

  p {
    .text(@color: darkslategrey);
  }
}

@media (min-width: 960px) {
  .status .img {
    .border(@l: 3px dashed black, @t: 3px dashed black, @rad: 50%);
    .size(12em, 12em);
  }
}

@media (max-width: 960px) {
  .status .img {
    .border(@l: 2px dashed black, @t: 2px dashed black, @rad: 50%);
    .size(8em, 8em);
  }
}

#status-wait {
  .img {
    .autoprefix-animation(rotate-full 3s linear 0s infinite normal);
  }
}

.autoprefix-keyframe-transform(rotate-half-roll, transform, rotate(0deg), rotate(180deg), rotate(0deg));

#status-error{
  .img {
    .autoprefix-animation(rotate-half-roll 4s ease-out 0s infinite normal);
  }
}

.autoprefix-keyframe-transform(move-up-down-1, top, 30px, 60px, 30px);
.autoprefix-keyframe-transform(move-up-down-2, top, 10px, 50px, 10px);
.autoprefix-keyframe-transform(move-up-down-3, top, 20px, 60px, 20px);
.autoprefix-keyframe-transform(move-up-down-4, top, 30px, 60px, 30px);

#status-404{
  display: block;
  .margin(@all: 3em auto);
  .size(@w: 80%);
  .text(@align: center);

  .content {
    .margin(@t: 90px);
  }

  summary{
    .text(@size: .9em, @color: #888);
    line-height: 2.5em;
  }

  a {
    .text(@color: #aaa, @size: 1.5em, @weight: bolder);
    line-height: 3em;

    &:hover {
      .text(@color: black);
    }
  }

  .img-container {
    .margin(@t: 2.5em);
  }

  .img {
    position: relative;
    display: inline-block;
    .position(@t: 3em);
    .margin(@all: 0);
    .size(@w: 4em, @h: 4em);
  }

  .img1 {
    .position(@l: -5%);
    .background(@image: url(../image/404-1.svg));
    .autoprefix-animation(move-up-down-1 3s ease-out 0s infinite normal);
  }

  .img2 {
    .position(@l: 0);
    .background(@image: url(../image/404-2.svg));
    .autoprefix-animation(move-up-down-2 3s ease-out 0s infinite normal);
  }

  .img3 {
    .position(@l: 5%);
    .background(@image: url(../image/404-3.svg));
    .autoprefix-animation(move-up-down-3 3s ease-out 0s infinite normal);
  }

  .img4 {
    .position(@l: 10%);
    .background(@image: url(../image/404-4.svg));
    .autoprefix-animation(move-up-down-4 3s ease-out 0s infinite normal);
  }

}
