← Back to branch summary

~canonical-sysadmins/wordpress/4.7.4

« back to all changes in this revision

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

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/css/themes.css
 
1
/*------------------------------------------------------------------------------
 
2
  16.0 - Themes
 
3
------------------------------------------------------------------------------*/
 
4
 
 
5
 
 
6
/*------------------------------------------------------------------------------
 
7
  16.1 - Manage Themes
 
8
------------------------------------------------------------------------------*/
 
9
 
 
10
.theme-browser .themes {
 
11
        clear: both;
 
12
        padding: 0 0 100px;
 
13
}
 
14
 
 
15
.themes-php .wrap h2 {
 
16
        float: left;
 
17
        margin-bottom: 15px;
 
18
}
 
19
 
 
20
.network-admin.themes-php .wrap h2 {
 
21
        margin-bottom: 0;
 
22
}
 
23
 
 
24
.themes-php .wrap h2 .button {
 
25
        margin-left: 20px;
 
26
}
 
27
 
 
28
/* Search form */
 
29
.themes-php .wp-filter-search {
 
30
        position: relative;
 
31
        top: -2px;
 
32
        left: 20px;
 
33
        margin: 0;
 
34
        width: 280px;
 
35
        font-size: 16px;
 
36
        font-weight: 300;
 
37
        line-height: 1.5;
 
38
}
 
39
 
 
40
/* Position admin messages */
 
41
.themes-php div.updated,
 
42
.themes-php div.error {
 
43
        margin: 0 0 20px 0;
 
44
        clear: both;
 
45
}
 
46
 
 
47
.themes-php div.updated a {
 
48
        text-decoration: underline;
 
49
}
 
50
 
 
51
/**
 
52
 * Main theme element
 
53
 * (has flexible margins)
 
54
 */
 
55
.theme-browser .theme {
 
56
        cursor: pointer;
 
57
        float: left;
 
58
        margin: 0 4% 4% 0;
 
59
        position: relative;
 
60
        width: 30.6%;
 
61
        border: 1px solid #dedede;
 
62
        -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
 
63
        box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
 
64
        -webkit-box-sizing: border-box;
 
65
        -moz-box-sizing: border-box;
 
66
        box-sizing: border-box;
 
67
}
 
68
 
 
69
.ie8 .theme-browser .theme {
 
70
        width: 30%;
 
71
        margin: 0 3% 4% 0;
 
72
}
 
73
 
 
74
.theme-browser .theme:nth-child(3n) {
 
75
        margin-right: 0;
 
76
}
 
77
 
 
78
.theme-browser .theme:hover,
 
79
.theme-browser .theme:focus {
 
80
        cursor: pointer;
 
81
}
 
82
 
 
83
.theme-browser .theme .theme-name {
 
84
        font-size: 15px;
 
85
        font-weight: 600;
 
86
        height: 18px;
 
87
        margin: 0;
 
88
        padding: 15px;
 
89
        -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
 
90
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
 
91
        overflow: hidden;
 
92
        white-space: nowrap;
 
93
        text-overflow: ellipsis;
 
94
        background: #fff;
 
95
        background: rgba(255,255,255,0.65);
 
96
}
 
97
 
 
98
/* Activate and Customize buttons, shown on hover and focus */
 
99
.theme-browser .theme .theme-actions {
 
100
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 
101
        opacity: 0;
 
102
        -webkit-transition: opacity 0.1s ease-in-out;
 
103
        transition: opacity 0.1s ease-in-out;
 
104
        position: absolute;
 
105
        bottom: 0;
 
106
        right: 0;
 
107
        height: 38px;
 
108
        padding: 9px 10px 0 10px;
 
109
        background: rgba(244, 244, 244, 0.7);
 
110
        border-left: 1px solid rgba(0,0,0,0.05);
 
111
}
 
112
 
 
113
.theme-browser .theme:hover .theme-actions,
 
114
.theme-browser .theme.focus .theme-actions,
 
115
.theme-browser .theme:focus .theme-actions {
 
116
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 
117
        opacity: 1;
 
118
}
 
119
 
 
120
.theme-browser .theme .theme-actions .button-primary {
 
121
        margin-right: 3px;
 
122
}
 
123
 
 
124
.theme-browser .theme .theme-actions .button-secondary {
 
125
        float: none;
 
126
        margin-left: 3px;
 
127
}
 
128
 
 
129
/**
 
130
 * Theme Screenshot
 
131
 *
 
132
 * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size
 
133
 * It is also responsive.
 
134
 */
 
135
.theme-browser .theme .theme-screenshot {
 
136
        display: block;
 
137
        overflow: hidden;
 
138
        position: relative;
 
139
        -webkit-transition: opacity 0.2s ease-in-out;
 
140
        transition: opacity 0.2s ease-in-out;
 
141
}
 
142
 
 
143
.theme-browser .theme .theme-screenshot:after {
 
144
        content: '';
 
145
        display: block;
 
146
        padding-top: 66.66666%; /* using a 3/2 aspect ratio */
 
147
}
 
148
 
 
149
.theme-browser .theme .theme-screenshot img {
 
150
        height: auto;
 
151
        position: absolute;
 
152
        left: 0;
 
153
        top: 0;
 
154
        width: 100%;
 
155
        -webkit-transform: translateZ( 0 ); /* Prevents rendering bugs in Chrome */
 
156
        -webkit-transition: opacity 0.2s ease-in-out; /* Prevents rendering bugs in Chrome */
 
157
        transition: opacity 0.2s ease-in-out;
 
158
}
 
159
 
 
160
.theme-browser .theme:hover .theme-screenshot,
 
161
.theme-browser .theme:focus .theme-screenshot {
 
162
        background: #fff;
 
163
}
 
164
 
 
165
.theme-browser.rendered .theme:hover .theme-screenshot img,
 
166
.theme-browser.rendered .theme:focus .theme-screenshot img {
 
167
        opacity: 0.4;
 
168
}
 
169
 
 
170
.theme-browser .theme .more-details {
 
171
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 
172
        opacity: 0;
 
173
        position: absolute;
 
174
        top: 35%;
 
175
        right: 25%;
 
176
        left: 25%;
 
177
        background: #222;
 
178
        background: rgba(0,0,0,0.7);
 
179
        color: #fff;
 
180
        font-size: 15px;
 
181
        text-shadow: 0 1px 0 rgba(0,0,0,0.6);
 
182
        -webkit-font-smoothing: antialiased;
 
183
        font-weight: 600;
 
184
        padding: 15px 12px;
 
185
        text-align: center;
 
186
        -webkit-border-radius: 3px;
 
187
        border-radius: 3px;
 
188
        -webkit-transition: opacity 0.1s ease-in-out;
 
189
        transition: opacity 0.1s ease-in-out;
 
190
}
 
191
 
 
192
.theme-browser .theme:focus {
 
193
        border-color: #5b9dd9;
 
194
        -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 
195
        box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 
196
}
 
197
 
 
198
.theme-browser .theme:focus .more-details {
 
199
        opacity: 1;
 
200
}
 
201
 
 
202
/* Current theme needs to have its action always on view */
 
203
.theme-browser .theme.active:focus .theme-actions {
 
204
        display: block;
 
205
}
 
206
 
 
207
.theme-browser.rendered .theme:hover .more-details,
 
208
.theme-browser.rendered .theme:focus .more-details {
 
209
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 
210
        opacity: 1;
 
211
}
 
212
 
 
213
/**
 
214
 * Displays a theme update notice
 
215
 * when an update is available.
 
216
 */
 
