← Back to branch summary

~canonical-sysadmins/wordpress/4.7

« back to all changes in this revision

Viewing changes to wp-admin/css/about.css

  • Committer: Nick Moffitt
  • Date: 2015-01-15 11:04:26 UTC
  • mto: This revision was merged to the branch mainline in revision 3.
  • Revision ID: nick.moffitt@canonical.com-20150115110426-5stm1p14cfnxrtme
New Upstream Version 4.1

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/css/about.css
1
1
/*------------------------------------------------------------------------------
2
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
3
16
------------------------------------------------------------------------------*/
4
17
 
5
18
.about-wrap {
6
19
        position: relative;
7
20
        margin: 25px 40px 0 20px;
8
21
        max-width: 1050px; /* readability */
9
 
 
10
22
        font-size: 15px;
11
23
}
12
24
 
29
41
        vertical-align: middle;
30
42
}
31
43
 
32
 
/* Typography */
33
 
 
34
 
.about-wrap p {
35
 
        line-height: 1.6em;
36
 
        font-size: 14px;
37
 
}
38
 
 
39
 
.about-wrap h1 {
40
 
        margin: 0.2em 200px 0 0;
41
 
        color: #333;
42
 
        line-height: 1.2em;
43
 
        font-size: 2.8em;
44
 
        font-weight: 400;
45
 
}
46
 
 
47
 
.about-wrap h4 {
48
 
        color: #222;
49
 
}
50
 
 
51
 
.about-wrap .about-text,
52
 
.about-wrap p.about-description,
53
 
.about-wrap li.wp-person a.web {
54
 
        font-weight: normal;
55
 
        line-height: 1.6em;
56
 
        font-size: 19px;
57
 
}
58
 
 
59
 
.about-description {
60
 
        margin-top: 1.4em;
61
 
}
62
 
 
63
 
.about-text {
64
 
        margin: 1em 200px 1em 0;
65
 
        min-height: 60px;
66
 
        color: #777;
67
 
        font-size: 24px;
68
 
}
69
 
 
70
 
.about-wrap .changelog h2.about-headline-callout {
71
 
        margin: 1.1em 0 0.2em;
72
 
        font-size: 2.4em;
73
 
        font-weight: 300;
74
 
        line-height: 1.3;
75
 
        text-align: center;
76
 
}
77
 
 
78
 
.about-wrap h3 {
79
 
        margin: 1em 0 .6em;
80
 
        font-size: 1.5em;
81
 
        line-height: 1.5em;
82
 
}
83
 
 
84
 
.about-wrap h3.higher {
85
 
        margin-top: .5em;
86
 
}
87
 
 
88
 
.customize h3 {
89
 
        margin-top: 1.75em;
90
 
        text-align: center;
91
 
}
92
 
 
93
 
.about-wrap .feature-section h4 {
94
 
        margin: 1.4em 0 0.6em 0;
95
 
        font-size: 1.2em;
96
 
}
97
 
 
98
 
.about-wrap .feature-section p {
99
 
        margin-top: 0.6em;
100
 
}
101
 
 
102
 
.about-wrap code,
103
 
.about-wrap ol li p {
104
 
        font-size: 14px;
105
 
}
106
 
 
107
 
.about-wrap .button.button-large {
108
 
        padding: 8px 20px 10px !important;
109
 
        height: 46px !important;
110
 
        font-size: 14px;
111
 
        line-height: 28px !important;
112
 
}
113
 
 
114
 
/* 3.8 Images */
115
 
 
116
 
.about-wrap .about-overview-img {
117
 
        margin: 0;
118
 
}
119
 
 
120
 
/* Point Releases */
121
 
 
122
 
.about-wrap .point-releases {
123
 
        margin-top: 5px;
124
 
        border-bottom: 1px solid #dfdfdf;
125
 
}
126
 
 
127
 
.about-wrap .changelog.point-releases h3 {
128
 
        padding-top: 35px;
129
 
}
130
 
 
131
 
.about-wrap .changelog.point-releases h3:first-child {
132
 
        padding-top: 7px;
133
 
}
134
 
 
135
44
/* WordPress Version Badge */
136
45
 
