| 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%) |