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