217
.theme-browser .theme .theme-update,
 
218
.theme-browser .theme .theme-installed {
 
219
        background: #d54e21;
 
220
        background: rgba(213, 78, 33, 0.95);
 
221
        color: #fff;
 
222
        display: block;
 
223
        font-size: 13px;
 
224
        font-weight: 400;
 
225
        height: 48px;
 
226
        line-height: 48px;
 
227
        padding: 0 10px;
 
228
        position: absolute;
 
229
        top: 0;
 
230
        right: 0;
 
231
        left: 0;
 
232
        border-bottom: 1px solid rgba(0,0,0,0.25);
 
233
        overflow: hidden;
 
234
}
 
235
 
 
236
.theme-browser .theme .theme-update:before,
 
237
.theme-browser .theme .theme-installed:before {
 
238
        content: '\f463';
 
239
        display: inline-block;
 
240
        font: normal 20px/1 'dashicons';
 
241
        margin: 0 6px 0 0;
 
242
        opacity: 0.8;
 
243
        position: relative;
 
244
        top: 5px;
 
245
        speak: none;
 
246
        -webkit-font-smoothing: antialiased;
 
247
}
 
248
 
 
249
 
 
250
/**
 
251
 * The currently active theme
 
252
 */
 
253
.theme-browser .theme.active .theme-name {
 
254
        background: #2f2f2f;
 
255
        color: #fff;
 
256
        padding-right: 110px;
 
257
        font-weight: 300;
 
258
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
 
259
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
 
260
}
 
261
 
 
262
.theme-browser .theme.active .theme-name span {
 
263
        font-weight: 600;
 
264
}
 
265
 
 
266
.theme-browser .theme.active .theme-actions {
 
267
        background: rgba(49,49,49,0.7);
 
268
        border-left: none;
 
269
        opacity: 1;
 
270
}
 
271
 
 
272
.theme-browser .theme.active .theme-actions .button-primary {
 
273
        margin-right: 0;
 
274
}
 
275
 
 
276
.theme-browser .theme .theme-author {
 
277
        background: #222;
 
278
        color: #eee;
 
279
        display: none;
 
280
        font-size: 14px;
 
281
        margin: 0 10px;
 
282
        padding: 5px 10px;
 
283
        position: absolute;
 
284
        bottom: 56px;
 
285
}
 
286
 
 
287
.theme-browser .theme.display-author .theme-author {
 
288
        display: block;
 
289
}
 
290
 
 
291
.theme-browser .theme.display-author .theme-author a {
 
292
        color: inherit;
 
293
        text-decoration: none;
 
294
}
 
295
 
 
296
/**
 
297
 * Add new theme
 
298
 */
 
299
.theme-browser .theme.add-new-theme {
 
300
        border: none;
 
301
        -webkit-box-shadow: none;
 
302
        box-shadow: none;
 
303
}
 
304
 
 
305
.theme-browser .theme.add-new-theme a {
 
306
        color: #999;
 
307
        text-decoration: none;
 
308
        display: block;
 
309
        position: relative;
 
310
        z-index: 1;
 
311
}
 
312
 
 
313
.theme-browser .theme.add-new-theme:after {
 
314
        display: block;
 
315
        content: '';
 
316
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 
317
        opacity: 1;
 
318
        background: transparent;
 
319
        background: rgba(0, 0, 0, 0);
 
320
        position: absolute;
 
321
        top: 0;
 
322
        left: 0;
 
323
        right: 0;
 
324
        bottom: 0;
 
325
        padding: 10% 0 0 0;
 
326
        text-shadow: none;
 
327
        border: 5px dashed #d5d2ca;
 
328
        border: 5px dashed rgba(0, 0, 0, 0.1);
 
329
        -webkit-transition: opacity 0.2s ease-in-out;
 
330
        transition: opacity 0.2s ease-in-out;
 
331
        -webkit-box-sizing: border-box;
 
332
        -moz-box-sizing: border-box;
 
333
        box-sizing: border-box;
 
334
}
 
335
 
 
336
.theme-browser .theme.add-new-theme span:after {
 
337
        background: #e5e5e5;
 
338
        background: rgba(153, 153, 153, 0.1);
 
339
        -webkit-border-radius: 50%;
 
340
        border-radius: 50%;
 
341
        display: inline-block;
 
342
        content: '\f132';
 
343
        -webkit-font-smoothing: antialiased;
 
344
        font: normal 74px/115px 'dashicons';
 
345
        width: 100px;
 
346
        height: 100px;
 
347
        vertical-align: middle;
 
348
        text-align: center;
 
349
        color: rgb(153, 153, 153);
 
350
        position: absolute;
 
351
        top: 30%;
 
352
        left: 50%;
 
353
        margin-left: -50px;
 
354
        text-indent: -4px;
 
355
        padding: 0;
 
356
        text-shadow: none;
 
357
        z-index:4;
 
358
}
 
359
 
 
360
.rtl .theme-browser .theme.add-new-theme span:after {
 
361
        text-indent: 4px;
 
362
}
 
363
 
 
364
.theme-browser .theme.add-new-theme:hover .theme-screenshot,
 
365
.theme-browser .theme.add-new-theme:focus .theme-screenshot {
 
366
        background: none;
 
367
}
 
368
 
 
369
.theme-browser .theme.add-new-theme:hover span:after,
 
370
.theme-browser .theme.add-new-theme:focus span:after {
 
371
        background: #fff;
 
372
        color: #0074a2;
 
373
}
 
374
 
 
375
.theme-browser .theme.add-new-theme:hover:after,
 
376
.theme-browser .theme.add-new-theme:focus:after {
 
377
        border-color: transparent;
 
378
        color: #fff;
 
379
        background: #0074a2;
 
380
        content: '';
 
381
}
 
382
 
 
383
.theme-browser .theme.add-new-theme .theme-name {
 
384
        background: none;
 
385
        text-align: center;
 
386
        -webkit-box-shadow: none;
 
387
        box-shadow: none;
 
388
        font-weight: 400;
 
389
        position: relative;
 
390
        top: 0;
 
391
        margin-top: -10%;
 
392
        margin-bottom: 10%;
 
393
}
 
394
 
 
395
.theme-browser .theme.add-new-theme:hover .theme-name,
 
396
.theme-browser .theme.add-new-theme:focus .theme-name {
 
397
        color: #fff;
 
398
        z-index: 2;
 
399
}
 
400
 
 
401
/**
 
402
 * Theme Overlay
 
403
 * Shown when clicking a theme
 
404
 */
 
405
.theme-overlay .theme-backdrop {
 
406
        position: absolute;
 
407
        left: -20px;
 
408
        right: 0;
 
409
        top: 0;
 
410
        bottom: 0;
 
411
        background: #f1f1f1;
 
412
        background: rgba( 238, 238, 238, 0.9 );
 
413
        z-index: 10;
 
414
}
 
415
 
 
416
.theme-overlay .theme-header {
 
417
        position: absolute;
 
418
        top: 0;
 
419
        left: 0;
 
420
        right: 0;
 
421
        height: 48px;
 
422
        border-bottom: 1px solid #ddd;
 
423
}
 
424
 
 
425
.theme-overlay .theme-header .close {
 
426
        cursor: pointer;
 
427
        height: 48px;
 
428
        width: 50px;
 
429
        text-align: center;
 
430
        float: right;
 
431
        border: 0;
 
432
        border-left: 1px solid #ddd;
 
433
        background-color: transparent;
 
434
        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 
435
        transition: color .1s ease-in-out, background .1s ease-in-out;
 
436
}
 
