Code reorganization
[vchess.git] / client / src / stylesheets / variant.sass
... / ...
CommitLineData
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
14a#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
60label.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
70td.highlight-lm
71 background-color: plum
72
73button.play
74 height: 24px
75 margin: 0
76 padding: 0 10px 24px 10px
77 box-sizing: border-box
78 border: 1px solid brown
79button.play.spaceleft
80 margin-left: 15px
81button.play.spaceright
82 margin-right: 15px
83button.play.big-spaceleft
84 margin-left: 25px
85button.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
95button.above-board
96 margin-left: 15px
97 margin-right: 15px
98
99i.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
138button.playing
139 background-color: #ffcc99
140 &:hover
141 background-color: #ffcc99
142
143button.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
157div.board
158 float: left
159 height: 0
160 display: inline-block
161 position: relative
162
163div.board8
164 width: 12.5%
165 padding-bottom: 12.5%
166
167div.board10
168 width: 10%
169 padding-bottom: 10%
170
171div.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
202img.piece
203 width: 100%
204
205img.piece, img.mark-square
206 max-width: 100%
207 height: auto
208 display: block
209
210img.mark-square
211 opacity: 0.6
212 width: 76%
213 position: absolute
214 top: 12%
215 left: 12%
216 opacity: .7
217
218img.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
286figure.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
316p.boxed
317 background-color: #FFCC66
318 padding: 5px
319
320.stageDelimiter
321 color: purple
322
323// To show (new) pieces, and/or there values...
324figure.showPieces > img
325 width: 50px
326
327figure.showPieces > figcaption
328 color: #6C6C6C
329
330.section-title
331 padding: 0
332
333.section-title > h4
334 padding: 5px
335
336ol, ul:not(.browser-default)
337 padding-left: 20px
338
339ul:not(.browser-default)
340 margin-top: 5px
341
342ul: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