chessground/assets/base.css

Multipurpose chess UI, for lichess.org web and mobile

/*
 * Chessground base css properties, for clarity.
 *
 * You can then include either desktop.css or mobile.css.
 *
 * And you need to include the css files in themes folder in order to have the
 * board and pieces displayed!
 */

.cg-board {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 0;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100%;
}
.cg-square {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
}
.cg-square[data-coord-x]::after {
  position: absolute;
  left: 1px;
  bottom: 1px;
  font-size: 10px;
  line-height: 10px;
  content: attr(data-coord-x);
  color: #fff;
  opacity: 0.5;
}
.cg-square[data-coord-y]::before {
  position: absolute;
  right: 1px;
  top: 1px;
  font-size: 10px;
  line-height: 10px;
  content: attr(data-coord-y);
  color: #fff;
  opacity: 0.5;
}
.cg-square.move-dest {
  background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
}
.cg-square.premove-dest {
  background: radial-gradient(rgba(20, 30, 85, 0.5) 22%, #203085 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
}
.cg-square.last-move {
  background-color: rgba(155, 199, 0, 0.41);
}
.cg-square.selected {
  background-color: rgba(20, 85, 30, 0.5);
}
.cg-square.check {
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(231, 0, 0, 1) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%);
}
.cg-square.current-premove {
  background-color: rgba(20, 30, 85, 0.5);
}
.cg-piece {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: 2;
}
.cg-piece.dragging {
  z-index: 9;
}
.cg-piece.ghost {
  opacity: 0.3;
}
.cg-piece.fading {
  z-index: 1;
}