437
 
 
438
.theme-overlay .theme-header .close:before {
 
439
        font: normal 22px/50px 'dashicons' !important;
 
440
        color: #777;
 
441
        display: inline-block;
 
442
        content: '\f335';
 
443
        font-weight: 300;
 
444
}
 
445
 
 
446
/* Left and right navigation */
 
447
.theme-overlay .theme-header .right,
 
448
.theme-overlay .theme-header .left {
 
449
        cursor: pointer;
 
450
        color: #777;
 
451
        background-color: transparent;
 
452
        height: 48px;
 
453
        width: 54px;
 
454
        float: left;
 
455
        text-align: center;
 
456
        border: 0;
 
457
        border-right: 1px solid #ddd;
 
458
        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 
459
        transition: color .1s ease-in-out, background .1s ease-in-out;
 
460
}
 
461
 
 
462
.theme-overlay .theme-header .close:focus,
 
463
.theme-overlay .theme-header .close:hover,
 
464
.theme-overlay .theme-header .right:focus,
 
465
.theme-overlay .theme-header .right:hover,
 
466
.theme-overlay .theme-header .left:focus,
 
467
.theme-overlay .theme-header .left:hover {
 
468
        background: #ddd;
 
469
        border-color: #ccc;
 
470
        color: #000;
 
471
}
 
472
 
 
473
.theme-overlay .theme-header .close:focus:before,
 
474
.theme-overlay .theme-header .close:hover:before {
 
475
        color: #000;
 
476
}
 
477
 
 
478
.theme-overlay .theme-header .close:focus,
 
479
.theme-overlay .theme-header .right:focus,
 
480
.theme-overlay .theme-header .left:focus {
 
481
    -webkit-box-shadow: none;
 
482
    box-shadow: none;
 
483
    outline: none;
 
484
}
 
485
 
 
486
.theme-overlay .theme-header .left.disabled,
 
487
.theme-overlay .theme-header .right.disabled,
 
488
.theme-overlay .theme-header .left.disabled:hover,
 
489
.theme-overlay .theme-header .right.disabled:hover {
 
490
        color: #ccc;
 
491
        background: inherit;
 
492
        cursor: inherit;
 
493
}
 
494
 
 
495
.theme-overlay .theme-header .right:before,
 
496
.theme-overlay .theme-header .left:before {
 
497
        font: normal 20px/50px 'dashicons' !important;
 
498
        display: inline;
 
499
        font-weight: 300;
 
500
}
 
501
 
 
502
.theme-overlay .theme-header .left:before,
 
503
.rtl .theme-overlay .theme-header .right:before {
 
504
        content: '\f341';
 
505
}
 
506
 
 
507
.theme-overlay .theme-header .right:before,
 
508
.rtl .theme-overlay .theme-header .left:before {
 
509
        content: '\f345';
 
510
}
 
511
 
 
512
 
 
513
 
 
514
.theme-overlay .theme-wrap {
 
515
        clear: both;
 
516
        position: fixed;
 
517
        top: 9%;
 
518
        left: 190px;
 
519
        right: 30px;
 
520
        bottom: 3%;
 
521
        background: #fff;
 
522
        -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
 
523
        box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
 
524
        z-index: 20;
 
525
        -webkit-box-sizing: border-box;
 
526
        -moz-box-sizing: border-box;
 
527
        box-sizing: border-box;
 
528
}
 
529
 
 
530
.theme-overlay .theme-wrap:after {
 
531
        content: ".";
 
532
        display: block;
 
533
        height: 0;
 
534
        clear: both;
 
535
        visibility: hidden;
 
536
}
 
537
 
 
538
body.folded .theme-overlay .theme-wrap {
 
539
        left: 70px;
 
540
}
 
541
 
 
542
.theme-overlay .theme-about {
 
543
        position: absolute;
 
544
        top: 49px;
 
545
        bottom: 57px;
 
546
        left: 0;
 
547
        right: 0;
 
548
        overflow: auto;
 
549
        padding: 2% 4%;
 
550
}
 
551
.theme-overlay .theme-about:after {
 
552
        content: ".";
 
553
        display: block;
 
554
        height: 0;
 
555
        clear: both;
 
556
        visibility: hidden;
 
557
}
 
558
 
 
559
.theme-overlay .theme-actions {
 
560
        position: absolute;
 
561
        text-align: center;
 
562
        bottom: 0;
 
563
        left: 0;
 
564
        right: 0;
 
565
        padding: 10px 25px 5px;
 
566
        background: #f3f3f3;
 
567
        z-index: 30;
 
568
        -webkit-box-sizing: border-box;
 
569
        -moz-box-sizing: border-box;
 
570
        box-sizing: border-box;
 
571
        border-top: 1px solid #eee;
 
572
}
 
573
 
 
574
.ie8 .theme-overlay .theme-actions {
 
575
        border: 1px solid #eee;
 
576
}
 
577
 
 
578
.theme-overlay .theme-actions a {
 
579
        margin-right: 5px;
 
580
        margin-bottom: 5px;
 
581
}
 
582
 
 
583
.theme-overlay .theme-actions .delete-theme {
 
584
        color: #a00;
 
585
        position: absolute;
 
586
        right: 10px;
 
587
        bottom: 5px;
 
588
        text-decoration: none;
 
589
        border-color: transparent;
 
590
        -webkit-box-shadow: none;
 
591
        box-shadow: none;
 
592
        background: transparent;
 
593
}
 
594
 
 
595
.theme-overlay .theme-actions .delete-theme:hover,
 
596
.theme-overlay .theme-actions .delete-theme:focus {
 
597
        background: #d54e21;
 
598
        color: #fff;
 
599
        border-color: #d54e21;
 
600
}
 
601
 
 
602
.theme-overlay .theme-actions .active-theme,
 
603
.theme-overlay.active .theme-actions .inactive-theme {
 
604
        display: none;
 
605
}
 
606
 
 
607
.theme-overlay .theme-actions .inactive-theme,
 
608
.theme-overlay.active .theme-actions .active-theme {
 
609
        display: block;
 
610
}
 
611
 
 
612
/**
 
613
 * Theme Screenshots gallery
 
614
 */
 
615
.theme-overlay .theme-screenshots {
 
616
        float: left;
 
617
        margin: 0 30px 0 0;
 
618
        width: 55%;
 
619
        max-width: 880px;
 
620
        text-align: center;
 
621
}
 
622
 
 
623
/* First screenshot, shown big */
 
624
.theme-overlay .screenshot {
 
625
        border: 1px solid #fff;
 
626
        -webkit-box-sizing: border-box;
 
627
        -moz-box-sizing: border-box;
 
628
        box-sizing: border-box;
 
629
        overflow: hidden;
 
630
        position: relative;
 
631
        -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
 
632
        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
 
633
}
 
634
 
 
635
.theme-overlay .screenshot:after {
 
636
        content: '';
 
637
        display: block;
 
638
        padding-top: 75%; /* using a 4/3 aspect ratio */
 
639
}
 
640
 
 
641
.theme-overlay .screenshot img {
 
642
        height: auto;
 
643
        position: absolute;
 
644
        left: 0;
 
645
        top: 0;
 
646
        width: 100%;
 
647
}
 
648
/* Handles old 300px screenshots */
 
649
.theme-overlay.small-screenshot .theme-screenshots {
 
650
        position: absolute;
 
651
        width: 302px;
 
652
}
 
