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