Pointer cursor on board when playing
[vchess.git] / public / stylesheets / variant.sass
1 .container#variantPage
2 padding: 0
3
4 .warn
5 padding: 3px
6 color: red
7 background-color: lightgrey
8 font-weight: bold
9
10 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
11 figure.diagram-container > .diagram
12 display: block
13 width: 45%
14 min-width: 300px
15 max-width: 800px
16 margin-left: auto
17 margin-right: auto
18
19 .connected, .disconnected
20 width: 20px
21 height: 20px
22 margin: 0 auto 15px auto
23 border: 1px solid brown
24
25 .connected
26 background-color: green
27
28 .disconnected
29 background-color: red
30
31 // TODO: div.board, board9, board10, board11, board12
32 div.board
33 float: left
34 width: 12.5%
35 height: 0
36 padding-bottom: 12.5%
37 display: inline-block
38 position: relative
39
40 .game .board
41 cursor: pointer
42
43 #choices
44 margin-bottom: 10px
45
46 #choices
47 margin: 0 auto 0 auto
48 position: relative
49 z-index: 300
50 overflow-y: inherit
51 background-color: rgba(0,0,0,0) //transparent
52
53 #choices img
54 cursor: pointer
55 background-color: #e6ee9c
56
57 #choices img:hover
58 background-color: skyblue
59
60 img.choice-piece
61 height: 0
62 width: 90%
63 padding: 5%
64 height: 90%
65
66 img.piece, img.mark-square, img.choice-piece
67 max-width: 100%
68 height: auto
69 display: block
70
71 img.mark-square
72 opacity: 0.6
73
74 img.ghost
75 position: absolute
76 opacity: 0.4
77 top: 0
78
79 img.piece
80 width: 100%
81
82 img.mark-square
83 width: 76%
84 position: absolute
85 top: 12%
86 left: 12%
87 opacity: .7
88
89 figure.diagram-container > figcaption
90 display: block
91 clear: both
92 padding-top: 5px
93
94 .light-square
95 background-color: #f0d9b5
96 .dark-square
97 background-color: #b58863
98
99 .highlight
100 background-color: #00cc00
101
102 .light-square-diag
103 background-color: #e5e5ca
104 .dark-square-diag
105 background-color: #6f8f57
106
107 p.boxed
108 background-color: #FFCC66
109 padding: 5px
110
111 .stageDelimiter
112 color: purple
113
114 // To show (new) pieces, and/or there values...
115 figure.showPieces > img
116 width: 50px
117
118 figure.showPieces > figcaption
119 color: #6C6C6C
120
121 figure.diagram-container
122 margin: 15px 0 15px 0
123 text-align: center
124 width: 100%
125 display: block
126
127 .section-title
128 padding: 0
129
130 .section-title > h4
131 padding: 5px
132
133 .section-content
134 padding: 5px
135
136 ol, ul:not(.browser-default)
137 padding-left: 20px
138
139 ul:not(.browser-default)
140 margin-top: 5px
141
142 ul:not(.browser-default) > li
143 list-style-type: disc
144
145 .rulesTitle
146 font-weight: bold
147 cursor: pointer
148 padding: 3px;
149 background-color: lightgrey