653
.theme-overlay.small-screenshot .theme-info {
 
654
        margin-left: 350px;
 
655
        width: auto;
 
656
}
 
657
 
 
658
/* Other screenshots, shown small and square */
 
659
.theme-overlay .screenshot.thumb {
 
660
        background: #ccc;
 
661
        border: 1px solid #eee;
 
662
        float: none;
 
663
        display: inline-block;
 
664
        margin: 10px 5px 0;
 
665
        width: 140px;
 
666
        height: 80px;
 
667
        cursor: pointer;
 
668
}
 
669
 
 
670
.theme-overlay .screenshot.thumb:after {
 
671
        content: '';
 
672
        display: block;
 
673
        padding-top: 100%; /* using a 1/1 aspect ratio */
 
674
}
 
675
 
 
676
.theme-overlay .screenshot.thumb img {
 
677
        cursor: pointer;
 
678
        height: auto;
 
679
        position: absolute;
 
680
        left: 0;
 
681
        top: 0;
 
682
        width: 100%;
 
683
        height: auto;
 
684
}
 
685
 
 
686
.theme-overlay .screenshot.selected {
 
687
        background: transparent;
 
688
        border: 2px solid #2ea2cc;
 
689
}
 
690
 
 
691
.theme-overlay .screenshot.selected img {
 
692
        opacity: 0.8;
 
693
}
 
694
 
 
695
/* No screenshot placeholder */
 
696
.theme-browser .theme .theme-screenshot.blank,
 
697
.theme-overlay .screenshot.blank {
 
698
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
 
699
}
 
700
 
 
701
/**
 
702
 * Theme heading information
 
703
 */
 
704
.theme-overlay .theme-info {
 
705
        width: 40%;
 
706
        float: left;
 
707
}
 
708
 
 
709
.theme-overlay .current-label {
 
710
        background: #333;
 
711
        color: #fff;
 
712
        font-size: 11px;
 
713
        display: inline-block;
 
714
        padding: 2px 8px;
 
715
        -webkit-border-radius: 2px;
 
716
        border-radius: 2px;
 
717
        margin: 0 0 -10px;
 
718
        -webkit-user-select: none;
 
719
        -moz-user-select: none;
 
720
        -ms-user-select: none;
 
721
        user-select: none;
 
722
}
 
723
 
 
724
.theme-overlay .theme-name {
 
725
        color: #222;
 
726
        font-size: 32px;
 
727
        font-weight: 100;
 
728
        margin: 10px 0 0;
 
729
        line-height: 1.3;
 
730
}
 
731
 
 
732
.theme-overlay .theme-version {
 
733
        color: #999;
 
734
        font-size: 13px;
 
735
        font-weight: 400;
 
736
        float: none;
 
737
        display: inline-block;
 
738
        margin-left: 10px;
 
739
        -webkit-user-select: none;
 
740
        -moz-user-select: none;
 
741
        -ms-user-select: none;
 
742
        user-select: none;
 
743
}
 
744
 
 
745
.theme-overlay .theme-author {
 
746
        color: #686868;
 
747
        font-size: 16px;
 
748
        font-weight: 400;
 
749
        margin: 15px 0 25px;
 
750
}
 
751
 
 
752
.theme-overlay .theme-author a {
 
753
        text-decoration: none;
 
754
}
 
755
 
 
756
.theme-overlay .theme-description {
 
757
        color: #555;
 
758
        font-size: 15px;
 
759
        font-weight: 400;
 
760
        line-height: 1.5;
 
761
        margin: 30px 0 0 0;
 
762
}
 
763
 
 
764
.theme-overlay .theme-tags {
 
765
        border-top: 3px solid #eee;
 
766
        color: #888;
 
767
        font-size: 13px;
 
768
        font-weight: 400;
 
769
        margin: 30px 0 0 0;
 
770
        padding-top: 20px;
 
771
}
 
772
 
 
773
.theme-overlay .theme-tags span {
 
774
        color: #444;
 
775
        font-weight: bold;
 
776
        margin-right: 5px;
 
777
}
 
778
 
 
779
/* Theme Updates info */
 
780
.theme-overlay .theme-update-message {
 
781
        background: #fef7f1;
 
782
        border: 1px solid #eee;
 
783
        border-left: 4px solid #d54e21;
 
784
        -webkit-border-radius: 3px;
 
785
        border-radius: 3px;
 
786
        padding: 5px 20px 10px;
 
787
}
 
788
 
 
789
.theme-overlay .theme-update {
 
790
        color: #222;
 
791
        font-size: 18px;
 
792
        display: inline-block;
 
793
        line-height: 40px;
 
794
        margin: 0;
 
795
}
 
796
 
 
797
.theme-overlay .parent-theme {
 
798
        background: #f7fcfe;
 
799
        border: 1px solid #eee;
 
800
        border-left: 4px solid #2ea2cc;
 
801
        font-size: 14px;
 
802
        font-weight: normal;
 
803
        margin-top: 30px;
 
804
        padding: 10px 10px 10px 20px;
 
805
}
 
806
 
 
807
.theme-overlay .parent-theme strong {
 
808
        font-weight: 700;
 
809
}
 
810
 
 
811
/**
 
812
 * Single Theme Mode
 
813
 * Displays detailed view inline when a user has no switch capabilities
 
814
 */
 
815
.single-theme .theme-overlay .theme-backdrop,
 
816
.single-theme .theme-overlay .theme-header,
 
817
.single-theme .theme {
 
818
        display: none;
 
819
}
 
820
 
 
821
.single-theme .theme-overlay .theme-wrap {
 
822
        clear: both;
 
823
        min-height: 330px;
 
824
        position: relative;
 
825
        left: auto;
 
826
        right: auto;
 
827
        top: auto;
 
828
        bottom: auto;
 
829
}
 
830
 
 
831
.single-theme .theme-overlay .theme-about {
 
832
        padding: 30px 30px 70px;
 
833
        position: static;
 
834
}
 
835
 
 
836
.single-theme .theme-overlay .theme-actions {
 
837
        position: absolute;
 
838
}
 
839
 
 
840
/**
 
841
 * Basic Responsive structure...
 
842
 *
 
843
 * Shuffles theme columns around based on screen width
 
844
 */
 
845
 
 
846
@media only screen and (min-width: 2000px) {
 
847
        #wpwrap .theme-browser .theme {
 
848
                width: 17.6%;
 
849
                margin: 0 3% 3% 0;
 
850
        }
 
851
 
 
852
        #wpwrap .theme-browser .theme:nth-child(3n),
 
853
        #wpwrap .theme-browser .theme:nth-child(4n) {
 
854
                margin-right: 3%;
 
855
        }
 
856
 
 
857
        #wpwrap .theme-browser .theme:nth-child(5n) {
 
858
                margin-right: 0;
 
859
        }
 
860
}
 
861
 
 
862
@media only screen and (min-width: 1680px) {
 
863
        .theme-overlay .theme-wrap {
 
864
                width: 1450px;
 
865
                margin: 0 auto;
 
866
        }
 
867
}
 
868
 
 
869
/* Maximum screenshot width reaches 440px */
 
870
@media only screen and (min-width: 1640px) {
 
871
        .theme-browser .theme {
 
872
                width: 22.7%;
 
873
                margin: 0 3% 3% 0;
 
874
        }
 
875
        .theme-browser .theme .theme-screenshot:after {
 
876
                padding-top: 75%; /* using a 4/3 aspect ratio */
 
877
        }
 
878
 
 
879
        .theme-browser .theme:nth-child(3n) {
 
880
                margin-right: 3%;
 
881
        }
 
882
 
 
883
        .theme-browser .theme:nth-child(4n) {
 
884
                margin-right: 0;
 
885
        }
 
886
}
 
