chessgroundxx/assets/3d.css

lichess.org chess ui

.in3d .cg-wrap {
  width: 512px;
  height: 464.5px;
}
.in3d .cg-board::before {
  position: absolute;
  top: -0.730688%;
  left: 0;
  width: 100%;
  height: 103.2%;
  content: '';
  background-size: cover;
  background-image: url('images/board/3d/woodi.1024.png');
}
.in3d .ghost,
.in3d .over {
  display: none;
}
.in3d square[data-coord-x]::after {
  bottom: calc(-10px - 22%);
}
.in3d piece {
  /* original size:
  width: 140.625%;
  height: 179.6875%; */
  /* size on 3D board, with height/width = 90.78571% */
  width: 16.741%;
  height: 23.563%;
  left: -1.85%;
  top: -9.1%;
}
.cg-board piece.dragging {
  cursor: move;
  z-index: 70!important;
}
.in3d .cg-wrap piece.pawn.white {
  background-image: url('images/pieces/staunton/basic/White-Pawn.png');
}
.in3d .cg-wrap piece.bishop.white {
  background-image: url('images/pieces/staunton/basic/White-Bishop.png');
}
.in3d .cg-wrap.orientation-black div.bishop.white {
  background-image: url('images/pieces/staunton/basic/White-Bishop-Flipped.png');
}
.in3d .cg-wrap piece.knight.white {
  background-image: url('images/pieces/staunton/basic/White-Knight.png');
}
.in3d .cg-wrap.orientation-black div.knight.white {
  background-image: url('images/pieces/staunton/basic/White-Knight-Flipped.png');
}
.in3d .cg-wrap piece.rook.white {
  background-image: url('images/pieces/staunton/basic/White-Rook.png');
}
.in3d .cg-wrap piece.queen.white {
  background-image: url('images/pieces/staunton/basic/White-Queen.png');
}
.in3d .cg-wrap piece.king.white {
  background-image: url('images/pieces/staunton/basic/White-King.png');
}
.in3d .cg-wrap piece.pawn.black {
  background-image: url('images/pieces/staunton/basic/Black-Pawn.png');
}
.in3d .cg-wrap piece.bishop.black {
  background-image: url('images/pieces/staunton/basic/Black-Bishop.png');
}
.in3d .cg-wrap.orientation-white div.bishop.black {
  background-image: url('images/pieces/staunton/basic/Black-Bishop-Flipped.png');
}
.in3d .cg-wrap piece.knight.black {
  background-image: url('images/pieces/staunton/basic/Black-Knight.png');
}
.in3d .cg-wrap.orientation-white div.knight.black {
  background-image: url('images/pieces/staunton/basic/Black-Knight-Flipped.png');
}
.in3d .cg-wrap piece.rook.black {
  background-image: url('images/pieces/staunton/basic/Black-Rook.png');
}
.in3d .cg-wrap piece.queen.black {
  background-image: url('images/pieces/staunton/basic/Black-Queen.png');
}
.in3d .cg-wrap piece.king.black {
  background-image: url('images/pieces/staunton/basic/Black-King.png');
}