client/src/styles/_board_squares_img.sass

   1 // Styles for diagrams and board (partial).
   2
   3 .light-square-diag
   4   background-color: #dfdfdf
   5
   6 .dark-square-diag
   7   background-color: #7287b6
   8
   9 div.board
  10   user-select: none
  11   float: left
  12   height: 0
  13   display: inline-block
  14   position: relative
  15
  16 div.board5
  17   width: 20%
  18   padding-bottom: 20%
  19
  20 div.board8
  21   width: 12.5%
  22   padding-bottom: 12.5%
  23
  24 div.board9
  25   width: 11.1%
  26   padding-bottom: 11.1%
  27
  28 div.board10
  29   width: 10%
  30   padding-bottom: 10%
  31
  32 div.board11
  33   width: 9.09%
  34   padding-bottom: 9.09%
  35
  36 div.board12
  37   width: 8.33%
  38   padding-bottom: 8.33%
  39
  40 img.piece
  41   width: 100%
  42   z-index: 10
  43
  44 img.piece, img.mark-square, img.circle-square
  45   max-width: 100%
  46   height: auto
  47   display: block
  48
  49 img.mark-square, img.circle-square
  50   position: absolute
  51   z-index: 20
  52
  53 img.mark-square
  54   opacity: .7
  55   width: 76%
  56   top: 12%
  57   left: 12%
  58
  59 img.circle-square
  60   opacity: 0.7
  61   width: 100%
  62   top: 0
  63   left: 0
  64
  65 .in-shadow
  66   filter: brightness(50%)