887
/* Maximum screenshot width reaches 440px */
 
888
@media only screen and (max-width: 1120px) {
 
889
        .theme-browser .theme {
 
890
                width: 47.5%;
 
891
                margin-right: 0;
 
892
        }
 
893
 
 
894
        .theme-browser .theme:nth-child(even) {
 
895
                margin-right: 0;
 
896
        }
 
897
 
 
898
        .theme-browser .theme:nth-child(odd) {
 
899
                margin-right: 5%;
 
900
        }
 
901
}
 
902
 
 
903
/* Admin menu is folded */
 
904
@media only screen and (max-width: 900px) {
 
905
        .theme-overlay .theme-wrap {
 
906
                left: 65px;
 
907
        }
 
908
}
 
909
 
 
910
@media only screen and (max-width: 780px) {
 
911
        body.folded .theme-overlay .theme-wrap,
 
912
        .theme-overlay .theme-wrap {
 
913
                top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
 
914
                right: 0;
 
915
                bottom: 0;
 
916
                left: 0;
 
917
                padding: 70px 20px 20px;
 
918
                border: none;
 
919
                z-index: 500; /* should overlap #wpadminbar, which is 500 on mobile. */
 
920
                position: fixed;
 
921
        }
 
922
 
 
923
        .theme-browser .theme.active .theme-name span {
 
924
                /* Hide the "Active: " label on smaller screens. */
 
925
                display: none;
 
926
        }
 
927
 
 
928
        .theme-overlay .theme-screenshots {
 
929
                width: 40%;
 
930
        }
 
931
 
 
932
        .theme-overlay .theme-info {
 
933
                width: 50%;
 
934
        }
 
935
        .single-theme .theme-wrap {
 
936
                padding: 10px;
 
937
        }
 
938
 
 
939
        .theme-browser .theme .theme-actions {
 
940
                padding: 5px 10px 4px 10px;
 
941
        }
 
942
 
 
943
        .theme-overlay.small-screenshot .theme-screenshots {
 
944
                position: static;
 
945
                float: none;
 
946
                max-width: 302px;
 
947
        }
 
948
 
 
949
        .theme-overlay.small-screenshot .theme-info {
 
950
                margin-left: 0;
 
951
                width: auto;
 
952
        }
 
953
 
 
954
        .theme:not(.active):hover .theme-actions,
 
955
        .theme:not(.active):focus .theme-actions,
 
956
        .theme:hover .more-details,
 
957
        .theme:focus .more-details {
 
958
                display: none;
 
959
        }
 
960
 
 
961
        .theme-browser.rendered .theme:hover .theme-screenshot img,
 
962
        .theme-browser.rendered .theme:focus .theme-screenshot img {
 
963
                opacity: 1.0;
 
964
        }
 
965
}
 
966
 
 
967
@media only screen and (max-width: 480px) {
 
968
        .theme-browser .theme {
 
969
                width: 100%;
 
970
                margin-right: 0;
 
971
        }
 
972
 
 
973
        .theme-browser .theme:nth-child(2n),
 
974
        .theme-browser .theme:nth-child(3n) {
 
975
                margin-right: 0;
 
976
        }
 
977
}
 
978
 
 
979
@media only screen and (max-width: 650px) {
 
980
        .theme-overlay .theme-update,
 
981
        .theme-overlay .theme-description {
 
982
                margin-left: 0;
 
983
        }
 
984
 
 
985
        .theme-overlay .theme-actions .delete-theme {
 
986
                position: relative;
 
987
                right: auto;
 
988
                bottom: auto;
 
989
        }
 
990
 
 
991
        .theme-overlay .theme-actions .inactive-theme {
 
992
                display: inline;
 
993
        }
 
994
 
 
995
        .theme-overlay .theme-screenshots {
 
996
                width: 100%;
 
997
                float: none;
 
998
        }
 
999
 
 
1000
        .theme-overlay .theme-info {
 
1001
                width: 100%;
 
1002
        }
 
1003
 
 
1004
        .theme-overlay .theme-author {
 
1005
                margin: 5px 0 15px 0;
 
1006
        }
 
1007
 
 
1008
        .theme-overlay .current-label {
 
1009
                margin-top: 10px;
 
1010
                font-size: 13px;
 
1011
        }
 
1012
 
 
1013
        .themes-php .wrap h2 {
 
1014
                width: 100%;
 
1015
        }
 
1016
 
 
1017
        .themes-php .wp-filter-search {
 
1018
                float: none;
 
1019
                clear: both;
 
1020
                left: 0;
 
1021
                top: 0;
 
1022
                right: 0;
 
1023
                margin: 10px 0;
 
1024
                width: 100%;
 
1025
        }
 
1026
 
 
1027
        .theme-browser .theme.add-new-theme span:after {
 
1028
                font: normal 60px/90px 'dashicons';
 
1029
                width: 80px;
 
1030
                height: 80px;
 
1031
                top: 30%;
 
1032
                left: 50%;
 
1033
                text-indent: 0;
 
1034
                margin-left: -40px;
 
1035
        }
 
1036
 
 
1037
        .single-theme .theme-wrap {
 
1038
                margin: 0 -12px 0 -10px;
 
1039
                padding: 10px;
 
1040
        }
 
1041
        .single-theme .theme-overlay .theme-about {
 
1042
                padding: 10px;
 
1043
                overflow: visible;
 
1044
        }
 
1045
        .single-theme .current-label {
 
1046
                display: none;
 
1047
        }
 
1048
        .single-theme .theme-overlay .theme-actions {
 
1049
                position: static;
 
1050
        }
 
1051
}
 
1052
 
 
1053
.broken-themes {
 
1054
        clear: both;
 
1055
}
 
1056
 
 
1057
.broken-themes table {
 
1058
        text-align: left;
 
1059
        width: 50%;
 
1060
        border-spacing: 3px;
 
1061
        padding: 3px;
 
1062
}
 
1063
 
 
1064
 
 
1065
/*------------------------------------------------------------------------------
 
1066
  16.2 - Install Themes
 
1067
------------------------------------------------------------------------------*/
 
1068
 
 
1069
/* Already installed theme */
 
1070
.theme-browser .theme .theme-installed {
 
1071
        background: #0074a2;
 
1072
}
 
1073
.theme-browser .theme .theme-installed:before {
 
1074
        content: '\f147';
 
1075
}
 
1076
.theme-browser .theme.is-installed .theme-actions .button-primary {
 
1077
        display: none !important;
 
1078
}
 
1079
 
 
1080
.theme-install-php a.upload,
 
1081
.theme-install-php a.browse-themes {
 
1082
        cursor: pointer;
 
1083
}
 
1084
.theme-install-php a.browse-themes,
 
1085
.theme-install-php.show-upload-theme a.upload {
 
1086
        display: none;
 
1087
}
 
1088
.theme-install-php.show-upload-theme a.browse-themes {
 
1089
        display: inline;
 
1090
}
 
1091
.upload-theme,
 
1092
.upload-plugin {
 
1093
        -webkit-box-sizing: border-box;
 
1094
        -moz-box-sizing: border-box;
 
1095
        box-sizing: border-box;
 
1096
        display: none;
 
1097
        margin: 0;
 
1098
        padding: 0;
 
1099
        width: 100%;
 
1100
        overflow: hidden;
 
1101
        position: relative;
 
1102
        top: 10px;
 
1103
}
 
