]> Wikimedia Canada | Git repositories - paypal.git/blob - wmca.css
Update README with repository information
[paypal.git] / wmca.css
1 * {
2 box-sizing: border-box;
3 }
4
5 body {
6 background-color: #F3F3F3;
7 margin: 1em;
8 font-family: sans-serif;
9 font-size: 1.4rem;
10 color: #000;
11 }
12
13 a {
14 text-decoration: none;
15 padding-bottom: 0px;
16 border-bottom: 1px solid blue;
17 }
18
19 img.logo {
20 display: flex;
21 float: left;
22 max-width: 25%;
23 height: auto;
24 }
25
26 .langlink {
27 float: right;
28 }
29
30 .title {
31 text-align: center;
32 padding-top: 75px;
33 }
34
35 h1 {
36 font-weight: bold;
37 text-align: center;
38 }
39
40 h2 {
41 font-weight: bold;
42 font-size: 1.6em;
43 }
44
45 h3 {
46 font-weight: bold;
47 font-size: 1.4em;
48 }
49
50 p {
51 margin: 0 0 1em 0;
52 }
53
54 #main {
55 margin: 0;
56 padding: 0;
57 display: -webkit-flex;
58 display: flex;
59 -webkit-flex-flow: row;
60 flex-flow: row;
61 }
62
63 header,
64 footer,
65 #main > article,
66 #main > leftmargin,
67 #main > rightmargin {
68 margin: 4px;
69 padding: 1em;
70 }
71
72 #main > article {
73 background: #F3F3F3;
74 -webkit-flex: 4 1 0;
75 flex: 4 1 0;
76 -webkit-order: 2;
77 order: 2;
78 }
79
80 #green {
81 display: -webkit-flex;
82 display: flex;
83 -webkit-flex-direction: row;
84 flex-direction: row;
85 padding-bottom: 1em;
86 }
87
88 #join {
89 background-color: #CCE7CD;
90 border: 1px solid #5EAC58;
91 padding: 1em;
92 width: 60%;
93 }
94
95 #donate {
96 background-color: #CCE7CD;
97 border: 1px solid #5EAC58;
98 padding: 1em;
99 width: 40%;
100 }
101
102 #join > h2, #donate > h2 {
103 text-align: center;
104 }
105
106 #why {
107 background: #F3F3F3;
108 }
109
110 #main > leftmargin,
111 #main > rightmargin {
112 background: #F3F3F3;
113 }
114
115 #main > leftmargin {
116 -webkit-order: 1;
117 order: 1;
118 }
119
120 #main > rightmargin {
121 -webkit-order: 3;
122 order: 3;
123 }
124
125 header, footer {
126 display: block;
127 min-height: 80px;
128 }
129
130 header {
131 background: #F3F3F3;
132 }
133
134 footer {
135 background: #DDD;
136 font-size: 75%;
137 font-style: italic;
138 padding: 0.5em;
139 }
140
141 .flex-outer,
142 .flex-inner {
143 list-style-type: none;
144 padding: 0;
145 }
146
147 .flex-outer {
148 margin: 0 auto;
149 }
150
151 .flex-outer li {
152 display: flex;
153 flex-wrap: wrap;
154 align-items: center;
155 }
156
157 .flex-inner {
158 display: flex;
159 flex-wrap: wrap;
160 justify-content: space-between;
161 flex-direction: column;
162 }
163
164 .flex-outer > li:not(:last-child) {
165 margin-bottom: 20px;
166 }
167
168 .flex-outer li label {
169 padding: 8px;
170 }
171
172 .flex-outer li p {
173 padding: 8px;
174 align-items: center;
175 }
176
177 .flex-outer > li > label,
178 .flex-outer li p {
179 flex: 1 0 120px;
180 max-width: 220px;
181 }
182
183 .flex-outer > li > label + * {
184 flex: 1 0 220px;
185 }
186
187 .flex-outer li p {
188 margin: 0;
189 }
190
191 .flex-outer li input:not([type='radio']) {
192 padding: 15px;
193 }
194
195 span.break:before {
196 content: "\A";
197 white-space: pre;
198 }
199
200 select {
201 display: inline-block;
202 width: 100%;
203 padding: 10px 15px;
204 font-size: 1.4rem;
205 border: 0;
206 border-radius: 0;
207 }
208
209 .radio-item {
210 display: flex;
211 align-items: baseline;
212 justify-content: space-between;
213 padding-bottom: 0.5em;
214 }
215
216 input[type="radio"] {
217 align-self: center;
218 }
219
220 input[type='text'] {
221 display: inline-block;
222 width: 100%;
223 font-size: 1.4rem;
224 }
225
226 #donate > form {
227 text-align: center;
228 }
229
230 .btn {
231 padding: 16px;
232 border: 1px solid #333;
233 background: #333;
234 color: #fff;
235 text-transform: uppercase;
236 letter-spacing: .09em;
237 border-radius: 2px;
238 font-weight: bold;
239 font-size: 1.0rem;
240 }
241
242 .btn:hover {
243 background: yellow;
244 color: #000;
245 border: 1px solid #333;
246 }
247
248 .btn:focus {
249 background: yellow;
250 color: #000;
251 border: 1px solid #333;
252 }
253
254 @-ms-viewport {
255 width: device-width;
256 }
257
258 @media only screen and (max-width: 768px) {
259
260 body {
261 font-size: 1.2rem;
262 margin: 0em;
263 }
264
265 #main, #page {
266 -webkit-flex-flow: column;
267 flex-flow: column;
268 }
269
270 #main > article, #main > leftmargin, #main > rightmargin {
271 /* Return them to document order */
272 -webkit-order: 0;
273 order: 0;
274 }
275
276 #main > article {
277 padding 0.5em;
278 }
279
280 #main > leftmargin, #main > rightmargin {
281 /* Hide them */
282 visibility: hidden;
283 margin: 0;
284 padding: 0;
285 order: 3;
286 }
287
288 #green {
289 -webkit-flex-flow: column;
290 flex-flow: column;
291 padding-bottom: 1em;
292 -webkit-order: 0;
293 order: 0;
294 }
295
296 #join, #donate {
297 width: 100%;
298 padding: 1em;
299 border: 0px;
300 }
301
302 #join {
303 border-bottom: 1px solid #5EAC58;
304 }
305
306 #donate {
307 border-top: 1px solid #5EAC58;
308 }
309
310 br {
311 content: ' ';
312 }
313
314 br:after {
315 content: ' ';
316 }
317
318 select, input[type='text'] {
319 font-size: 1.0rem;
320 }
321
322 header, footer {
323 min-height: 50px;
324 }
325
326 footer {
327 position: sticky;
328 }
329
330 .btn {
331 display: inline-block;
332 width: 100%;
333 margin-top: 2em;
334 }
335 }