Some style improvements
[vchess.git] / public / stylesheets / variant.sass
1 .container#variantPage
2 padding: 0
3
4 //.container#variantPage > .row > div
5 @media screen and (max-width: 767px)
6 .col-sm-12
7 padding: 0
8 h4
9 margin: 0 0 10px 0
10 p
11 margin-left: 0
12 margin-right: 0
13 padding: 0 3px
14
15 .warn
16 padding: 3px
17 color: red
18 background-color: lightgrey
19 font-weight: bold
20
21 .playing, button.playing:hover
22 background-color: #ffcc99
23
24 .seek, button.seek:hover
25 background-color: #cc99ff
26
27 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
28 figure.diagram-container > .diagram
29 display: block
30 width: 45%
31 min-width: 300px
32 max-width: 800px
33 margin-left: auto
34 margin-right: auto
35
36 .topindicator
37 position: relative
38 border: 1px solid brown
39
40 .indic-left
41 float: left
42 margin: 0 0 10px 20px
43
44 .indic-right
45 float: right
46 margin: 0 20px 10px 0
47
48 .marginleft
49 margin-left: 30px
50
51 .reserve-count
52 padding-left: 40%
53
54 .reserve-div
55 margin-bottom: 20px
56
57 .reserve-row-1
58 margin-bottom: 15px
59
60 .connected
61 background-color: green
62
63 .disconnected
64 background-color: red
65
66 .settings-btn
67 padding: 6px 7px 0 7px
68
69 .settings-btn-small
70 padding: 0 3px
71
72 .white-turn
73 background-color: white
74
75 .black-turn
76 background-color: black
77
78 div.board
79 float: left
80 height: 0
81 display: inline-block
82 position: relative
83
84 div.board8
85 width: 12.5%
86 padding-bottom: 12.5%
87
88 div.board10
89 width: 10%
90 padding-bottom: 10%
91
92 div.board11
93 width: 9.09%
94 padding-bottom: 9.1%
95
96 .game
97 clear: both
98
99 .game .board
100 cursor: pointer
101
102 #choices
103 margin-bottom: 10px
104
105 #choices
106 margin: 0 auto 0 auto
107 position: relative
108 z-index: 300
109 overflow-y: inherit
110 background-color: rgba(0,0,0,0) //transparent
111
112 #choices img
113 cursor: pointer
114 background-color: #e6ee9c
115
116 #choices img:hover
117 background-color: skyblue
118
119 img.choice-piece
120 height: 0
121 width: 90%
122 padding: 5%
123 height: 90%
124
125 img.piece, img.mark-square, img.choice-piece
126 max-width: 100%
127 height: auto
128 display: block
129
130 img.mark-square
131 opacity: 0.6
132
133 img.ghost
134 position: absolute
135 opacity: 0.4
136 top: 0
137
138 img.piece
139 width: 100%
140
141 img.mark-square
142 width: 76%
143 position: absolute
144 top: 12%
145 left: 12%
146 opacity: .7
147
148 figure.diagram-container > figcaption
149 display: block
150 clear: both
151 padding-top: 5px
152
153 .highlight
154 background-color: #00cc66 !important
155
156 .incheck
157 background-color: #cc3300 !important
158
159 .light-square.lichess
160 background-color: #f0d9b5;
161 .dark-square.lichess
162 background-color: #b58863;
163 .light-square.chesscom
164 background-color: #e5e5ca;
165 .dark-square.chesscom
166 background-color: #6f8f57;
167 .light-square.chesstempo
168 background-color: #fdfdfd;
169 .dark-square.chesstempo
170 background-color: #88a0a8;
171
172 .light-square-diag
173 background-color: #e5e5ca
174 .dark-square-diag
175 background-color: #6f8f57
176
177 p.boxed
178 background-color: #FFCC66
179 padding: 5px
180
181 .stageDelimiter
182 color: purple
183
184 // To show (new) pieces, and/or there values...
185 figure.showPieces > img
186 width: 50px
187
188 figure.showPieces > figcaption
189 color: #6C6C6C
190
191 figure.diagram-container
192 margin: 15px 0 15px 0
193 text-align: center
194 width: 100%
195 display: block
196
197 .section-title
198 padding: 0
199
200 .section-title > h4
201 padding: 5px
202
203 .section-content
204 padding: 0 5px
205
206 ol, ul:not(.browser-default)
207 padding-left: 20px
208
209 ul:not(.browser-default)
210 margin-top: 5px
211
212 ul:not(.browser-default) > li
213 list-style-type: disc
214
215 .rulesTitle
216 font-weight: bold
217 cursor: pointer
218 padding: 3px;
219 background-color: lightgrey
220
221 #fen-string
222 margin-top: 0
223
224 #pgn-game
225 margin-top: 0
226 margin-bottom: 0
227
228 #downloadBtn
229 display: block
230 margin-left: auto
231 margin-right: auto
232
233 #pgn-div > a
234 display: none
235
236 #fen-div > p
237 margin-left: 0
238 margin-right: 0