09f1b219beaa468e7edb6dcda464ce5d79153ef1
[autoinstalls/wordpress.git] / wp-admin / css / about.css
1 /*------------------------------------------------------------------------------
2   22.0 - About Pages
3
4    1.0 Global: About, Credits, Freedoms
5     1.1 Typography
6     1.2 Structure
7     1.3 Point Releases
8    2.0 About Page
9     2.1 Typography
10     2.2 Structure
11    3.0 Credits & Freedoms Pages
12 ------------------------------------------------------------------------------*/
13
14 /*------------------------------------------------------------------------------
15   1.0 - Global: About, Credits, Freedoms
16 ------------------------------------------------------------------------------*/
17
18 .about-wrap {
19         position: relative;
20         margin: 25px 40px 0 20px;
21         max-width: 1050px; /* readability */
22         font-size: 15px;
23 }
24
25 .about-wrap div.updated,
26 .about-wrap div.error {
27         display: none !important;
28 }
29
30 .about-wrap hr {
31         border: 0;
32         height: 0;
33         margin: 0;
34         border-top: 1px solid rgba(0, 0, 0, 0.1);
35 }
36
37 .about-wrap img {
38         margin: 0;
39         max-width: 100%;
40         height: auto;
41         vertical-align: middle;
42 }
43
44 /* WordPress Version Badge */
45
46 .wp-badge {
47         background: #0074a2 url(../images/w-logo-white.png?ver=20131202) no-repeat;
48         background-position: center 24px;
49         -webkit-background-size: 85px 85px;
50         background-size: 85px 85px;
51         color: #78c8e6;
52         font-size: 14px;
53         text-align: center;
54         font-weight: 600;
55         margin: 5px 0 0;
56         padding-top: 120px;
57         height: 40px;
58         display: inline-block;
59         width: 150px;
60         text-rendering: optimizeLegibility;
61         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
62         box-shadow: 0 1px 3px rgba(0,0,0,0.2);
63 }
64
65 .svg .wp-badge {
66         background-image: url(../images/wordpress-logo-white.svg?ver=20131110);
67 }
68
69 .about-wrap .wp-badge {
70         position: absolute;
71         top: 0;
72         right: 0;
73 }
74
75 /* Tabs */
76
77 .about-wrap h2.nav-tab-wrapper {
78         padding-left: 6px;
79 }
80
81 .about-wrap h2 .nav-tab {
82         padding: 4px 15px 6px;
83         margin: 0 3px -1px 0;
84         font-size: 18px;
85         vertical-align: top;
86         border-width: 1px;
87         white-space: nowrap;
88 }
89
90 /* 1.1 - Typography */
91
92 .about-wrap p {
93         line-height: 1.6em;
94         font-size: 14px;
95 }
96
97 .about-wrap h1 {
98         margin: 0.2em 200px 0 0;
99         color: #333;
100         line-height: 1.2em;
101         font-size: 2.8em;
102         font-weight: 400;
103 }
104
105 .about-wrap h3 {
106         margin: 2em 0 .6em;
107         font-size: 1.25em;
108         line-height: 1.5em;
109 }
110
111 .about-wrap h4 {
112         color: #222;
113 }
114
115 .about-wrap code,
116 .about-wrap ol li p {
117         font-size: 14px;
118 }
119
120 .about-wrap .about-description,
121 .about-wrap .about-text {
122         margin-top: 1.4em;
123         font-weight: normal;
124         line-height: 1.6em;
125         font-size: 19px;
126 }
127
128 .about-wrap .about-text {
129         margin: 1em 200px 1em 0;
130         min-height: 60px;
131         color: #777;
132 }
133
134 /* 1.2 - Structure */
135
136 .about-wrap .two-col > div {
137         position: relative;
138         width: 47.6%;
139         margin-right: 4.799999999%;
140         float: left;
141 }
142
143 .about-wrap .three-col > div {
144         position: relative;
145         width: 29.95%;
146         margin-right: 4.999999999%;
147         float: left;
148 }
149
150 .about-wrap .col .last-feature {
151         margin-right: 0;
152 }
153
154 /* 1.3 - Point Releases */
155
156 .about-wrap .point-releases {
157         margin-top: 5px;
158         border-bottom: 1px solid #dfdfdf;
159 }
160
161 .about-wrap .changelog.point-releases h3 {
162         padding-top: 35px;
163 }
164
165 .about-wrap .changelog.point-releases h3:first-child {
166         padding-top: 7px;
167 }
168
169 /*------------------------------------------------------------------------------
170   2.0 - About Page
171 ------------------------------------------------------------------------------*/
172
173 /* 2.1 - Typography */
174
175 .about-wrap .headline-feature h2 {
176         margin: 1.1em 0 0.2em;
177         font-size: 2.4em;
178         font-weight: 300;
179         line-height: 1.3;
180         text-align: center;
181 }
182
183 .about-wrap .feature-list h2 {
184         margin: 30px 0 15px;
185         text-align: center;
186 }
187
188 .about-wrap .dfw h3 {
189         margin-top: 1em;
190         text-align: center;
191 }
192
193 .about-wrap .feature-section h4 {
194         margin: 1.4em 0 0.6em 0;
195         font-size: 1.2em;
196 }
197
198 .about-wrap .feature-section p {
199         margin-top: 0.6em;
200 }
201
202 .about-wrap .dfw p {
203         max-width: 68%;
204         margin: 0 auto 20px;
205 }
206
207 /* 2.2 - Structure */
208
209 .about-wrap .featured-image {
210         text-align: center;
211 }
212
213 .about-wrap .feature-section {
214         overflow: hidden;
215         padding-bottom: 20px;
216 }
217
218 .about-wrap .headline-feature .feature-section {
219         margin: 0 auto;
220         max-width: 82%;
221 }
222
223 .about-wrap .headline-feature .feature-section .col:first-child {
224         float: left;
225         margin: 15px 5% 0 0;
226         width: 55%;
227 }
228
229 .about-wrap .headline-feature .feature-section .col:last-child {
230         float: right;
231         margin: 15px 0 40px;
232         width: 40%;
233 }
234
235 .about-wrap .feature-list .feature-section {
236         margin-top: 0;
237 }
238
239 .about-wrap .dfw .feature-section {
240         overflow: visible;
241 }
242
243 .about-wrap .dfw-container {
244         position: relative;
245         overflow: hidden;
246         margin-top: 50px;
247         -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
248         box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
249 }
250
251 .about-wrap .dfw-container .overlay-image {
252         position: absolute;
253         top: 0;
254         left: 0;
255         /* Cubic Bezier to speed up the slide-out of the full-width sidebar image */
256         -webkit-transition: 0.8s -webkit-transform cubic-bezier(.9,.03,1,.61),
257                     0.65s opacity linear;
258         transition: 0.8s transform cubic-bezier(.9,.03,1,.61),
259                     0.65s opacity linear;
260 }
261
262 .about-wrap .dfw-container .overlay-image.fade-in {
263         opacity: 0;
264 }
265
266 .about-wrap .dfw-container .overlay-image.from-left {
267         -webkit-transform: translate3d(-100%, 0, 0);
268         transform: translate3d(-100%, 0, 0);
269 }
270
271 .about-wrap .dfw-container:hover .overlay-image {
272         opacity: 1;
273         -webkit-transform: translate3d(0, 0, 0);
274         transform: translate3d(0, 0, 0);
275         /* Cubic Bezier to speed up the slide-in of the full-width sidebar image */
276         -webkit-transition: 0.7s -webkit-transform cubic-bezier( 0, 0.8, 0.8, 1 ),
277                     0.8s opacity linear;
278         transition: 0.7s transform cubic-bezier( 0, 0.8, 0.8, 1 ),
279                     0.8s opacity linear;
280 }
281
282 /* Return to Dashboard Home link */
283
284 .about-wrap .return-to-dashboard {
285         margin: 30px 0 0 -5px;
286         font-size: 14px;
287         font-weight: bold;
288 }
289
290 .about-wrap .return-to-dashboard a {
291         text-decoration: none;
292         padding: 0 5px;
293 }
294
295 /* SVGs */
296 .about-wrap .feature-list svg {
297         float: left;
298         clear: left;
299         margin: 15px 15px 0 0 ;
300         height: 90px;
301         width: 90px;
302         background-color: #cccccc;
303         -webkit-border-radius: 50%;
304         border-radius: 50%;
305         fill: #999;
306         border: 1px solid #c1c1c1;
307 }
308
309 .about-wrap .feature-list.finer-points h4,
310 .about-wrap .feature-list.finer-points p {
311         margin-left: 115px;
312 }
313
314 /*------------------------------------------------------------------------------
315   3.0 - Credits & Freedoms Pages
316 ------------------------------------------------------------------------------*/
317
318 /* Credits */
319
320 .about-wrap h4.wp-people-group {
321         margin-top: 2.6em;
322         font-size: 16px;
323 }
324
325 .about-wrap ul.wp-people-group {
326         overflow: hidden;
327         padding: 0 5px;
328         margin: 0 -15px 0 -5px;
329 }
330
331 .about-wrap ul.compact {
332         margin-bottom: 0
333 }
334
335 .about-wrap li.wp-person {
336         display: inline-block;
337         vertical-align: top;
338         margin-right: 10px;
339         padding-bottom: 15px;
340         height: 70px;
341         width: 280px;
342 }
343
344 .about-wrap ul.compact li.wp-person {
345         height: auto;
346         width: 180px;
347         padding-bottom: 0;
348         margin-bottom: 0;
349 }
350
351 .about-wrap li.wp-person img.gravatar {
352         float: left;
353         margin: 0 10px 10px 0;
354         padding: 2px;
355         width: 60px;
356         height: 60px;
357 }
358
359 .about-wrap ul.compact li.wp-person img.gravatar {
360         width: 30px;
361         height: 30px;
362 }
363
364 .about-wrap li.wp-person a.web {
365         display: block;
366         margin: 6px 0 2px;
367         font-size: 16px;
368         font-weight: normal;
369         line-height: 1.6em;
370         text-decoration: none;
371 }
372
373 .about-wrap #wp-people-group-validators + p.wp-credits-list {
374         margin-top: 0;
375 }
376
377 .about-wrap p.wp-credits-list a {
378         white-space: nowrap;
379 }
380
381 /* Freedoms */
382
383 .freedoms-php .about-wrap ol {
384         margin: 40px 60px;
385 }
386
387 .freedoms-php .about-wrap ol li {
388         list-style-type: decimal;
389         font-weight: bold;
390 }
391
392 .freedoms-php .about-wrap ol p {
393         font-weight: normal;
394         margin: 0.6em 0;
395 }
396
397 /*------------------------------------------------------------------------------
398   4.0 - Media Queries
399 ------------------------------------------------------------------------------*/
400
401 @media screen and ( max-width: 782px ) {
402         .about-wrap .one-col > div,
403         .about-wrap .two-col > div,
404         .about-wrap .three-col > div {
405                 width: 100%;
406                 margin: 0 0 40px;
407                 padding: 0 0 40px;
408                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
409         }
410
411         .about-wrap .feature-list div,
412         .about-wrap .col > div.last-feature {
413                 margin: 0;
414                 padding: 0;
415                 border-bottom: none;
416         }
417
418         .about-wrap .headline-feature .feature-section {
419                 max-width: 100%;
420         }
421
422         .about-wrap .feature-list .feature-section {
423                 padding: 0 0 40px;
424         }
425 }
426
427 @media only screen and (max-width: 500px) {
428         .about-wrap {
429                 margin-right: 20px;
430                 margin-left: 10px;
431         }
432
433         .about-wrap h1,
434         .about-wrap .about-text {
435                 margin-right: 0;
436         }
437
438         .about-wrap .about-text {
439                 margin-bottom: 0.25em;
440         }
441
442         .about-wrap .wp-badge {
443                 position: relative;
444                 margin-bottom: 1.5em;
445                 width: 100%;
446         }
447
448         .about-wrap h2.nav-tab-wrapper {
449                 padding-left: 0;
450                 border-bottom: 0;
451         }
452
453         .about-wrap h2 .nav-tab {
454                 margin-top: 10px;
455                 margin-right: 10px;
456                 border-bottom: 1px solid #ccc;
457         }
458
459         .about-wrap .three-col div,
460         .about-wrap .headline-feature .feature-section div {
461                 width: 100% !important;
462                 float: none !important;
463         }
464
465         .about-wrap .dfw p {
466                 max-width: 90%;
467         }
468 }
469
470 @media only screen and (max-width: 400px) {
471         .about-wrap .feature-list svg {
472                 margin-top: 15px;
473                 height: 65px;
474                 width: 65px;
475         }
476         .about-wrap .feature-list.finer-points h4,
477         .about-wrap .feature-list.finer-points p {
478                 margin-left: 80px;
479         }
480 }