137
46
.wp-badge {
138
47
        background: #0074a2 url(../images/w-logo-white.png?ver=20131202) no-repeat;
139
 
        background: #0074a2, url(../images/wordpress-logo-white.svg?ver=20131110) no-repeat; /* multiple backgrounds are ignored by browsers that don't support SVGs */
140
48
        background-position: center 24px;
141
49
        -webkit-background-size: 85px 85px;
142
50
        background-size: 85px 85px;
154
62
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
155
63
}
156
64
 
 
65
.svg .wp-badge {
 
66
        background-image: url(../images/wordpress-logo-white.svg?ver=20131110);
 
67
}
157
68
 
158
69
.about-wrap .wp-badge {
159
70
        position: absolute;
173
84
        font-size: 18px;
174
85
        vertical-align: top;
175
86
        border-width: 1px;
176
 
}
177
 
 
178
 
/* Changelog / Update screen */
179
 
 
180
 
.about-overview {
181
 
        margin-top: 40px;
182
 
        margin-bottom: 40px;
183
 
        text-align: center;
184
 
}
185
 
 
186
 
.about-overview p {
187
 
        margin: 1em auto 50px;
188
 
        max-width: 770px;
189
 
        font-size: 18px;
190
 
        line-height: 1.5;
191
 
        text-align: center;
192
 
}
193
 
 
194
 
.about-wrap .feature-section {
195
 
        margin-top: 40px;
196
 
        padding-bottom: 20px;
197
 
}
198
 
 
199
 
