Commit | Line | Data |
---|---|---|
d449ae46 BA |
1 | // Menu: |
2 | ||
9a3c9f79 | 3 | #menuBar |
9a3c9f79 | 4 | background: linear-gradient(#e66465, #9198e5) |
a5d56686 | 5 | height: 29px |
d449ae46 BA |
6 | margin-bottom: 10px |
7 | @media screen and (max-width: 767px) | |
8 | height: 100% | |
9 | margin-bottom: 0 | |
9a3c9f79 BA |
10 | @media screen and (min-width: 768px) |
11 | width: 100% | |
a5d56686 | 12 | overflow: hidden |
9a3c9f79 | 13 | |
d449ae46 | 14 | a#homeLink |
a5d56686 BA |
15 | margin-left: 10px |
16 | margin-top: 2px | |
17 | color: black | |
d449ae46 BA |
18 | display: inline-block |
19 | @media screen and (max-width: 767px) | |
d449ae46 | 20 | display: block |
a5d56686 | 21 | margin: 5px 0 0 12px |
9a3c9f79 | 22 | |
d449ae46 BA |
23 | .info-container |
24 | display: inline-block | |
25 | vertical-align: top | |
26 | padding: 0 | |
27 | box-sizing: border-box | |
28 | a | |
29 | text-decoration: none | |
30 | color: black | |
31 | a, p | |
32 | display: inline-block | |
673c88b7 | 33 | padding: 0 3px |
d449ae46 | 34 | border: 1px solid black; |
a5d56686 | 35 | margin: 1px 0 0 15px |
d449ae46 BA |
36 | @media screen and (max-width: 767px) |
37 | margin-top: 10px | |
38 | display: block | |
e7cfa68d | 39 | |
d449ae46 BA |
40 | #helpMenu |
41 | @media screen and (min-width: 768px) | |
42 | float: right | |
a5d56686 BA |
43 | .info-container |
44 | p | |
673c88b7 | 45 | padding: 0 3px |
a5d56686 | 46 | margin: 1px 0 0 15px |
186516b8 | 47 | |
d449ae46 BA |
48 | #flagMenu |
49 | @media screen and (min-width: 768px) | |
a5d56686 | 50 | margin-top: 1px |
d449ae46 | 51 | float: right |
d449ae46 BA |
52 | margin: 0 15px |
53 | @media screen and (max-width: 767px) | |
a5d56686 | 54 | margin: 25px 5px 0 15px |
d449ae46 BA |
55 | img |
56 | display: inline-block | |
a5d56686 BA |
57 | margin: 0 |
58 | height: 25px | |
186516b8 | 59 | |
d449ae46 BA |
60 | label.drawer-toggle |
61 | padding: 0 | |
62 | &::before | |
a5d56686 BA |
63 | font-size: 2em; |
64 | max-height: 32px; | |
65 | top: -7px; | |
66 | left: 5px | |
d449ae46 BA |
67 | |
68 | // Game section: | |
18f9c763 | 69 | |
a5d56686 BA |
70 | button.play |
71 | height: 24px | |
72 | margin: 0 | |
73 | padding: 0 10px 24px 10px | |
74 | box-sizing: border-box | |
1d184b4c | 75 | border: 1px solid brown |
a5d56686 BA |
76 | button.play.spaceleft |
77 | margin-left: 15px | |
78 | button.play.spaceright | |
79 | margin-right: 15px | |
4f7723a1 BA |
80 | button.play.big-spaceleft |
81 | margin-left: 25px | |
82 | button.play.big-spaceright | |
83 | margin-right: 25px | |
a5d56686 BA |
84 | |
85 | .aboveboard-wrapper | |
86 | width: 80vh | |
87 | margin: 0 auto | |
88 | @media screen and (max-width: 767px) | |
89 | width: 100% | |
90 | margin: 0 | |
91 | ||
92 | button.above-board | |
93 | margin-left: 15px | |
94 | margin-right: 15px | |
95 | ||
96 | i.material-icons | |
97 | font-size: 24px | |
1d184b4c | 98 | |
bdb1f12d | 99 | .indic-left |
a5d56686 | 100 | border: 1px solid brown |
bdb1f12d | 101 | float: left |
a5d56686 BA |
102 | margin: 0 0 var(--universal-margin) 10vh |
103 | @media screen and (max-width: 767px) | |
104 | margin-left: 20px | |
bdb1f12d BA |
105 | |
106 | .indic-right | |
a5d56686 | 107 | border: 1px solid brown |
bdb1f12d | 108 | float: right |
a5d56686 BA |
109 | margin: 0 10vh var(--universal-margin) 0 |
110 | @media screen and (max-width: 767px) | |
111 | margin-right: 20px | |
92342261 | 112 | |
d449ae46 BA |
113 | .my-chatmsg |
114 | color: black | |
92342261 | 115 | |
d449ae46 BA |
116 | .opp-chatmsg |
117 | color: blue | |
92342261 | 118 | |
a5d56686 BA |
119 | // TODO: this fix is not good (button height 0 if chat overflow window height) |
120 | #sendChatBtn | |
121 | min-height: 42px | |
122 | ||
1d184b4c BA |
123 | .connected |
124 | background-color: green | |
125 | ||
126 | .disconnected | |
127 | background-color: red | |
128 | ||
bdb1f12d BA |
129 | .white-turn |
130 | background-color: white | |
131 | ||
132 | .black-turn | |
133 | background-color: black | |
134 | ||
d449ae46 BA |
135 | button.playing |
136 | background-color: #ffcc99 | |
137 | &:hover | |
138 | background-color: #ffcc99 | |
139 | ||
140 | button.seek | |
141 | background-color: #cc99ff | |
142 | &:hover | |
143 | background-color: #cc99ff | |
144 | ||
a5d56686 BA |
145 | .game.reserve-div |
146 | margin-bottom: 18px | |
147 | ||
d449ae46 BA |
148 | .reserve-count |
149 | padding-left: 40% | |
150 | ||
d449ae46 BA |
151 | .reserve-row-1 |
152 | margin-bottom: 15px | |
153 | ||
1d184b4c BA |
154 | div.board |
155 | float: left | |
1d184b4c | 156 | height: 0 |
1d184b4c BA |
157 | display: inline-block |
158 | position: relative | |
159 | ||
c94bc812 BA |
160 | div.board8 |
161 | width: 12.5% | |
162 | padding-bottom: 12.5% | |
163 | ||
a5d56686 BA |
164 | div.board8-reserve |
165 | width: 10% | |
166 | padding-bottom: 10% | |
167 | ||
c94bc812 BA |
168 | div.board10 |
169 | width: 10% | |
170 | padding-bottom: 10% | |
171 | ||
172 | div.board11 | |
8a196305 | 173 | width: 9.09% |
c94bc812 BA |
174 | padding-bottom: 9.1% |
175 | ||
a5d56686 BA |
176 | // NOTE: no variants with reserve of size != 8 |
177 | ||
bdb1f12d | 178 | .game |
a5d56686 BA |
179 | width: 80vh |
180 | margin: 0 auto | |
80b15df1 BA |
181 | .board |
182 | cursor: pointer | |
a5d56686 BA |
183 | @media screen and (max-width: 767px) |
184 | width: 100% | |
185 | margin: 0 | |
1d184b4c BA |
186 | |
187 | #choices | |
80b15df1 BA |
188 | margin: 0 auto 0 auto |
189 | position: relative | |
190 | z-index: 300 | |
191 | overflow-y: inherit | |
d449ae46 | 192 | background-color: rgba(0,0,0,0) |
80b15df1 BA |
193 | img |
194 | cursor: pointer | |
195 | background-color: #e6ee9c | |
9a3c9f79 | 196 | &:hover |
80b15df1 BA |
197 | background-color: skyblue |
198 | .choice-piece | |
199 | width: 90% | |
200 | max-width: 100% | |
201 | height: auto | |
202 | display: block | |
203 | ||
d449ae46 BA |
204 | img.piece |
205 | width: 100% | |
206 | ||
80b15df1 BA |
207 | img.piece, img.mark-square |
208 | max-width: 100% | |
209 | height: auto | |
210 | display: block | |
1d184b4c BA |
211 | |
212 | img.mark-square | |
80b15df1 | 213 | opacity: 0.6 |
1d184b4c BA |
214 | width: 76% |
215 | position: absolute | |
216 | top: 12% | |
217 | left: 12% | |
218 | opacity: .7 | |
219 | ||
d449ae46 BA |
220 | img.ghost |
221 | position: absolute | |
222 | opacity: 0.4 | |
223 | top: 0 | |
224 | ||
130db3ef BA |
225 | .highlight |
226 | background-color: #00cc66 !important | |
227 | ||
375ecdd1 | 228 | .in-shadow |
388e4c40 | 229 | filter: brightness(50%) |
375ecdd1 | 230 | |
130db3ef BA |
231 | .incheck |
232 | background-color: #cc3300 !important | |
233 | ||
a897b421 | 234 | .light-square.lichess |
80b15df1 | 235 | background-color: #f0d9b5; |
a897b421 | 236 | .dark-square.lichess |
80b15df1 | 237 | background-color: #b58863; |
d449ae46 | 238 | |
a897b421 | 239 | .light-square.chesscom |
80b15df1 | 240 | background-color: #e5e5ca; |
a897b421 | 241 | .dark-square.chesscom |
80b15df1 | 242 | background-color: #6f8f57; |
d449ae46 | 243 | |
a897b421 | 244 | .light-square.chesstempo |
80b15df1 | 245 | background-color: #fdfdfd; |
a897b421 | 246 | .dark-square.chesstempo |
80b15df1 | 247 | background-color: #88a0a8; |
1d184b4c | 248 | |
1d184b4c BA |
249 | .light-square-diag |
250 | background-color: #e5e5ca | |
251 | .dark-square-diag | |
252 | background-color: #6f8f57 | |
253 | ||
d449ae46 BA |
254 | #fen-string |
255 | margin-top: 0 | |
256 | ||
257 | #pgn-game | |
258 | margin-top: 0 | |
259 | margin-bottom: 0 | |
260 | ||
261 | #downloadBtn | |
262 | display: block | |
263 | margin-left: auto | |
264 | margin-right: auto | |
265 | ||
266 | #pgn-div > a | |
267 | display: none | |
268 | ||
269 | #fen-div > p | |
270 | margin-left: 0 | |
271 | margin-right: 0 | |
272 | ||
a5d56686 BA |
273 | #modal-eog+div .card |
274 | overflow: hidden | |
275 | ||
276 | #actions | |
277 | margin: 10px 0 | |
278 | ||
d449ae46 BA |
279 | // Rules section: |
280 | ||
281 | .warn | |
282 | padding: 3px | |
283 | color: red | |
284 | background-color: lightgrey | |
285 | font-weight: bold | |
286 | ||
287 | figure.diagram-container | |
288 | margin: 15px 0 15px 0 | |
289 | text-align: center | |
290 | width: 100% | |
291 | display: block | |
292 | .diagram | |
293 | display: block | |
294 | width: 40% | |
1d5f2b65 | 295 | min-width: 240px |
d449ae46 BA |
296 | max-width: 800px |
297 | margin-left: auto | |
298 | margin-right: auto | |
299 | .diag12 | |
300 | float: left | |
301 | margin-left: calc(10% - 20px) | |
302 | margin-right: 40px | |
303 | @media screen and (max-width: 500px) | |
304 | float: none | |
305 | margin: 0 auto 10px auto | |
306 | .diag22 | |
307 | float: left | |
308 | margin-right: calc(10% - 20px) | |
309 | @media screen and (max-width: 500px) | |
310 | float: none | |
311 | margin: 0 auto | |
312 | figcaption | |
313 | display: block | |
314 | clear: both | |
315 | padding-top: 5px | |
316 | ||
1d184b4c BA |
317 | p.boxed |
318 | background-color: #FFCC66 | |
319 | padding: 5px | |
320 | ||
321 | .stageDelimiter | |
322 | color: purple | |
323 | ||
324 | // To show (new) pieces, and/or there values... | |
325 | figure.showPieces > img | |
326 | width: 50px | |
327 | ||
328 | figure.showPieces > figcaption | |
329 | color: #6C6C6C | |
330 | ||
1d184b4c BA |
331 | .section-title |
332 | padding: 0 | |
333 | ||
334 | .section-title > h4 | |
335 | padding: 5px | |
336 | ||
1d184b4c BA |
337 | ol, ul:not(.browser-default) |
338 | padding-left: 20px | |
339 | ||
340 | ul:not(.browser-default) | |
341 | margin-top: 5px | |
342 | ||
343 | ul:not(.browser-default) > li | |
344 | list-style-type: disc | |
345 | ||
d449ae46 | 346 | // Problems section: |
da06a6eb | 347 | |
b5fb8e69 | 348 | .newproblem-form input, .newproblem-form textarea |
da06a6eb BA |
349 | width: 100% |
350 | ||
351 | .emphasis | |
352 | font-style: italic | |
353 | ||
354 | #newpbInstructions | |
355 | margin-bottom: var(--universal-margin); | |
356 | ||
357 | .center-btn | |
358 | margin-left: 40% | |
359 | ||
360 | //TODO? | |
361 | .center-inline | |
362 | text-align: center | |
363 | .center-block | |
364 | margin-left: auto | |
365 | margin-right: auto | |
366 | ||
367 | .mistake-newproblem | |
368 | color: #663300 | |
1a788978 BA |
369 | |
370 | #problem-solution | |
371 | display: none | |
b5fb8e69 | 372 | |
b5fb8e69 | 373 | #solution-div h3 |
a5d56686 BA |
374 | background-color: lightgrey |
375 | padding: 3px 5px | |
643479f8 BA |
376 | |
377 | .newproblem-form, .newproblem-preview | |
378 | max-width: 90% | |
3a609580 | 379 | |
a5d56686 BA |
380 | #problemControls |
381 | width: 75% | |
382 | margin: 0 auto | |
383 | @media screen and (max-width: 767px) | |
384 | width: 100% | |
385 | margin: 0 | |
3a609580 | 386 | |
a5d56686 BA |
387 | .problem |
388 | margin: 10px 0 |