Danboard.less

danboard.css.less

body {
  .danboard-host {
    #danboard {
      .material() {
        .border-radius(3px);
        .box-sizing(border-box);
        position: absolute;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: left top 0;
        text-align: center;
        font-size: 30px;
        background-color: #bb9f6f;
        @shadowsize: 10px 0 50px fade(#000,30%) inset,0 0 0px 0px fade(#000,10%);
        .box-shadow(@shadowsize);
      }
      
      padding: 50px 100px;
      position: relative;
      width: 200px;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateX(60deg) rotateY(150deg) rotateZ(-20deg);
      -webkit-transition: all 0.005s linear;
      .face {
        > div {
          .material();
        }
        .front {
          width: 200px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(0,0,0);
          z-index: 1;
          background-color: #bb9f6f;

          .parts {
            position: relative;
            .eye-right {
              position: absolute;
              top: 50px;
              left: 50px;
              background-color: fade(#1c020b, 70%);
              width: 25px;
              height: 25px;
              .border-radius(12.5px);
              @shadowsize: 0px 0 10px fade(#000,100%) inset,0 0 0px 0px fade(#000,10%);
              .box-shadow(@shadowsize);
            }
            .eye-left {
              position: absolute;
              top: 50px;
              left: 125px;
              background-color: fade(#1c020b, 70%);
              width: 25px;
              height: 25px;
              .border-radius(12.5px);
              @shadowsize: 0px 0 10px fade(#000,100%) inset,0 0 0px 0px fade(#000,10%);
              .box-shadow(@shadowsize);
            }
            .mouse {
              position: absolute;
              top: 95px;
              left: 80px;
              width: 0px;
              height: 0px;
              border-bottom: solid 20px fade(#1c020b, 90%);
              border-solid: solid 0px transparent;
              border-left: solid 20px transparent;
              border-right: solid 20px transparent;
            }
          }
        }
        .left {
          height: 150px;
          width: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(-90deg) translate3d(0, 0, -200px);
          background-color: #bb9f6f;
          @shadowsize: 10px 0 50px fade(#000,15%) inset,0 0 0px 0px fade(#000,10%);
          .box-shadow(@shadowsize);

        }

        .right {
          height: 150px;
          width: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-150px, 0, 0);
          background-color: #bb9f6f;
          @shadowsize: 10px 0 50px fade(#000,30%) inset,0 0 0px 0px fade(#000,10%);
          .box-shadow(@shadowsize);

        }

        .back {
          height: 150px;
          width: 200px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(180deg) translate3d(-200px,0,-150px);
          background-color: #bb9f6f;
          @shadowsize: 10px 0 50px fade(#000,30%) inset,0 0 0px 0px fade(#000,10%);
          .box-shadow(@shadowsize);
        }

        .top {
          height: 200px;
          width: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateZ(-90deg) rotateY(-90deg) translate3d(0,0,0);
          background-color: #bb9f6f;
          @shadowsize: 10px 0 50px fade(#000,10%) inset,0 0 0px 0px fade(#000,10%);
          .box-shadow(@shadowsize);

          .cover {
            .opacity(60);
            .border-radius(3px);
            .box-sizing(border-box);
            height: 198px;
            width: 148px;
            margin: 1px auto;
            @shadowsize: 0px 0 1px fade(#000,100%) inset,0 0 0px 0px fade(#000,10%);
            .box-shadow(@shadowsize);
          }
          .line {
            .box-sizing(border-box);
            height: 196px;
            width: 2px;
            margin: 0 auto;
            @shadowsize: 0px 0 2px fade(#000,100%) inset,0 0 0px 0px fade(#000,10%);
            .box-shadow(@shadowsize);
          }
        }
        .bottom {
          height: 200px;
          width: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(-90deg) rotateX(90deg) translate3d(0,-200px,-150px);
          background-color: darken(#bb9f6f, 35%);
          @shadowsize: 0px 0 50px fade(#000,100%) inset,0 0 0px 0px fade(#000,10%);
          .box-shadow(@shadowsize);
        }

      }

      .body {
        > div {
          .material();
        }
        > .front {
          width: 100px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(180deg) translate3d(-150px,150px, -37.5px);
          z-index: 1;
        }
        > .right {
          width: 75px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(-90deg) translate3d(37.5px, 150px, -150px);
          .hole {
            width: 37.5px;
            height: 18.75px;
            margin: 12.5px auto;
            background-color: @grayDarker;
            @shadowsize: 0px 0 10px fade(#000,100%) inset,0 0 0px 0px fade(#000,10%);
            .box-shadow(@shadowsize);
          }
        }
        > .left {
          width: 75px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-112.5px, 150px, 50px);
          .hole {
            width: 37.5px;
            height: 18.75px;
            margin: 12.5px auto;
            background-color: @grayDarker;
            @shadowsize: 0px 0 10px fade(#000,100%) inset,0 0 0px 0px fade(#000,10%);
            .box-shadow(@shadowsize);
          }
        }
        > .back {
          width: 100px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(0deg) translate3d(50px,150px, 112.5px);
        }

        > .bottom {
          width: 100px;
          height: 75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(0deg) rotateX(-90deg) translate3d(50px, -112.5px, 300px);
          background-color: darken(#bb9f6f, 35%);
          @shadowsize: 0px 0 50px fade(#000,100%) inset,0 0 0px 0px fade(#000,10%);
          .box-shadow(@shadowsize);
        }
      }

      .bottom-cover {
        > div {
          .material();
        }
        .front {
          width: 100px;
          height: 37.5px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(180deg) translate3d(-150px,300px,-37.5px) rotateX(30deg);
          z-index: 1;
        }
        .left {
          width: 75px;
          height: 37.5px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(-90deg) translate3d(37.5px, 300px, -50px) rotateX(30deg);
        }
        .right {
          width: 75px;
          height: 37.5px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-112.5px, 300px, 150px) rotateX(30deg);
        }
        .back {
          width: 100px;
          height: 37.5px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(0deg) translate3d(50px,300px,112.5px) rotateX(30deg);
        }
      }

      .arm-left {
        > div {
          .material();
        }
        .front {
          width: 25px;
          height: 18.75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(25px, 162.5px, 56.5px);
        }
        .back {
          width: 25px;
          height: 18.75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(25px, 162.5px, 93.5px);
        }

        .bottom {
          width: 25px;
          height: 37px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateX(90deg) translate3d(25px,56.5px,-181.25px);
        }
      }
      .arm-right {
        > div {
          .material();
        }
        .front {
          width: 25px;
          height: 18.75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(150px, 162.5px, 56.5px);
        }
        .back {
          width: 25px;
          height: 18.75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(150px, 162.5px, 93.5px);
        }
        .bottom {
          width: 25px;
          height: 37px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateX(90deg) translate3d(150px,56.5px,-181.25px);
        }
      }

      .hand-right {
        > div {
          .material();
        }

        .front {
          width: 37.5px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(162.5px,162.5px,56.25px) rotateZ(-15deg);
        }

        .back {
          width: 37.5px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(162.5px,162.5px,93.75px) rotateZ(-15deg);
        }
        .left {
          width: 37px;
          height: 131.75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-94.5px,181.25px,162.5px) rotateX(15deg) translate3d(0,0,7.5px);
        }
        .right {
          width: 37px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-94.5px,162.5px,200px) rotateX(15deg) translate3d(0,-10px,0);
        }
        .bottom {
          width: 37px;
          height: 37.5px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(-90deg) rotateX(90deg) translate3d(56.25px,-200px,-312.5px) rotateX(-15deg) translate3d(0px,-37.5px, 4.5px);
        }
      }

      
      .hand-left {
        > div {
          .material();
        }

        .front {
          width: 37.5px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(0px,150px,56.25px) rotateZ(15deg);
        }

        .back {
          width: 37.5px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) translate3d(0px,150px,93.75px) rotateZ(15deg);
        }
        .left {
          width: 37px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-94.5px,169.75px, 0px) rotateX(-15deg) translate3d(0,-18.25px,-5px);
        }
        .right {
          width: 37px;
          height: 131.75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-94.5px,150px,47.5px) rotateX(-15deg) translate3d(0,31.75px,-7.5px);
        }
        .bottom {
          width: 37px;
          height: 37.5px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(-90deg) rotateX(90deg) translate3d(56.25px,-37px,-300px) rotateX(15deg) translate3d(0px, 37.5px,-12.5px);
        }
      }

      .leg-right {
        > div {
          .material();
        }
        .front {
          width: 45px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(180deg) translate3d(-150px,300px, -37.5px);
          z-index: 1;
        }
        .left {
          width: 75px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-112.5px, 300px, 150px);
        }
        .right {
          width: 75px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(-90deg) translate3d(37.5px, 300px, -105px);
        }
        .back {
          width: 45px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(180deg) translate3d(-150px,300px, -112.5px);
        }
        .bottom {
          width: 45px;
          height: 75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(0deg) rotateX(-90deg) translate3d(105px, -112.5px, 450px);
        }
      }

      .leg-left {
        > div {
          .material();
        }
        .front {
          width: 45px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(180deg) translate3d(-95px,300px, -37.5px);
          z-index: 1;
        }
        .left {
          width: 75px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(90deg) translate3d(-112.5px, 300px, 95px);
        }
        .right {
          width: 75px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(-90deg) translate3d(37.5px, 300px, -50px);
        }
        .back {
          width: 45px;
          height: 150px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(180deg) translate3d(-95px,300px, -112.5px);
        }
        .bottom {
          width: 45px;
          height: 75px;
          -webkit-transform: rotateX(30deg) rotateY(30deg) rotateY(0deg) rotateX(-90deg) translate3d(50px, -112.5px, 450px);
        }
        
      }
    }
  }
}