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 | ||
164 | div.board10 | |
165 | width: 10% | |
166 | padding-bottom: 10% | |
167 | ||
168 | div.board11 | |
8a196305 | 169 | width: 9.09% |
c94bc812 BA |
170 | padding-bottom: 9.1% |
171 | ||
a5d56686 BA |
172 | // NOTE: no variants with reserve of size != 8 |
173 | ||
bdb1f12d | 174 | .game |
a5d56686 BA |
175 | width: 80vh |
176 | margin: 0 auto | |
80b15df1 BA |
177 | .board |
178 | cursor: pointer | |
a5d56686 BA |
179 | @media screen and (max-width: 767px) |
180 | width: 100% | |
181 | margin: 0 | |
1d184b4c BA |
182 | |
183 | #choices | |
80b15df1 BA |
184 | margin: 0 auto 0 auto |
185 | position: relative | |
186 | z-index: 300 | |
187 | overflow-y: inherit | |
d449ae46 | 188 | background-color: rgba(0,0,0,0) |
80b15df1 BA |
189 | img |
190 | cursor: pointer | |
191 | background-color: #e6ee9c | |
9a3c9f79 | 192 | &:hover |
80b15df1 | 193 | background-color: skyblue |
69f3d801 BA |
194 | &.choice-piece |
195 | width: 100% | |
80b15df1 BA |
196 | height: auto |
197 | display: block | |
198 | ||
d449ae46 BA |
199 | img.piece |
200 | width: 100% | |
201 | ||
80b15df1 BA |
202 | img.piece, img.mark-square |
203 | max-width: 100% | |
204 | height: auto | |
205 | display: block | |
1d184b4c BA |
206 | |
207 | img.mark-square | |
80b15df1 | 208 | opacity: 0.6 |
1d184b4c BA |
209 | width: 76% |
210 | position: absolute | |
211 | top: 12% | |
212 | left: 12% | |
213 | opacity: .7 | |
214 | ||
d449ae46 BA |
215 | img.ghost |
216 | position: absolute | |
217 | opacity: 0.4 | |
218 | top: 0 | |
219 | ||
130db3ef BA |
220 | .highlight |
221 | background-color: #00cc66 !important | |
222 | ||
375ecdd1 | 223 | .in-shadow |
388e4c40 | 224 | filter: brightness(50%) |
375ecdd1 | 225 | |
130db3ef BA |
226 | .incheck |
227 | background-color: #cc3300 !important | |
228 | ||
a897b421 | 229 | .light-square.lichess |
80b15df1 | 230 | background-color: #f0d9b5; |
a897b421 | 231 | .dark-square.lichess |
80b15df1 | 232 | background-color: #b58863; |
d449ae46 | 233 | |
a897b421 | 234 | .light-square.chesscom |
80b15df1 | 235 | background-color: #e5e5ca; |
a897b421 | 236 | .dark-square.chesscom |
80b15df1 | 237 | background-color: #6f8f57; |
d449ae46 | 238 | |
a897b421 | 239 | .light-square.chesstempo |
80b15df1 | 240 | background-color: #fdfdfd; |
a897b421 | 241 | .dark-square.chesstempo |
80b15df1 | 242 | background-color: #88a0a8; |
1d184b4c | 243 | |
1d184b4c BA |
244 | .light-square-diag |
245 | background-color: #e5e5ca | |
246 | .dark-square-diag | |
247 | background-color: #6f8f57 | |
248 | ||
d449ae46 BA |
249 | #fen-string |
250 | margin-top: 0 | |
251 | ||
252 | #pgn-game | |
253 | margin-top: 0 | |
254 | margin-bottom: 0 | |
255 | ||
256 | #downloadBtn | |
257 | display: block | |
258 | margin-left: auto | |
259 | margin-right: auto | |
260 | ||
261 | #pgn-div > a | |
262 | display: none | |
263 | ||
264 | #fen-div > p | |
265 | margin-left: 0 | |
266 | margin-right: 0 | |
267 | ||
a5d56686 BA |
268 | #modal-eog+div .card |
269 | overflow: hidden | |
270 | ||
271 | #actions | |
272 | margin: 10px 0 | |
273 | ||
d449ae46 BA |
274 | // Rules section: |
275 | ||
276 | .warn | |
277 | padding: 3px | |
278 | color: red | |
279 | background-color: lightgrey | |
280 | font-weight: bold | |
281 | ||
282 | figure.diagram-container | |
283 | margin: 15px 0 15px 0 | |
284 | text-align: center | |
285 | width: 100% | |
286 | display: block | |
287 | .diagram | |
288 | display: block | |
289 | width: 40% | |
1d5f2b65 | 290 | min-width: 240px |
d449ae46 BA |
291 | margin-left: auto |
292 | margin-right: auto | |
293 | .diag12 | |
294 | float: left | |
295 | margin-left: calc(10% - 20px) | |
296 | margin-right: 40px | |
0596f5e7 | 297 | @media screen and (max-width: 630px) |
d449ae46 BA |
298 | float: none |
299 | margin: 0 auto 10px auto | |
300 | .diag22 | |
301 | float: left | |
302 | margin-right: calc(10% - 20px) | |
0596f5e7 | 303 | @media screen and (max-width: 630px) |
d449ae46 BA |
304 | float: none |
305 | margin: 0 auto | |
306 | figcaption | |
307 | display: block | |
308 | clear: both | |
309 | padding-top: 5px | |
69f3d801 | 310 | font-size: 0.8em |
d449ae46 | 311 | |
1d184b4c BA |
312 | p.boxed |
313 | background-color: #FFCC66 | |
314 | padding: 5px | |
315 | ||
316 | .stageDelimiter | |
317 | color: purple | |
318 | ||
319 | // To show (new) pieces, and/or there values... | |
320 | figure.showPieces > img | |
321 | width: 50px | |
322 | ||
323 | figure.showPieces > figcaption | |
324 | color: #6C6C6C | |
325 | ||
1d184b4c BA |
326 | .section-title |
327 | padding: 0 | |
328 | ||
329 | .section-title > h4 | |
330 | padding: 5px | |
331 | ||
1d184b4c BA |
332 | ol, ul:not(.browser-default) |
333 | padding-left: 20px | |
334 | ||
335 | ul:not(.browser-default) | |
336 | margin-top: 5px | |
337 | ||
338 | ul:not(.browser-default) > li | |
339 | list-style-type: disc | |
340 | ||
d449ae46 | 341 | // Problems section: |
da06a6eb | 342 | |
b5fb8e69 | 343 | .newproblem-form input, .newproblem-form textarea |
da06a6eb BA |
344 | width: 100% |
345 | ||
346 | .emphasis | |
347 | font-style: italic | |
348 | ||
349 | #newpbInstructions | |
350 | margin-bottom: var(--universal-margin); | |
351 | ||
352 | .center-btn | |
353 | margin-left: 40% | |
354 | ||
355 | //TODO? | |
356 | .center-inline | |
357 | text-align: center | |
358 | .center-block | |
359 | margin-left: auto | |
360 | margin-right: auto | |
361 | ||
362 | .mistake-newproblem | |
363 | color: #663300 | |
1a788978 BA |
364 | |
365 | #problem-solution | |
366 | display: none | |
b5fb8e69 | 367 | |
b5fb8e69 | 368 | #solution-div h3 |
a5d56686 BA |
369 | background-color: lightgrey |
370 | padding: 3px 5px | |
643479f8 BA |
371 | |
372 | .newproblem-form, .newproblem-preview | |
373 | max-width: 90% | |
3a609580 | 374 | |
a5d56686 BA |
375 | #problemControls |
376 | width: 75% | |
377 | margin: 0 auto | |
378 | @media screen and (max-width: 767px) | |
379 | width: 100% | |
380 | margin: 0 | |
3a609580 | 381 | |
a5d56686 BA |
382 | .problem |
383 | margin: 10px 0 |