.about-wrap .feature-section.two-col > div {
 
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 {
200
137
        position: relative;
201
138
        width: 47.6%;
202
139
        margin-right: 4.799999999%;
203
140
        float: left;
204
141
}
205
142
 
206
 
.about-wrap .feature-section.three-col > div {
 
143
.about-wrap .three-col > div {
207
144
        position: relative;
208
145
        width: 29.95%;
209
146
        margin-right: 4.999999999%;
210
147
        float: left;
211
148
}
212
149
 
213
 
.about-wrap .feature-section.col .last-feature {
 
150
.about-wrap .col .last-feature {
214
151
        margin-right: 0;
215
152
}
216
153
 
217
 
.about-wrap .under-the-hood .feature-section {
218
 
        margin-top: 0;
219
 
}
220
 
 
221
 
.about-wrap .changelog .feature-section {
 
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 {
222
214
        overflow: hidden;
223
 
}
224
 
 
225
 
.about-wrap .feature-section.two-col div p {
226
 
        margin-right: 3%;
227
 
}
228
 
 
229
 
.about-wrap .feature-section div p img {
 
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
230
        float: right;
231
 
        margin-left: 10px;
232
 
        max-width: 20%;
233
 
}
234
 
 
235
 
/* responsive videos for 4.0 */
236
 
.about-video {
 
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 {
237
244
        position: relative;
238
 
        width: 100%;
239
 
        height: 0;
240
 
}
241
 
 
242
 
.about-video-embed {
243
 
        padding-bottom: 70.4%; /* 352 / 500 */
244
 
}
245
 
 
246
 
.about-video-focus {
247
 
        padding-bottom: 56.2%; /* 281 / 500 */
248
 
}
249
 
 
250
 
.about-video .wp-video,
251
 
.about-video .mejs-container,
252
 
.about-video video {
 
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 {
253
252
        position: absolute;
254
253
        top: 0;
255
254
        left: 0;
256
 
        width: 100% !important;
257
 
        height: 100% !important;
258
 
}
259
 
 
260
 
.about-wrap .changelog li {
261
 
        list-style-type: disc;
262
 
        margin-left: 3em;
 
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;
263
280
}
264
281
 
265
282
/* Return to Dashboard Home link */
275
292
        padding: 0 5px;
276
293
}
277
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
 
278
318
/* Credits */
279
319
 
280
320
.about-wrap h4.wp-people-group {
293
333
}
294
334
 
295
335
.about-wrap li.wp-person {
296
 
        float: left;
 
336
        display: inline-block;
 
337
        vertical-align: top;
297
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;
298
349
}
299
350
 
300
351
.about-wrap li.wp-person img.gravatar {
310
361
        height: 30px;
311
362
}
312
363
 
313
 
/* @todo: combine this */
314
 
.about-wrap li.wp-person {
315
 
        height: 70px;
316
 
        width: 280px;
317
 
        padding-bottom: 15px;
318
 
}
319
 
 
320
 
.about-wrap ul.compact li.wp-person {
321
 
        height: auto;
322
 
        width: 180px;
323
 
        padding-bottom: 0;
324
 
        margin-bottom: 0;
325
 
}
326
 
 
327
 
.about-wrap #wp-people-group-validators + p.wp-credits-list {
328
 
        margin-top: 0;
329
 
}
330
 
 
331
364
.about-wrap li.wp-person a.web {
332
365
        display: block;
333
366
        margin: 6px 0 2px;
334
367
        font-size: 16px;
 
368
        font-weight: normal;
 
369
        line-height: 1.6em;
335
370
        text-decoration: none;
336
371
}
337
372
 
 
373
.about-wrap #wp-people-group-validators + p.wp-credits-list {
 
374
        margin-top: 0;
 
375
}
 
376
 
338
377
.about-wrap p.wp-credits-list a {
339
378
        white-space: nowrap;
340
379
}
355
394
        margin: 0.6em 0;
356
395
}
357
396
 
358
 
/* =Media Queries
359
 
-------------------------------------------------------------- */
 
397
/*------------------------------------------------------------------------------
 
398
  4.0 - Media Queries
 
399
------------------------------------------------------------------------------*/
360
400
 
361
401
@media screen and ( max-width: 782px ) {
362
 
        .about-wrap .feature-section.one-col > div,
363
 
        .about-wrap .feature-section.two-col > div,
364
 
        .about-wrap .feature-section.three-col > div {
 
402
        .about-wrap .one-col > div,
 
403
        .about-wrap .two-col > div,
 
404
        .about-wrap .three-col > div {
365
405
                width: 100%;
366
406
                margin: 0 0 40px;
367
407
                padding: 0 0 40px;
368
 
                float: none;
369
408
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
370
409
        }
371
410
 
372
 
        .about-wrap .under-the-hood .feature-section > div,
373
 
        .about-wrap .feature-section.col > div.last-feature {
 
411
        .about-wrap .feature-list div,
 
412
        .about-wrap .col > div.last-feature {
374
413
                margin: 0;
375
414
                padding: 0;
376
415
                border-bottom: none;
377
416
        }
378
417
 
379
 
}
380
 
 
381
 
/* Responsive release video */
382
 
@media screen and ( max-width: 710px ) {
383
 
        .about-overview {
384
 
                position: relative;
385
 
                padding-bottom: 56.25%; /* 360 / 640 */
386
 
                width: 100%;
387
 
                height: 0;
 
418
        .about-wrap .headline-feature .feature-section {
 
419
                max-width: 100%;
388
420
        }
389
421
 
390
 
        .about-overview embed {
391
 
                position: absolute;
392
 
                top: 0;
393
 
                left: 0;
394
 
                width: 100%;
395
 
                height: 100%;
 
422
        .about-wrap .feature-list .feature-section {
 
423
                padding: 0 0 40px;
396
424
        }
397
425
}
398
426
 
403
431
        }
404
432
 
405
433
        .about-wrap h1,
406
 
        .about-text {
 
434
        .about-wrap .about-text {
407
435
                margin-right: 0;
408
436
        }
409
437
 
410
 
        .about-text {
 
438
        .about-wrap .about-text {
411
439
                margin-bottom: 0.25em;
412
440
        }
413
441
 
428
456
                border-bottom: 1px solid #ccc;
429
457
        }
430
458
 
431
 
        .about-wrap .feature-section.three-col div {
432
 
                width: 100%;
433
 
                float: none;
434
 
        }
435
 
 
436
 
        .about-wrap .three-col.about-updates .col-1 {
437
 
                padding: 0;
438
 
                float: none;
439
 
        }
440
 
 
441
 
        .about-wrap .three-col.about-updates .col-2 {
442
 
                margin: 0 0 20px;
443
 
                width: 100%;
444
 
                float: none;
 
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;
445
479
        }
446
480
}