1104
body.show-upload-theme .upload-theme,
 
1105
.upload-plugin {
 
1106
        display: block;
 
1107
}
 
1108
.upload-theme .wp-upload-form,
 
1109
.upload-plugin .wp-upload-form {
 
1110
        background: #fafafa;
 
1111
        border: 1px solid #e5e5e5;
 
1112
        padding: 30px;
 
1113
        margin: 30px auto;
 
1114
        max-width: 380px;
 
1115
}
 
1116
.upload-theme .install-help,
 
1117
.upload-plugin .install-help {
 
1118
        color: #999;
 
1119
        font-size: 18px;
 
1120
        font-style: normal;
 
1121
        margin: 0;
 
1122
        padding: 40px 0 0;
 
1123
        text-align: center;
 
1124
}
 
1125
body.show-upload-theme .upload-theme + .wp-filter,
 
1126
body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
 
1127
        display: none;
 
1128
}
 
1129
 
 
1130
p.no-themes {
 
1131
        color: #999;
 
1132
        font-size: 18px;
 
1133
        font-style: normal;
 
1134
        margin: 0;
 
1135
        padding: 0;
 
1136
        text-align: center;
 
1137
        display: none;
 
1138
}
 
1139
body.no-results p.no-themes {
 
1140
        display: block;
 
1141
}
 
1142
body.show-upload-theme p.no-themes {
 
1143
        display: none !important;
 
1144
}
 
1145
 
 
1146
.theme-install-php .add-new-theme {
 
1147
        display: none !important;
 
1148
}
 
1149
 
 
1150
@media only screen and (max-width: 1120px) {
 
1151
        .upload-theme .wp-upload-form {
 
1152
                margin: 20px 0;
 
1153
                max-width: 100%;
 
1154
        }
 
1155
        .upload-theme .install-help {
 
1156
                font-size: 15px;
 
1157
                padding: 20px 0 0;
 
1158
                text-align: left;
 
1159
        }
 
1160
}
 
1161
 
 
1162
.rating {
 
1163
        margin: 30px 0;
 
1164
}
 
1165
.rating span:before {
 
1166
        color: #e6b800;
 
1167
        content: "\f154";
 
1168
        display: inline-block;
 
1169
        -webkit-font-smoothing: antialiased;
 
1170
        font: normal 20px/1 'dashicons';
 
1171
        vertical-align: top;
 
1172
}
 
1173
/* Half stars */
 
1174
.rating-10 span.one:before,
 
1175
.rating-30 span.two:before,
 
1176
.rating-50 span.three:before,
 
1177
.rating-70 span.four:before,
 
1178
.rating-90 span.five:before {
 
1179
        content: "\f459";
 
1180
}
 
1181
/* Full stars */
 
1182
.rating-20 span.one:before {
 
1183
        content: "\f155";
 
1184
}
 
1185
.rating-30 span.one:before,
 
1186
.rating-40 span.one:before,
 
1187
.rating-40 span.two:before {
 
1188
        content: "\f155";
 
1189
}
 
1190
.rating-50 span.one:before,
 
1191
.rating-50 span.two:before,
 
1192
.rating-60 span.one:before,
 
1193
.rating-60 span.two:before,
 
1194
.rating-60 span.three:before {
 
1195
        content: "\f155";
 
1196
}
 
1197
.rating-70 span.one:before,
 
1198
.rating-70 span.two:before,
 
1199
.rating-70 span.three:before,
 
1200
.rating-80 span.one:before,
 
1201
.rating-80 span.two:before,
 
1202
.rating-80 span.three:before,
 
1203
.rating-80 span.four:before {
 
1204
        content: "\f155";
 
1205
}
 
1206
.rating-90 span.one:before,
 
1207
.rating-90 span.two:before,
 
1208
.rating-90 span.three:before,
 
1209
.rating-90 span.four:before,
 
1210
.rating-100 span.one:before,
 
1211
.rating-100 span.two:before,
 
1212
.rating-100 span.three:before,
 
1213
.rating-100 span.four:before,
 
1214
.rating-100 span.five:before {
 
1215
        content: "\f155";
 
1216
}
 
1217
.rating .ratings {
 
1218
        display: inline;
 
1219
        margin-left: 10px;
 
1220
        line-height: 20px;
 
1221
        color: #999;
 
1222
}
 
1223
 
 
1224
/*------------------------------------------------------------------------------
 
1225
  16.3 - Custom Header Screen
 
1226
------------------------------------------------------------------------------*/
 
1227
 
 
1228
.appearance_page_custom-header #headimg {
 
1229
        border: 1px solid #DFDFDF;
 
1230
        overflow: hidden;
 
1231
        width: 100%;
 
1232
}
 
1233
 
 
1234
.appearance_page_custom-header #upload-form p label {
 
1235
        font-size: 12px;
 
1236
}
 
1237
 
 
1238
.appearance_page_custom-header .available-headers .default-header {
 
1239
        float: left;
 
1240
        margin: 0 20px 20px 0;
 
1241
}
 
1242
 
 
1243
.appearance_page_custom-header .random-header {
 
1244
        clear: both;
 
1245
        margin: 0 20px 20px 0;
 
1246
        vertical-align: middle;
 
1247
}
 
1248
 
 
1249
.appearance_page_custom-header .available-headers label input,
 
1250
.appearance_page_custom-header .random-header label input {
 
1251
        margin-right: 10px;
 
1252
}
 
1253
 
 
1254
.appearance_page_custom-header .available-headers label img {
 
1255
        vertical-align: middle;
 
1256
}
 
1257
 
 
1258
 
 
1259
/*------------------------------------------------------------------------------
 
1260
  16.4 - Custom Background Screen
 
1261
------------------------------------------------------------------------------*/
 
1262
 
 
1263
div#custom-background-image {
 
1264
        min-height: 100px;
 
1265
        border: 1px solid #dfdfdf;
 
1266
}
 
1267
 
 
1268
div#custom-background-image img {
 
1269
        max-width: 400px;
 
1270
        max-height: 300px;
 
1271
}
 
1272
 
 
1273
/*------------------------------------------------------------------------------
 
1274
  23.0 - Full Overlay w/ Sidebar
 
1275
------------------------------------------------------------------------------*/
 
1276
 
 
1277
body.full-overlay-active {
 
1278
        overflow: hidden;
 
1279
}
 
1280
 
 
1281
.wp-full-overlay {
 
1282
        background: transparent;
 
1283
        z-index: 500000;
 
1284
        position: fixed;
 
1285
        overflow: visible;
 
1286
        top: 0;
 
1287
        bottom: 0;
 
1288
        left: 0;
 
1289
        right: 0;
 
1290
        height: 100%;
 
1291
        min-width: 0;
 
1292
}
 
1293
 
 
1294
.wp-full-overlay-sidebar {
 
1295
        -webkit-box-sizing: border-box;
 
1296
        -moz-box-sizing: border-box;
 
1297
        box-sizing: border-box;
 
1298
        position: fixed;
 
1299
        width: 300px;
 
1300
        height: 100%;
 
1301
        top: 0;
 
1302
        bottom: 0;
 
1303
        left: 0;
 
1304
        padding: 0;
 
1305
        margin: 0;
 
1306
        z-index: 10;
 
1307
        overflow: auto;
 
1308
        background: #eee;
 
1309
        border-right: none;
 
1310
}
 
1311
 
 
1312
.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
 
1313
        overflow: visible;
 
1314
}
 
1315
 
 
1316
.wp-full-overlay.collapsed,
 
