Add Gomoku + Atarigo

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

diff --git a/client/src/styles/_board_squares_img.sass b/client/src/styles/_board_squares_img.sass
index e960660..3dc3a12 100644 (file)
--- a/client/src/styles/_board_squares_img.sass
+++ b/client/src/styles/_board_squares_img.sass
@@ -1,11 +1,5 @@
 // Styles for diagrams and board (partial).
 
-.light-square-diag
-  background-color: #e5e5ca
-
-.dark-square-diag
-  background-color: #6f8f57
-
 div.board
   user-select: none
   float: left
@@ -13,10 +7,22 @@ div.board
   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%
@@ -37,27 +43,78 @@ div.board12
   width: 8.33%
   padding-bottom: 8.33%
 
+div.board19
+  width: 5.26%
+  padding-bottom: 5.26%
+
 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%
-  position: absolute
   top: 12%
   left: 12%
 
 img.circle-square
   opacity: 0.7
   width: 100%
-  position: absolute
   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