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