d9a3aa19217bba9090757366cd72e208474490fa
[autoinstalls/wordpress.git] / wp-admin / css / about-rtl.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 20px 0 40px;
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=20160308) no-repeat;
53         background-position: center 25px;
54         -webkit-background-size: 80px 80px;
55         background-size: 80px 80px;
56         color: #fff;
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: 140px;
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=20160308);
72 }
73
74 .about-wrap .wp-badge {
75         position: absolute;
76         top: 0;
77         left: 0;
78 }
79
80 /* Tabs */
81
82 .about-wrap .nav-tab {
83         padding-left: 15px;
84         padding-right: 15px;
85         font-size: 18px;
86 }
87
88 /* 1.1 - Typography */
89
90 .about-wrap p {
91         line-height: 1.5;
92         font-size: 14px;
93 }
94
95 .about-wrap .feature-section p {
96         max-width: 38em;
97         margin-right: auto;
98         margin-left: auto;
99 }
100
101 .about-wrap h1 {
102         margin: 0.2em 0 0 200px;
103         padding: 0;
104         color: #32373c;
105         line-height: 1.2em;
106         font-size: 2.8em;
107         font-weight: 400;
108 }
109
110 .about-wrap h2 {
111         margin: 50px 0 1em;
112         font-size: 1.8em;
113         line-height: 1.3;
114         font-weight: 300;
115         text-align: center;
116 }
117
118 .about-wrap h3 {
119         margin: 1.25em 0 .6em;
120         font-size: 1.25em;
121         line-height: 1.5;
122 }
123
124 .about-wrap h4 {
125         color: #23282d;
126 }
127
128 .about-wrap .changelog h3 {
129         margin: 1.33em 0;
130         font-size: 1em;
131         line-height: inherit;
132         color: #23282d;
133 }
134
135 .about-wrap code,
136 .about-wrap ol li p {
137         font-size: 14px;
138         font-weight: 400;
139 }
140
141 .about-wrap .about-description,
142 .about-wrap .about-text {
143         margin-top: 1.4em;
144         font-weight: 400;
145         line-height: 1.6em;
146         font-size: 19px;
147 }
148
149 .about-wrap .about-text {
150         margin: 1em 0 1em 200px;
151         min-height: 60px;
152         color: #555d66;
153 }
154
155 /* 1.2 - Structure */
156
157 .about-wrap [class$=col] .col {
158         float: right;
159         position: relative;
160 }
161
162 .about-wrap .two-col .col {
163         margin-left: 4.799999999%;
164         width: 47.6%;
165 }
166
167 .about-wrap .two-col img {
168         margin-bottom: 1.5em;
169 }
170
171 .about-wrap .feature-section.two-col .col {
172         display: inline-block;
173         float: none;
174         margin-top: 1em;
175         margin-left: 4.799999999%;
176         width: -webkit-calc( 47.6% - 4px );
177         width: calc( 47.6% - 4px );
178         vertical-align: top;
179 }
180
181 .about-wrap .three-col .col {
182         margin-left: 4.999999999%;
183         width: 29.95%;
184 }
185
186 .about-wrap .two-col .col:nth-of-type(2n),
187 .about-wrap .three-col .col:nth-of-type(3n) {
188         margin-left: 0;
189 }
190
191 .about-wrap .under-the-hood {
192         clear: both;
193         overflow: hidden;
194 }
195
196 .about-wrap .under-the-hood:nth-of-type(2n),
197 .about-wrap .under-the-hood:nth-of-type(3n) {
198         margin-top: 3em;
199 }
200
201 .about-wrap .feature-video .mejs-controls {
202         display: none !important;
203 }
204
205 .about-wrap .feature-video .mejs-overlay-loading span {
206         background: transparent; /* Hide loading.gif */
207 }
208
209 /* 1.3 - Point Releases */
210
211 .about-wrap .point-releases {
212         margin-top: 5px;
213         border-bottom: 1px solid #ddd;
214 }
215
216 .about-wrap .changelog.point-releases h3 {
217         padding-top: 35px;
218 }
219
220 .about-wrap .changelog.point-releases h3:first-child {
221         padding-top: 7px;
222 }
223
224 /*------------------------------------------------------------------------------
225   2.0 - About Page
226 ------------------------------------------------------------------------------*/
227
228 /* 2.1 - Typography */
229
230 .about-wrap .headline-feature h2 {
231         margin: 30px 0 30px;
232         font-size: 2.2em;
233         font-weight: 300;
234         line-height: 1.3;
235         text-align: center;
236 }
237
238 .about-wrap .headline-feature h3 {
239         margin-top: 0;
240         text-align: right;
241 }
242
243 .about-wrap .feature-section.two-col h3 {
244         margin-top: 0;
245 }
246
247 .about-wrap .feature-section h4 {
248         margin: 1.4em 0 0.6em 0;
249         font-size: 1em;
250 }
251
252 .about-wrap .feature-section p {
253         margin-top: 0.6em;
254 }
255
256 .about-wrap .two-col-text {
257         -webkit-column-count: 2;
258         -moz-column-count: 2;
259         column-count: 2;
260         -webkit-column-gap: 40px;
261         -moz-column-gap: 40px;
262         column-gap: 40px;
263 }
264
265 .about-wrap .two-col-text p:first-of-type {
266         margin-top: 0;
267 }
268
269 .about-wrap .streamlined-updates p,
270 .about-wrap .native-fonts p {
271         margin-bottom: 3em;
272 }
273
274 /* 2.2 - Structure */
275
276 .about-wrap .headline-feature.feature-video {
277         position: relative;
278         margin: 40px 0;
279         padding-bottom: 56.25%;
280         width: 100%;
281         max-width: 100%;
282         height: 0;
283         text-align: center;
284 }
285
286 .about-wrap .feature-video embed {
287         position: absolute;
288         top: 0;
289         right: 0;
290         width: 100%;
291         height: 100%;
292 }
293
294 .about-wrap .featured-image {
295         text-align: center;
296 }
297
298 .about-wrap .feature-section {
299         overflow: hidden;
300         padding: 0 0 40px;
301 }
302
303 .about-wrap .headline-feature {
304         margin: 0 auto;
305         max-width: 80%;
306 }
307
308 .about-wrap .feature-section .media-container {
309         overflow: hidden;
310 }
311
312 .about-wrap .embed-container {
313         text-align: center;
314 }
315
316 .about-wrap .embed-container iframe {
317         max-width: 100%;
318 }
319
320 .about-wrap .wp-embedded-content {
321         max-width: 100%;
322 }
323
324 .about-wrap .feature-section .col {
325         margin-top: 40px;
326 }
327
328 .about-wrap .changelog {
329         margin-bottom: 40px;
330 }
331
332 .about-wrap .changelog.feature-section .col {
333         margin-top: 40px;
334 }
335
336 /* Return to Dashboard Home link */
337
338 .about-wrap .return-to-dashboard {
339         margin: 30px -5px 0 0;
340         font-size: 14px;
341         font-weight: 600;
342 }
343
344 .about-wrap .return-to-dashboard a {
345         text-decoration: none;
346         padding: 0 5px;
347 }
348
349 /*------------------------------------------------------------------------------
350   3.0 - Credits & Freedoms Pages
351 ------------------------------------------------------------------------------*/
352
353 /* Credits */
354
355 .about-wrap h3.wp-people-group {
356         margin: 2.6em 0 1.33em;
357         padding: 0;
358         font-size: 16px;
359         line-height: inherit;
360 }
361
362 .about-wrap .wp-people-group {
363         padding: 0 5px;
364         margin: 0 -5px 0 -15px;
365 }
366
367 .about-wrap .compact {
368         margin-bottom: 0
369 }
370
371 .about-wrap .wp-person {
372         display: inline-block;
373         vertical-align: top;
374         margin-left: 10px;
375         padding-bottom: 15px;
376         height: 70px;
377         width: 280px;
378 }
379
380 .about-wrap .compact .wp-person {
381         height: auto;
382         width: 180px;
383         padding-bottom: 0;
384         margin-bottom: 0;
385 }
386
387 .about-wrap .wp-person .gravatar {
388         float: right;
389         margin: 0 0 10px 10px;
390         padding: 1px;
391         width: 60px;
392         height: 60px;
393 }
394
395 .about-wrap .compact .wp-person .gravatar {
396         width: 30px;
397         height: 30px;
398 }
399
400 .about-wrap .wp-person .web {
401         margin: 6px 0 2px;
402         font-size: 16px;
403         font-weight: 400;
404         line-height: 2em;
405         text-decoration: none;
406 }
407
408 .about-wrap .wp-person .title {
409         display: block;
410 }
411
412 .about-wrap #wp-people-group-validators + p.wp-credits-list {
413         margin-top: 0;
414 }
415
416 .about-wrap p.wp-credits-list a {
417         white-space: nowrap;
418 }
419
420 /* Freedoms */
421
422 .freedoms-php .about-wrap ol {
423         margin: 40px 60px;
424 }
425
426 .freedoms-php .about-wrap ol li {
427         list-style-type: decimal;
428         font-weight: 600;
429 }
430
431 .freedoms-php .about-wrap ol p {
432         font-weight: 400;
433         margin: 0.6em 0;
434 }
435
436 /*------------------------------------------------------------------------------
437   4.0 - Media Queries
438 ------------------------------------------------------------------------------*/
439
440 @media screen and ( max-width: 782px ) {
441         .about-wrap .two-col-text {
442                 -webkit-column-count: 1;
443                 -moz-column-count: 1;
444                 column-count: 1;
445         }
446
447         .about-wrap .three-col img {
448                 display: block;
449                 margin: 0 auto;
450         }
451 }
452
453 @media only screen and (max-width: 500px) {
454         .about-wrap {
455                 margin-left: 20px;
456                 margin-right: 10px;
457         }
458
459         .about-wrap h1,
460         .about-wrap .about-text {
461                 margin-left: 0;
462         }
463
464         .about-wrap .about-text {
465                 margin-bottom: 0.25em;
466         }
467
468         .about-wrap .wp-badge {
469                 position: relative;
470                 margin-bottom: 1.5em;
471                 width: 100%;
472         }
473
474         .about-wrap .two-col .col,
475         .about-wrap .three-col .col {
476                 width: 100% !important;
477                 float: none !important;
478         }
479
480         .about-wrap .under-the-hood.three-col .col,
481         .about-wrap .under-the-hood.two-col .col,
482         .about-wrap .under-the-hood.one-col .col {
483                 margin-bottom: 2em;
484                 padding-bottom: 0;
485         }
486
487         .about-wrap .under-the-hood:nth-of-type(2n),
488         .about-wrap .under-the-hood:nth-of-type(3n) {
489                 margin-top: 0;
490         }
491
492         .about-wrap .under-the-hood:nth-of-type(2n) h3,
493         .about-wrap .under-the-hood:nth-of-type(3n) h3 {
494                 margin-top: 0;
495         }
496 }