Add Alapo, Crossing, Kingsmaker, Squatter variants

[vchess.git] / client / src / styles / _board_squares_img.sass

// Styles for diagrams and board (partial).

div.board
  user-select: none
  float: left
  height: 0
  display: inline-block
  position: relative

div.board3
  width: 33.33%
  padding-bottom: 33.33%

div.board5
  width: 20%
  padding-bottom: 20%

div.board6
  width: 16.66%
  padding-bottom: 16.66%

div.board7
  width: 14.28%
  padding-bottom: 14.28%

div.board8
  width: 12.5%
  padding-bottom: 12.5%

div.board9
  width: 11.1%
  padding-bottom: 11.1%

div.board10
  width: 10%
  padding-bottom: 10%

div.board11
  width: 9.09%
  padding-bottom: 9.09%

div.board12
  width: 8.33%
  padding-bottom: 8.33%

img.piece
  width: 100%
  z-index: 10

img.piece, img.mark-square, img.circle-square
  max-width: 100%
  height: auto
  display: block

img.mark-square, img.circle-square
  position: absolute
  z-index: 20

img.mark-square
  opacity: .7
  width: 76%
  top: 12%
  left: 12%

img.circle-square
  opacity: 0.7
  width: 100%
  top: 0
  left: 0

.in-shadow
  filter: brightness(50%)

.touch-hover
  background-color: #C571E6 !important

.monochrome
  border-bottom: 1px solid black
  border-right: 1px solid black
  box-sizing: border-box

.border-left
  border-left: 1px solid black
  box-sizing: border-box

.border-top
  border-top: 1px solid black
  box-sizing: border-box

.light-square.lichess
  background-color: #f0d9b5
.dark-square.lichess
  background-color: #b58863
.middle-square.lichess
  background-color: #D3B18C

.light-square.chesscom
  background-color: #e5e5ca
.dark-square.chesscom
  background-color: #6f8f57
.middle-square.chesscom
  background-color: #AABA91

.light-square.chesstempo
  background-color: #dfdfdf
.dark-square.chesstempo
  background-color: #7287b6
.middle-square.chesstempo
  background-color: #A9B3CB

.light-square.orangecc
  background-color: #fce4b2
.dark-square.orangecc
  background-color: #d08b18
.middle-square.orangecc
  background-color: #E6B865