1317
.wp-full-overlay.expanded .wp-full-overlay-sidebar {
 
1318
        margin-left: 0 !important;
 
1319
}
 
1320
 
 
1321
.wp-full-overlay.expanded {
 
1322
        margin-left: 300px;
 
1323
}
 
1324
 
 
1325
.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
 
1326
        margin-left: -300px;
 
1327
}
 
1328
 
 
1329
.wp-full-overlay-sidebar:after {
 
1330
        content: '';
 
1331
        display: block;
 
1332
        position: absolute;
 
1333
        top: 0;
 
1334
        bottom: 0;
 
1335
        right: 0;
 
1336
        width: 3px;
 
1337
        z-index: 1000;
 
1338
}
 
1339
 
 
1340
.wp-full-overlay-main {
 
1341
        position: absolute;
 
1342
        left: 0;
 
1343
        right: 0;
 
1344
        top: 0;
 
1345
        bottom: 0;
 
1346
        height: 100%;
 
1347
}
 
1348
 
 
1349
.wp-full-overlay-sidebar .wp-full-overlay-header {
 
1350
        position: absolute;
 
1351
        left: 0;
 
1352
        right: 0;
 
1353
        height: 45px;
 
1354
        padding: 0 15px;
 
1355
        line-height: 45px;
 
1356
        z-index: 10;
 
1357
        margin: 0;
 
1358
        border-top: none;
 
1359
        -webkit-box-shadow: none;
 
1360
        box-shadow: none;
 
1361
}
 
1362
 
 
1363
.wp-full-overlay-sidebar .wp-full-overlay-header a.back {
 
1364
        margin-top: 9px;
 
1365
}
 
1366
 
 
1367
.wp-full-overlay-sidebar .wp-full-overlay-footer {
 
1368
        bottom: 0;
 
1369
        border-bottom: none;
 
1370
        border-top: none;
 
1371
        -webkit-box-shadow: none;
 
1372
        box-shadow: none;
 
1373
}
 
1374
 
 
1375
.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
 
1376
        position: absolute;
 
1377
        top: 45px;
 
1378
        bottom: 45px;
 
1379
        left: 0;
 
1380
        right: 0;
 
1381
        overflow: auto;
 
1382
}
 
1383
 
 
1384
/* Close & Navigation Links */
 
1385
.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
 
1386
        padding: 0;
 
1387
}
 
1388
 
 
1389
.theme-install-overlay .close-full-overlay,
 
1390
.theme-install-overlay .previous-theme,
 
1391
.theme-install-overlay .next-theme {
 
1392
        display: block;
 
1393
        position: relative;
 
1394
        float: left;
 
1395
        width: 45px;
 
1396
        height: 45px;
 
1397
        padding-right: 2px;
 
1398
        background: #eee;
 
1399
        border-right: 1px solid #ddd;
 
1400
        color: #444;
 
1401
        cursor: pointer;
 
1402
        text-decoration: none;
 
1403
        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 
1404
        transition: color .1s ease-in-out, background .1s ease-in-out;
 
1405
}
 
1406
 
 
1407
.theme-install-overlay .close-full-overlay:hover,
 
1408
.theme-install-overlay .close-full-overlay:focus,
 
1409
.theme-install-overlay .previous-theme:hover,
 
1410
.theme-install-overlay .previous-theme:focus,
 
1411
.theme-install-overlay .next-theme:hover,
 
1412
.theme-install-overlay .next-theme:focus {
 
1413
        background: #ddd;
 
1414
        border-color: #ccc;
 
1415
        color: #000;
 
1416
        outline: none;
 
1417
        -webkit-box-shadow: none;
 
1418
        box-shadow: none;
 
1419
}
 
1420
 
 
1421
.theme-install-overlay .close-full-overlay:before {
 
1422
        font: normal 22px/1 dashicons;
 
1423
        content: "\f335";
 
1424
        position: relative;
 
1425
        top: 7px;
 
1426
        left: 13px;
 
1427
}
 
1428
 
 
1429
.theme-install-overlay .previous-theme:before {
 
1430
        font: normal 20px/1 dashicons;
 
1431
        content: "\f341";
 
1432
        position: relative;
 
1433
        top: 6px;
 
1434
        left: 14px;
 
1435
}
 
1436
 
 
1437
.theme-install-overlay .next-theme:before {
 
1438
        font: normal 20px/1 dashicons;
 
1439
        content: "\f345";
 
1440
        position: relative;
 
1441
        top: 6px;
 
1442
        left: 13px;
 
1443
}
 
1444
 
 
1445
.theme-install-overlay .previous-theme.disabled,
 
1446
.theme-install-overlay .next-theme.disabled,
 
1447
.theme-install-overlay .previous-theme.disabled:hover,
 
1448
.theme-install-overlay .previous-theme.disabled:focus,
 
1449
.theme-install-overlay .next-theme.disabled:hover,
 
1450
.theme-install-overlay .next-theme.disabled:focus {
 
1451
        color: #bbb;
 
1452
        background: #eee;
 
1453
        cursor: default;
 
1454
        pointer-events: none;
 
1455
}
 
1456
 
 
1457
.rtl .theme-install-overlay .previous-theme:before {
 
1458
        content: "\f345";
 
1459
}
 
1460
 
 
1461
.rtl .theme-install-overlay .next-theme:before {
 
1462
        content: "\f341";
 
1463
}
 
1464
 
 
1465
/* Collapse Button */
 
1466
.wp-full-overlay a.collapse-sidebar {
 
1467
        position: absolute;
 
1468
        bottom: 12px;
 
1469
        left: 0;
 
1470
        z-index: 50;
 
1471
        display: block;
 
1472
        width: 19px;
 
1473
        height: 19px;
 
1474
        margin-left: 15px;
 
1475
        padding: 0;
 
1476
        -webkit-border-radius: 50%;
 
1477
        border-radius: 50%;
 
1478
        color: #777;
 
1479
        text-decoration: none;
 
1480
}
 
1481
 
 
1482
.wp-full-overlay a.collapse-sidebar:hover {
 
1483
        color: #0074a2;
 
1484
}
 
1485
 
 
1486
.wp-full-overlay.collapsed .collapse-sidebar {
 
1487
        position: absolute;
 
1488
        left: 100%;
 
1489
}
 
1490
 
 
1491
.wp-full-overlay .collapse-sidebar-arrow {
 
1492
        position: static;
 
1493
        margin-top: 0;
 
1494
        margin-left: 0;
 
1495
        display: block;
 
1496
        width: auto;
 
1497
        height: auto;
 
1498
        background: none;
 
1499
}
 
1500
 
 
1501
.wp-full-overlay .collapse-sidebar-arrow:before {
 
1502
        -webkit-border-radius: 50%;
 
1503
        border-radius: 50%;
 
1504
        float: left;
 
1505
        content: "\f148";
 
1506
        background: #eee;
 
1507
        font: normal 20px/1 'dashicons';
 
1508
        speak: none;
 
1509
        display: block;
 
1510
        padding: 0;
 
1511
        text-indent: 0;
 
1512
        text-align: center;
 
1513
        position: relative;
 
1514
        -webkit-font-smoothing: antialiased;
 
1515
        -moz-osx-font-smoothing: grayscale;
 
1516
        text-decoration: none !important;
 
1517
}
 
1518
 
 
1519
.wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
 
1520
.rtl .wp-full-overlay .collapse-sidebar-arrow:before {
 
1521
        -webkit-transform: rotate(180deg);
 
1522
        -ms-transform: rotate(180deg);
 
1523
        transform: rotate(180deg);
 
1524
}
 
