f466fd2240c107ac50bc1035e3d066717067a351
[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 .about-wrap .notice {
28         display: none !important;
29 }
30
31 .about-wrap hr {
32         border: 0;
33         height: 0;
34         margin: 0;
35         border-top: 1px solid rgba(0, 0, 0, 0.1);
36 }
37
38 .about-wrap img {
39         margin: 0;
40         max-width: 100%;
41         height: auto;
42         vertical-align: middle;
43 }
44
45 .about-wrap .jetpack-video-wrapper {
46         margin-bottom: 0;
47 }
48
49 /* WordPress Version Badge */
50
51 .wp-badge {
52         background: #0073aa url(../images/w-logo-white.png?ver=20131202) no-repeat;
53         background-position: center 24px;
54         -webkit-background-size: 85px 85px;
55         background-size: 85px 85px;
56         color: #78c8e6;
57         font-size: 14px;
58         text-align: center;
59         font-weight: 600;
60         margin: 5px 0 0;
61         padding-top: 120px;
62         height: 40px;
63         display: inline-block;
64         width: 150px;
65         text-rendering: optimizeLegibility;
66         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
67         box-shadow: 0 1px 3px rgba(0,0,0,0.2);
68 }
69
70 .svg .wp-badge {
71         background-image: url(../images/wordpress-logo-white.svg?ver=20131110);
72 }
73
74 .about-wrap .wp-badge {
75         position: absolute;
76         top: 0;
77         right: 0;
78 }
79
80 /* Tabs */
81
82 .about-wrap .nav-tab {
83         padding-right: 15px;
84         padding-left: 15px;
85         font-size: 18px;
86 }
87
88 /* 1.1 - Typography */
89
90 .about-wrap p {
91         line-height: 1.6em;
92         font-size: 14px;
93 }
94
95 .about-wrap h1 {
96         margin: 0.2em 200px 0 0;
97         padding: 0;
98         color: #32373c;
99         line-height: 1.2em;
100         font-size: 2.8em;
101         font-weight: 400;
102 }
103
104 .about-wrap h3 {
105         margin: 1.25em 0 .6em;
106         font-size: 1.25em;
107         line-height: 1.5em;
108 }
109
110 .about-wrap h4 {
111         color: #23282d;
112 }
113
114 .about-wrap code,
115 .about-wrap ol li p {
116         font-size: 14px;
117         font-weight: normal;
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 [class$=col] .col {
137         float: left;
138         position: relative;
139 }
140 .about-wrap .two-col .col {
141         margin-right: 4.799999999%;
142         width: 47.6%;
143 }
144 .about-wrap .feature-section.two-col .col {
145         display: inline-block;
146         float: none;
147         margin-right: 4.799999999%;
148         width: calc( 47.6% - 4px );
149         vertical-align: middle;
150 }
151
152 .about-wrap .three-col .col {
153         margin-right: 4.999999999%;
154         width: 29.95%;
155 }
156
157 .about-wrap .two-col .col:nth-of-type(2n),
158 .about-wrap .three-col .col:nth-of-type(3n) {
159         margin-right: 0;
160 }
161
162 /* 1.3 - Point Releases */
163
164 .about-wrap .point-releases {
165         margin-top: 5px;
166         border-bottom: 1px solid #dfdfdf;
167 }
168
169 .about-wrap .changelog.point-releases h3 {
170         padding-top: 35px;
171 }
172
173 .about-wrap .changelog.point-releases h3:first-child {
174         padding-top: 7px;
175 }
176
177 /*------------------------------------------------------------------------------
178   2.0 - About Page
179 ------------------------------------------------------------------------------*/
180
181 /* 2.1 - Typography */
182
183 .about-wrap .headline-feature h2 {
184         margin: 30px 0 30px;
185         font-size: 2.2em;
186         font-weight: 300;
187         line-height: 1.3;
188         text-align: center;
189 }
190
191 .about-wrap .headline-feature h3 {
192         margin-top: 0;
193         text-align: left;
194 }
195
196 .about-wrap .feature-section.two-col h3 {
197         margin-top: 0;
198 }
199
200 .about-wrap .feature-list h2 {
201         margin: 30px 0 15px;
202         text-align: center;
203 }
204
205 .about-wrap .feature-section h4 {
206         margin: 1.4em 0 0.6em 0;
207         font-size: 1em;
208 }
209
210 .about-wrap .feature-section p {
211         margin-top: 0.6em;
212 }
213
214 .about-wrap .two-col-text {
215         -webkit-column-count: 2;
216         -moz-column-count: 2;
217         column-count: 2;
218         -webkit-column-gap: 40px;
219         -moz-column-gap: 40px;
220         column-gap: 40px;
221 }
222
223 .about-wrap .two-col-text p:first-of-type {
224         margin-top: 0;
225 }
226
227 /* 2.2 - Structure */
228
229 .about-wrap .headline-feature.feature-video {
230         position: relative;
231         margin: 40px 0;
232         padding-bottom: 56.25%;
233         width: 100%;
234         max-width: 100%;
235         height: 0;
236         text-align: center;
237 }
238
239 .about-wrap .feature-video embed {
240         position: absolute;
241         top: 0;
242         left: 0;
243         width: 100%;
244         height: 100%;
245 }
246
247 .about-wrap .featured-image {
248         text-align: center;
249 }
250
251 .about-wrap .feature-section {
252         overflow: hidden;
253         padding: 0 0 40px;
254 }
255
256 .about-wrap .headline-feature {
257         margin: 0 auto;
258         max-width: 80%;
259 }
260
261 .about-wrap .feature-section .media-container {
262         overflow: hidden;
263 }
264
265 .about-wrap .headline-feature .col {
266         width: 65.2%;
267 }
268
269 .about-wrap .headline-feature .col.feature-image {
270         width: 30%;
271 }
272
273 .about-wrap .headline-feature .vertical-screen {
274         float: right;
275         margin-left: 40px;
276         max-width: 100%;
277 }
278
279 .about-wrap .headline-feature .horizontal-screen {
280         margin-top: 20px;
281         max-width: 100%;
282 }
283
284 .about-wrap .embed-container {
285         text-align: center;
286 }
287
288 .about-wrap .embed-container iframe {
289         max-width: 100%;
290 }
291
292 .about-wrap .wp-embedded-content {
293         max-width: 100%;
294 }
295
296 .about-wrap .feature-section:not(.under-the-hood) .col {
297         margin-top: 40px;
298 }
299
300 .about-wrap .changelog {
301         margin-bottom: 40px;
302 }
303
304 .about-wrap .changelog.feature-section .col {
305         margin-top: 40px;
306 }
307
308 /* Return to Dashboard Home link */
309
310 .about-wrap .return-to-dashboard {
311         margin: 30px 0 0 -5px;
312         font-size: 14px;
313         font-weight: bold;
314 }
315
316 .about-wrap .return-to-dashboard a {
317         text-decoration: none;
318         padding: 0 5px;
319 }
320
321 .about-wrap .feature-list.finer-points h4,
322 .about-wrap .feature-list.finer-points p {
323         margin-left: 115px;
324 }
325
326 /*------------------------------------------------------------------------------
327   3.0 - Credits & Freedoms Pages
328 ------------------------------------------------------------------------------*/
329
330 /* Credits */
331
332 .about-wrap h3.wp-people-group {
333         margin: 2.6em 0 1.33em;
334         font-size: 16px;
335         line-height: inherit;
336 }
337
338 .about-wrap ul.wp-people-group {
339         overflow: hidden;
340         padding: 0 5px;
341         margin: 0 -15px 0 -5px;
342 }
343
344 .about-wrap ul.compact {
345         margin-bottom: 0
346 }
347
348 .about-wrap li.wp-person {
349         display: inline-block;
350         vertical-align: top;
351         margin-right: 10px;
352         padding-bottom: 15px;
353         height: 70px;
354         width: 280px;
355 }
356
357 .about-wrap ul.compact li.wp-person {
358         height: auto;
359         width: 180px;
360         padding-bottom: 0;
361         margin-bottom: 0;
362 }
363
364 .about-wrap li.wp-person img.gravatar {
365         float: left;
366         margin: 0 10px 10px 0;
367         padding: 2px;
368         width: 60px;
369         height: 60px;
370 }
371
372 .about-wrap ul.compact li.wp-person img.gravatar {
373         width: 30px;
374         height: 30px;
375 }
376
377 .about-wrap li.wp-person a.web {
378         display: block;
379         margin: 6px 0 2px;
380         font-size: 16px;
381         font-weight: normal;
382         line-height: 1.6em;
383         text-decoration: none;
384 }
385
386 .about-wrap #wp-people-group-validators + p.wp-credits-list {
387         margin-top: 0;
388 }
389
390 .about-wrap p.wp-credits-list a {
391         white-space: nowrap;
392 }
393
394 /* Freedoms */
395
396 .freedoms-php .about-wrap ol {
397         margin: 40px 60px;
398 }
399
400 .freedoms-php .about-wrap ol li {
401         list-style-type: decimal;
402         font-weight: bold;
403 }
404
405 .freedoms-php .about-wrap ol p {
406         font-weight: normal;
407         margin: 0.6em 0;
408 }
409
410 /*------------------------------------------------------------------------------
411   4.0 - Media Queries
412 ------------------------------------------------------------------------------*/
413
414 @media screen and ( max-width: 782px ) {
415         .about-wrap .feature-section {
416                 padding: 0;
417                 border-bottom: none;
418         }
419
420         .about-wrap [class$=col] .col {
421                 float: none;
422                 width: 100%;
423                 margin: 40px 0 0;
424                 padding: 0 0 40px;
425         }
426
427         .about-wrap .headline-feature {
428                 position: relative;
429         }
430
431         .about-wrap .headline-feature .col.feature-image {
432                 position: absolute;
433                 bottom: 0;
434                 right: 0;
435                 width: 40%;
436         }
437
438         .about-wrap .headline-feature .horizontal-image {
439                 position: relative;
440         }
441
442         .about-wrap .headline-feature .horizontal-image:before {
443                 display: block;
444                 content: "";
445                 width: 100%;
446                 padding-top: 80%;
447         }
448
449         .about-wrap .headline-feature .horizontal-image > .content {
450                 position: absolute;
451                 top: 0;
452                 left: 0;
453                 right: 0;
454                 bottom: 0;
455         }
456
457         .about-wrap .headline-feature .horizontal-image img {
458                 position: absolute;
459                 bottom: 0;
460         }
461
462         .about-wrap .two-col-text {
463                 -webkit-column-count: 1;
464                 -moz-column-count: 1;
465                 column-count: 1;
466         }
467
468         .about-wrap .three-col img {
469                 display: block;
470                 margin: 0 auto;
471         }
472
473         .about-wrap .feature-list .col {
474                 margin: 0;
475                 padding: 0;
476                 border-bottom: none;
477         }
478
479         .about-wrap .headline-feature .feature-section {
480                 max-width: 100%;
481         }
482
483         .about-wrap .feature-list .feature-section {
484                 padding: 0 0 40px;
485         }
486 }
487
488 @media only screen and (max-width: 500px) {
489         .about-wrap {
490                 margin-right: 20px;
491                 margin-left: 10px;
492         }
493
494         .about-wrap h1,
495         .about-wrap .about-text {
496                 margin-right: 0;
497         }
498
499         .about-wrap .about-text {
500                 margin-bottom: 0.25em;
501         }
502
503         .about-wrap .wp-badge {
504                 position: relative;
505                 margin-bottom: 1.5em;
506                 width: 100%;
507         }
508
509         .about-wrap .feature-section.two-col .col,
510         .about-wrap .three-col .col,
511         .about-wrap .headline-feature .feature-section .col {
512                 width: 100% !important;
513                 float: none !important;
514         }
515
516         .about-wrap .feature-section.two-col .col:last-of-type {
517                 margin-top: 0;
518         }
519
520         .feature-section.under-the-hood.three-col .col,
521         .feature-section.under-the-hood.one-col .col {
522                 padding-bottom: 0;
523         }
524 }
525
526 @media only screen and (max-width: 400px) {
527         .about-wrap .feature-list svg {
528                 margin-top: 15px;
529                 height: 65px;
530                 width: 65px;
531         }
532         .about-wrap .feature-list.finer-points h4,
533         .about-wrap .feature-list.finer-points p {
534                 margin-left: 80px;
535         }
536 }