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