1525
 
 
1526
.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
 
1527
        -webkit-transform: none;
 
1528
        -ms-transform: none;
 
1529
        transform: none;
 
1530
}
 
1531
 
 
1532
.wp-full-overlay.collapsed .collapse-sidebar-arrow {
 
1533
        background-position: -1px -109px;
 
1534
}
 
1535
 
 
1536
.wp-full-overlay .collapse-sidebar-label {
 
1537
        position: absolute;
 
1538
        left: 100%;
 
1539
        line-height: 20px;
 
1540
        margin-left: 10px;
 
1541
}
 
1542
 
 
1543
.wp-full-overlay.collapsed .collapse-sidebar-label {
 
1544
        display: none;
 
1545
}
 
1546
 
 
1547
/* Animations */
 
1548
.wp-full-overlay,
 
1549
.wp-full-overlay-sidebar,
 
1550
.wp-full-overlay .collapse-sidebar,
 
1551
.wp-full-overlay-main {
 
1552
        -webkit-transition-property: left, right, top, bottom, width, margin;
 
1553
        transition-property: left, right, top, bottom, width, margin;
 
1554
        -webkit-transition-duration: 0.2s;
 
1555
        transition-duration: 0.2s;
 
1556
}
 
1557
 
 
1558
/*------------------------------------------------------------------------------
 
1559
  24.0 - Customize Loader
 
1560
------------------------------------------------------------------------------*/
 
1561
 
 
1562
.no-customize-support .hide-if-no-customize,
 
1563
.customize-support .hide-if-customize,
 
1564
.no-customize-support.wp-core-ui .hide-if-no-customize,
 
1565
.no-customize-support .wp-core-ui .hide-if-no-customize,
 
1566
.customize-support.wp-core-ui .hide-if-customize,
 
1567
.customize-support .wp-core-ui .hide-if-customize {
 
1568
        display: none;
 
1569
}
 
1570
 
 
1571
#customize-container {
 
1572
        display: none;
 
1573
        background: #fff;
 
1574
        z-index: 500000;
 
1575
        position: fixed;
 
1576
        overflow: visible;
 
1577
        top: 0;
 
1578
        bottom: 0;
 
1579
        left: 0;
 
1580
        right: 0;
 
1581
        height: 100%;
 
1582
}
 
1583
 
 
1584
.customize-active #customize-container {
 
1585
        display: block;
 
1586
}
 
1587
 
 
1588
.customize-loading #customize-container iframe {
 
1589
        opacity: 0;
 
1590
}
 
1591
 
 
1592
.customize-loading #customize-container {
 
1593
        background: #fff url(../images/spinner.gif) no-repeat fixed center center;
 
1594
        -webkit-background-size: 20px 20px;
 
1595
        background-size: 20px 20px;
 
1596
}
 
1597
 
 
1598
#customize-container iframe,
 
1599
.theme-install-overlay iframe {
 
1600
        height: 100%;
 
1601
        width: 100%;
 
1602
        z-index: 20;
 
1603
        -webkit-transition: opacity 0.3s;
 
1604
        transition: opacity 0.3s;
 
1605
}
 
1606
 
 
1607
#customize-container .collapse-sidebar {
 
1608
        bottom: 16px;
 
1609
}
 
1610
 
 
1611
#customize-controls {
 
1612
        margin-top: 0;
 
1613
}
 
1614
 
 
1615
.theme-install-overlay {
 
1616
        display: none;
 
1617
}
 
1618
 
 
1619
.theme-install-overlay.single-theme {
 
1620
        display: block;
 
1621
}
 
1622
 
 
1623
.install-theme-info {
 
1624
        display: none;
 
1625
        padding: 10px 20px 60px;
 
1626
}
 
1627
 
 
1628
.single-theme .install-theme-info {
 
1629
        padding-top: 15px;
 
1630
}
 
1631
 
 
1632
.theme-install-overlay .install-theme-info {
 
1633
        display: block;
 
1634
}
 
1635
 
 
1636
.install-theme-info .theme-install {
 
1637
        float: right;
 
1638
        margin-top: 18px;
 
1639
}
 
1640
 
 
1641
.install-theme-info .theme-name {
 
1642
        font-size: 16px;
 
1643
        line-height: 24px;
 
1644
        margin-bottom: 0;
 
1645
        margin-top: 0;
 
1646
}
 
1647
 
 
1648
.install-theme-info .theme-screenshot {
 
1649
        margin-top: 15px;
 
1650
        width: 258px;
 
1651
        border: 1px solid #ccc;
 
1652
}
 
1653
 
 
1654
.install-theme-info .theme-details {
 
1655
        overflow: hidden;
 
1656
}
 
1657
 
 
1658
.theme-details .theme-version {
 
1659
        margin: 15px 0;
 
1660
        float: left;
 
1661
}
 
1662
 
 
1663
.theme-details .star-rating {
 
1664
        margin: 7px 0;
 
1665
        float: right;
 
1666
}
 
1667
 
 
1668
.theme-details .theme-description {
 
1669
        float: left;
 
1670
        color: #777;
 
1671
        line-height: 20px;
 
1672
        max-width: 100%;
 
1673
}
 
1674
 
 
1675
.theme-install-overlay .wp-full-overlay-header .theme-install {
 
1676
        float: right;
 
1677
        margin: 8px 10px 0 0;
 
1678
        /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
 
1679
        line-height: 26px;
 
1680
}
 
1681
 
 
1682
.theme-install-overlay .wp-full-overlay-sidebar {
 
1683
        background: #eee;
 
1684
        border-right: 1px solid #ddd;
 
1685
}
 
1686
 
 
1687
.theme-install-overlay .wp-full-overlay-sidebar-content {
 
1688
        background: #fff;
 
1689
        border-top: 1px solid #ddd;
 
1690
        border-bottom: 1px solid #ddd;
 
1691
}
 
1692
 
 
1693
.theme-install-overlay .wp-full-overlay-main {
 
1694
        background: #fff url(../images/spinner.gif) no-repeat center center;
 
1695
        -webkit-background-size: 20px 20px;
 
1696
        background-size: 20px 20px;
 
1697
}
 
1698
 
 
1699
/* =Media Queries
 
1700
-------------------------------------------------------------- */
 
1701
 
 
1702
/**
 
1703
 * HiDPI Displays
 
1704
 */
 
1705
@media print,
 
1706
  (-o-min-device-pixel-ratio: 5/4),
 
1707
  (-webkit-min-device-pixel-ratio: 1.25),
 
1708
  (min-resolution: 120dpi) {
 
1709
        .wp-full-overlay .collapse-sidebar-arrow {
 
1710
                background-image: url(../images/arrows-2x.png);
 
1711
                -webkit-background-size: 15px 123px;
 
1712
                background-size: 15px 123px;
 
1713
        }
 
1714
 
 
1715
        .customize-loading #customize-container,
 
1716
        .theme-install-overlay .wp-full-overlay-main {
 
1717
                background-image: url(../images/spinner-2x.gif);
 
1718
        }
 
1719
}
 
1720
 
 
1721
@media screen and ( max-width: 782px ) {
 
1722
        .available-theme .action-links .delete-theme {
 
1723
                float: none;
 
1724
                margin: 0;
 
1725
                padding: 0;
 
1726
                clear: both;
 
1727
        }
 
1728
 
 
1729
        .available-theme .action-links .delete-theme a {
 
1730
                padding: 0;
 
1731
        }
 
1732
}