Fix diagram size for smartphones
[vchess.git] / public / stylesheets / variant.sass
CommitLineData
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 14a#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
a5d56686 33 padding: 0
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
45 margin: 1px 0 0 15px
186516b8 46
d449ae46
BA
47#flagMenu
48 @media screen and (min-width: 768px)
a5d56686 49 margin-top: 1px
d449ae46 50 float: right
d449ae46
BA
51 margin: 0 15px
52 @media screen and (max-width: 767px)
a5d56686 53 margin: 25px 5px 0 15px
d449ae46
BA
54 img
55 display: inline-block
a5d56686
BA
56 margin: 0
57 height: 25px
186516b8 58
d449ae46
BA
59label.drawer-toggle
60 padding: 0
61 &::before
a5d56686
BA
62 font-size: 2em;
63 max-height: 32px;
64 top: -7px;
65 left: 5px
d449ae46
BA
66
67// Game section:
18f9c763 68
a5d56686
BA
69button.play
70 height: 24px
71 margin: 0
72 padding: 0 10px 24px 10px
73 box-sizing: border-box
1d184b4c 74 border: 1px solid brown
a5d56686
BA
75button.play.spaceleft
76 margin-left: 15px
77button.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
87button.above-board
88 margin-left: 15px
89 margin-right: 15px
90
91i.material-icons
92 font-size: 24px
1d184b4c 93
bdb1f12d 94.indic-left
a5d56686 95 border: 1px solid brown
bdb1f12d 96 float: left
a5d56686
BA
97 margin: 0 0 var(--universal-margin) 10vh
98 @media screen and (max-width: 767px)
99 margin-left: 20px
bdb1f12d
BA
100
101.indic-right
a5d56686 102 border: 1px solid brown
bdb1f12d 103 float: right
a5d56686
BA
104 margin: 0 10vh var(--universal-margin) 0
105 @media screen and (max-width: 767px)
106 margin-right: 20px
92342261 107
d449ae46
BA
108.my-chatmsg
109 color: black
92342261 110
d449ae46
BA
111.opp-chatmsg
112 color: blue
92342261 113
a5d56686
BA
114// TODO: this fix is not good (button height 0 if chat overflow window height)
115#sendChatBtn
116 min-height: 42px
117
1d184b4c
BA
118.connected
119 background-color: green
120
121.disconnected
122 background-color: red
123
bdb1f12d
BA
124.white-turn
125 background-color: white
126
127.black-turn
128 background-color: black
129
d449ae46
BA
130button.playing
131 background-color: #ffcc99
132 &:hover
133 background-color: #ffcc99
134
135button.seek
136 background-color: #cc99ff
137 &:hover
138 background-color: #cc99ff
139
a5d56686
BA
140.game.reserve-div
141 margin-bottom: 18px
142
d449ae46
BA
143.reserve-count
144 padding-left: 40%
145
d449ae46
BA
146.reserve-row-1
147 margin-bottom: 15px
148
1d184b4c
BA
149div.board
150 float: left
1d184b4c 151 height: 0
1d184b4c
BA
152 display: inline-block
153 position: relative
154
c94bc812
BA
155div.board8
156 width: 12.5%
157 padding-bottom: 12.5%
158
a5d56686
BA
159div.board8-reserve
160 width: 10%
161 padding-bottom: 10%
162
c94bc812
BA
163div.board10
164 width: 10%
165 padding-bottom: 10%
166
167div.board11
8a196305 168 width: 9.09%
c94bc812
BA
169 padding-bottom: 9.1%
170
a5d56686
BA
171// NOTE: no variants with reserve of size != 8
172
bdb1f12d 173.game
a5d56686
BA
174 width: 80vh
175 margin: 0 auto
80b15df1
BA
176 .board
177 cursor: pointer
a5d56686
BA
178 @media screen and (max-width: 767px)
179 width: 100%
180 margin: 0
1d184b4c
BA
181
182#choices
80b15df1
BA
183 margin: 0 auto 0 auto
184 position: relative
185 z-index: 300
186 overflow-y: inherit
d449ae46 187 background-color: rgba(0,0,0,0)
80b15df1
BA
188 img
189 cursor: pointer
190 background-color: #e6ee9c
9a3c9f79 191 &:hover
80b15df1
BA
192 background-color: skyblue
193 .choice-piece
194 width: 90%
195 max-width: 100%
196 height: auto
197 display: block
198
d449ae46
BA
199img.piece
200 width: 100%
201
80b15df1
BA
202img.piece, img.mark-square
203 max-width: 100%
204 height: auto
205 display: block
1d184b4c
BA
206
207img.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
215img.ghost
216 position: absolute
217 opacity: 0.4
218 top: 0
219
130db3ef
BA
220.highlight
221 background-color: #00cc66 !important
222
223.incheck
224 background-color: #cc3300 !important
225
a897b421 226.light-square.lichess
80b15df1 227 background-color: #f0d9b5;
a897b421 228.dark-square.lichess
80b15df1 229 background-color: #b58863;
d449ae46 230
a897b421 231.light-square.chesscom
80b15df1 232 background-color: #e5e5ca;
a897b421 233.dark-square.chesscom
80b15df1 234 background-color: #6f8f57;
d449ae46 235
a897b421 236.light-square.chesstempo
80b15df1 237 background-color: #fdfdfd;
a897b421 238.dark-square.chesstempo
80b15df1 239 background-color: #88a0a8;
1d184b4c 240
1d184b4c
BA
241.light-square-diag
242 background-color: #e5e5ca
243.dark-square-diag
244 background-color: #6f8f57
245
d449ae46
BA
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
a5d56686
BA
265#modal-eog+div .card
266 overflow: hidden
267
268#actions
269 margin: 10px 0
270
d449ae46
BA
271// Rules section:
272
273.warn
274 padding: 3px
275 color: red
276 background-color: lightgrey
277 font-weight: bold
278
279figure.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%
1d5f2b65 287 min-width: 240px
d449ae46
BA
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
1d184b4c
BA
309p.boxed
310 background-color: #FFCC66
311 padding: 5px
312
313.stageDelimiter
314 color: purple
315
316// To show (new) pieces, and/or there values...
317figure.showPieces > img
318 width: 50px
319
320figure.showPieces > figcaption
321 color: #6C6C6C
322
1d184b4c
BA
323.section-title
324 padding: 0
325
326.section-title > h4
327 padding: 5px
328
1d184b4c
BA
329ol, ul:not(.browser-default)
330 padding-left: 20px
331
332ul:not(.browser-default)
333 margin-top: 5px
334
335ul:not(.browser-default) > li
336 list-style-type: disc
337
d449ae46 338// Problems section:
da06a6eb 339
b5fb8e69 340.newproblem-form input, .newproblem-form textarea
da06a6eb
BA
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
1a788978
BA
361
362#problem-solution
363 display: none
b5fb8e69 364
b5fb8e69 365#solution-div h3
a5d56686
BA
366 background-color: lightgrey
367 padding: 3px 5px
643479f8
BA
368
369.newproblem-form, .newproblem-preview
370 max-width: 90%
3a609580 371
a5d56686
BA
372#problemControls
373 width: 75%
374 margin: 0 auto
375 @media screen and (max-width: 767px)
376 width: 100%
377 margin: 0
3a609580 378
a5d56686
BA
379.problem
380 margin: 10px 0