Factorize some duplicated CSS

[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
new file mode 100644 (file)
index 0000000..e960660
--- /dev/null
+++ b/client/src/styles/_board_squares_img.sass
@@ -0,0 +1,63 @@
+// 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
+  height: 0
+  display: inline-block
+  position: relative
+
+div.board5
+  width: 20%
+  padding-bottom: 20%
+
+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%
+
+img.piece, img.mark-square, img.circle-square
+  max-width: 100%
+  height: auto
+  display: block
+
+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%)