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
  43 img.piece, img.mark-square, img.circle-square
  44   max-width: 100%
  45   height: auto
  46   display: block
  47
  48 img.mark-square
  49   opacity: .7
  50   width: 76%
  51   position: absolute
  52   top: 12%
  53   left: 12%
  54
  55 img.circle-square
  56   opacity: 0.7
  57   width: 100%
  58   position: absolute
  59   top: 0
  60   left: 0
  61
  62 .in-shadow
  63   filter: brightness(50%)