d7ae1bcc463203a83904c300e9c5bb2dfb219069
[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=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         left: 0;
78 }
79
80 /* Tabs */
81
82 .about-wrap h2.nav-tab-wrapper {
83         padding-right: 6px;
84 }
85
86 .about-wrap h2 .nav-tab {
87         padding: 4px 15px 6px;
88         margin: 0 0 -1px 3px;
89         font-size: 18px;
90         vertical-align: top;
91         border-width: 1px;
92         white-space: nowrap;
93 }
94
95 /* 1.1 - Typography */
96
97 .about-wrap p {
98         line-height: 1.6em;
99         font-size: 14px;
100 }
101
102 .about-wrap h1 {
103         margin: 0.2em 0 0 200px;
104         padding: 0;
105         color: #32373c;
106         line-height: 1.2em;
107         font-size: 2.8em;
108         font-weight: 400;
109 }
110
111 .about-wrap h3 {
112         margin: 1.25em 0 .6em;
113         font-size: 1.25em;
114         line-height: 1.5em;
115 }
116
117 .about-wrap h4 {
118         color: #23282d;
119 }
120
121 .about-wrap code,
122 .about-wrap ol li p {
123         font-size: 14px;
124         font-weight: normal;
125 }
126
127 .about-wrap .about-description,
128 .about-wrap .about-text {
129         margin-top: 1.4em;
130         font-weight: normal;
131         line-height: 1.6em;
132         font-size: 19px;
133 }
134
135 .about-wrap .about-text {
136         margin: 1em 0 1em 200px;
137         min-height: 60px;
138         color: #777;
139 }
140
141 /* 1.2 - Structure */
142
143 .about-wrap [class$=col] .col {
144         float: right;
145         position: relative;
146 }
147 .about-wrap .two-col .col {
148         margin-left: 4.799999999%;
149         width: 47.6%;
150 }
151
152 .about-wrap .three-col .col {
153         margin-left: 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-left: 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: 50px 0 30px;
185         font-size: 2.2em;
186         font-weight: 300;
187         line-height: 1.3;
188         text-align: right;
189 }
190
191 .about-wrap .headline-feature h3 {
192         margin-top: 30px;
193         text-align: center;
194 }
195
196 .about-wrap .feature-list h2 {
197         margin: 30px 0 15px;
198         text-align: center;
199 }
200
201 .about-wrap .feature-section h4 {
202         margin: 1.4em 0 0.6em 0;
203         font-size: 1em;
204 }
205
206 .about-wrap .feature-section p {
207         margin-top: 0.6em;
208 }
209
210 /* 2.2 - Structure */
211
212 .about-wrap .feature-video {
213         position: relative;
214         margin: 40px 0;
215         padding-bottom: 56.25%; /* video is 1280 x 720 */
216         width: 100%;
217         height: 0;
218         text-align: center;
219 }
220
221 .about-wrap .feature-video embed {
222         position: absolute;
223         top: 0;
224         right: 0;
225         width: 100%;
226         height: 100%;
227 }
228
229 .about-wrap .featured-image {
230         text-align: center;
231 }
232
233 .about-wrap .feature-section {
234         overflow: hidden;
235         padding: 0 0 40px;
236         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
237 }
238
239 .about-wrap .headline-feature .feature-section {
240         margin: 0 auto;
241         max-width: 95%;
242 }
243
244 .about-wrap .feature-section .media-container {
245         border: 1px solid #ddd;
246         overflow: hidden;
247 }
248
249 .about-wrap .feature-section .svg-container {
250         padding: 50px 0;
251         text-align: center;
252         background-color: #e1e1e3;
253 }
254
255 .about-wrap .feature-section .svg-container img {
256         max-width: 150px;
257 }
258
259 .about-wrap .feature-section:not(.under-the-hood) .col {
260         margin-top: 40px;
261 }
262
263 .about-wrap .changelog {
264         margin-bottom: 40px;
265 }
266
267 .about-wrap .changelog.feature-section .col {
268         margin-top: 40px;
269 }
270
271 /* Return to Dashboard Home link */
272
273 .about-wrap .return-to-dashboard {
274         margin: 30px -5px 0 0;
275         font-size: 14px;
276         font-weight: bold;
277 }
278
279 .about-wrap .return-to-dashboard a {
280         text-decoration: none;
281         padding: 0 5px;
282 }
283
284 .about-wrap .feature-list.finer-points h4,
285 .about-wrap .feature-list.finer-points p {
286         margin-right: 115px;
287 }
288
289 /*------------------------------------------------------------------------------
290   3.0 - Credits & Freedoms Pages
291 ------------------------------------------------------------------------------*/
292
293 /* Credits */
294
295 .about-wrap h4.wp-people-group {
296         margin-top: 2.6em;
297         font-size: 16px;
298 }
299
300 .about-wrap ul.wp-people-group {
301         overflow: hidden;
302         padding: 0 5px;
303         margin: 0 -5px 0 -15px;
304 }
305
306 .about-wrap ul.compact {
307         margin-bottom: 0
308 }
309
310 .about-wrap li.wp-person {
311         display: inline-block;
312         vertical-align: top;
313         margin-left: 10px;
314         padding-bottom: 15px;
315         height: 70px;
316         width: 280px;
317 }
318
319 .about-wrap ul.compact li.wp-person {
320         height: auto;
321         width: 180px;
322         padding-bottom: 0;
323         margin-bottom: 0;
324 }
325
326 .about-wrap li.wp-person img.gravatar {
327         float: right;
328         margin: 0 0 10px 10px;
329         padding: 2px;
330         width: 60px;
331         height: 60px;
332 }
333
334 .about-wrap ul.compact li.wp-person img.gravatar {
335         width: 30px;
336         height: 30px;
337 }
338
339 .about-wrap li.wp-person a.web {
340         display: block;
341         margin: 6px 0 2px;
342         font-size: 16px;
343         font-weight: normal;
344         line-height: 1.6em;
345         text-decoration: none;
346 }
347
348 .about-wrap #wp-people-group-validators + p.wp-credits-list {
349         margin-top: 0;
350 }
351
352 .about-wrap p.wp-credits-list a {
353         white-space: nowrap;
354 }
355
356 /* Freedoms */
357
358 .freedoms-php .about-wrap ol {
359         margin: 40px 60px;
360 }
361
362 .freedoms-php .about-wrap ol li {
363         list-style-type: decimal;
364         font-weight: bold;
365 }
366
367 .freedoms-php .about-wrap ol p {
368         font-weight: normal;
369         margin: 0.6em 0;
370 }
371
372 /*------------------------------------------------------------------------------
373   4.0 - Media Queries
374 ------------------------------------------------------------------------------*/
375
376 @media screen and ( max-width: 782px ) {
377         .about-wrap .feature-section {
378                 padding: 0;
379                 border-bottom: none;
380         }
381
382         .about-wrap [class$=col] .col {
383                 float: none;
384                 width: 100%;
385                 margin: 40px 0 0;
386                 padding: 0 0 40px;
387                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
388         }
389
390         .about-wrap .three-col img {
391                 display: block;
392                 margin: 0 auto;
393         }
394
395         .about-wrap .feature-list .col {
396                 margin: 0;
397                 padding: 0;
398                 border-bottom: none;
399         }
400
401         .about-wrap .headline-feature .feature-section {
402                 max-width: 100%;
403         }
404
405         .about-wrap .feature-list .feature-section {
406                 padding: 0 0 40px;
407         }
408 }
409
410 @media only screen and (max-width: 500px) {
411         .about-wrap {
412                 margin-left: 20px;
413                 margin-right: 10px;
414         }
415
416         .about-wrap h1,
417         .about-wrap .about-text {
418                 margin-left: 0;
419         }
420
421         .about-wrap .about-text {
422                 margin-bottom: 0.25em;
423         }
424
425         .about-wrap .wp-badge {
426                 position: relative;
427                 margin-bottom: 1.5em;
428                 width: 100%;
429         }
430
431         .about-wrap h2.nav-tab-wrapper {
432                 padding-right: 0;
433                 border-bottom: 0;
434         }
435
436         .about-wrap h2 .nav-tab {
437                 margin-top: 10px;
438                 margin-left: 10px;
439                 border-bottom: 1px solid #ccc;
440         }
441
442         .about-wrap .feature-section .svg-container {
443                 padding-top: 20px;
444                 padding-bottom: 20px;
445         }
446
447         .about-wrap .three-col .col,
448         .about-wrap .headline-feature .feature-section .col {
449                 width: 100% !important;
450                 float: none !important;
451         }
452 }
453
454 @media only screen and (max-width: 400px) {
455         .about-wrap .feature-list svg {
456                 margin-top: 15px;
457                 height: 65px;
458                 width: 65px;
459         }
460         .about-wrap .feature-list.finer-points h4,
461         .about-wrap .feature-list.finer-points p {
462                 margin-right: 80px;
463         }
464 }