← Back to branch summary

~canonical-sysadmins/wordpress/4.7.4

« back to all changes in this revision

Viewing changes to wp-admin/css/customize-controls.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/customize-controls.css
 
1
body {
 
2
        overflow: hidden;
 
3
}
 
4
 
 
5
#customize-controls a {
 
6
        text-decoration: none;
 
7
}
 
8
 
 
9
#customize-controls h3 {
 
10
        font-size: 14px;
 
11
}
 
12
 
 
13
#customize-controls .submit {
 
14
        text-align: center;
 
15
}
 
16
 
 
17
#customize-controls .description {
 
18
        color: #666666;
 
19
}
 
20
 
 
21
#customize-header-actions .button-primary {
 
22
        float: right;
 
23
        margin-top: 9px;
 
24
}
 
25
 
 
26
#customize-header-actions .spinner {
 
27
        margin-top: 16px;
 
28
        margin-right: 4px;
 
29
}
 
30
 
 
31
.saving #customize-header-actions .spinner {
 
32
        display: block;
 
33
}
 
34
 
 
35
#customize-header-actions {
 
36
        border-bottom: 1px solid #ddd;
 
37
}
 
38
 
 
39
#customize-controls .wp-full-overlay-sidebar-content {
 
40
        overflow-y: auto;
 
41
        overflow-x: hidden;
 
42
}
 
43
 
 
44
#customize-info {
 
45
        border: none;
 
46
        border-top: 1px solid #ddd;
 
47
}
 
48
 
 
49
#customize-info .accordion-section-title {
 
50
        background-color: #fff;
 
51
        color: #666666;
 
52
        border-left: none;
 
53
        border-right: none;
 
54
        border-bottom: 1px solid #eeeeee;
 
55
}
 
56
 
 
57
#customize-info.open .accordion-section-title:after,
 
58
#customize-info .accordion-section-title:hover:after,
 
59
#customize-info .accordion-section-title:focus:after {
 
60
        color: #555555;
 
61
}
 
62
 
 
63
#customize-info .preview-notice {
 
64
        font-size: 13px;
 
65
        line-height: 24px;
 
66
}
 
67
 
 
68
#customize-info .theme-name {
 
69
        font-size: 20px;
 
70
        font-weight: 200;
 
71
        line-height: 24px;
 
72
        display: block;
 
73
}
 
74
 
 
75
#customize-info .theme-screenshot {
 
76
        width: 258px;
 
77
}
 
78
 
 
79
#customize-info .theme-description {
 
80
        margin-top: 1em;
 
81
        color: #666666;
 
82
        line-height: 20px;
 
83
}
 
84
 
 
85
#customize-theme-controls .control-section {
 
86
        border: none;
 
87
}
 
88
 
 
89
#customize-theme-controls .accordion-section-title {
 
90
        color: #555555;
 
91
        background-color: #fff;
 
92
        border-bottom: 1px solid #eeeeee;
 
93
}
 
94
 
 
95
#customize-theme-controls .accordion-section-content {
 
96
        color: #555555;
 
97
        background: #fff;
 
98
}
 
99
 
 
100
#customize-info.open .accordion-section-title,
 
101
#customize-info .accordion-section-title:hover,
 
102
#customize-info .accordion-section-title:focus,
 
103
#customize-theme-controls .control-section:hover > .accordion-section-title,
 
104
#customize-theme-controls .control-section .accordion-section-title:hover,
 
105
#customize-theme-controls .control-section.open .accordion-section-title,
 
106
#customize-theme-controls .control-section .accordion-section-title:focus {
 
107
        color: #222;
 
108
        background: #f5f5f5;
 
109
}
 
110
 
 
111
.js .control-section:hover .accordion-section-title,
 
112
.js .control-section .accordion-section-title:hover,
 
113
.js .control-section.open .accordion-section-title,
 
114
.js .control-section .accordion-section-title:focus {
 
115
        background: #f5f5f5;
 
116
}
 
117
 
 
118
#customize-theme-controls .control-section:hover > .accordion-section-title:after,
 
119
#customize-theme-controls .control-section .accordion-section-title:hover:after,
 
120
#customize-theme-controls .control-section.open .accordion-section-title:after,
 
121
#customize-theme-controls .control-section .accordion-section-title:focus:after {
 
122
        color: #555;
 
123
}
 
124
 
 
125
#customize-info.open,
 
126
#customize-theme-controls .control-section.open {
 
127
        border-bottom: 1px solid #eeeeee;
 
128
}
 
129
 
 
130
#customize-theme-controls .control-section.open .accordion-section-title {
 
131
        border-bottom-color: #eeeeee !important;
 
132
}
 
133
 
 
134
#customize-theme-controls .control-section:last-of-type.open,
 
135
#customize-theme-controls .control-section:last-of-type > .accordion-section-title {
 
136
        border-bottom-color: #ddd;
 
137
}
 
138
 
 
139
#customize-theme-controls > ul,
 
140
#customize-theme-controls .accordion-section-content {
 
141
        margin: 0;
 
142
}
 
143
 
 
144
.control-section.control-panel > .accordion-section-title {
 
145
        padding-right: 54px;
 
146
}
 
147
 
 
148
.control-section.control-panel > .accordion-section-title:after {
 
149
        content: "\f345";
 
150
        background: #f5f5f5;
 
151
        color: #555;
 
152
        width: 38px;
 
153
        height: 100%;
 
154
        margin: -11px -10px -11px 0; /* compensate for positioning */
 
155
        line-height: 45px;
 
156
        padding-left: 5px;
 
157
        border-left: 1px solid #eee;
 
158
        z-index: 0;
 
159
}
 
160
 
 
161
.rtl .control-section.control-panel > .accordion-section-title:after {
 
162
        content: "\f341";
 
163
}
 
164
 
 
165
#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after,
 
166
#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after {
 
167
        background: #ddd;
 
168
        color: #000;
 
169
        border: 1px solid #d9d9d9;
 
170
        border-right: none;
 
171
        margin-top: -12px;
 
172
        line-height: 44px;
 
173
        z-index: 1;
 
174
}
 
175
 
 
176
.accordion-sub-container.control-panel-content {
 
177
        display: none;
 
178
        position: absolute;
 
179
        left: 300px;
 
180
        top: 0;
 
181
        width: 300px;
 
182
        border-top: 1px solid #ddd;
 
183
        -webkit-transition: left ease-in-out .18s;
 
184
        transition: left ease-in-out .18s;
 
185
}
 
186
 
 
187
.accordion-sub-container.control-panel-content.animating {
 
188
        display: block;
 
189
}
 
190
 
 
191
.current-panel .accordion-sub-container.control-panel-content {
 
192
        width: 100%;
 
193
}
 
194
 
 
195
.customize-controls-close {
 
196
        display: block;
 
197
        position: absolute;
 
198
        top: 0;
 
199
        left: 0;
 
200
        width: 45px;
 
201
        height: 45px;
 
202
        padding-right: 2px;
 
203
        background: #eee;
 
204
        border-right: 1px solid #ddd;
 
205
        color: #444;
 
206
        cursor: pointer;
 
207
        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 
208
        transition: color .1s ease-in-out, background .1s ease-in-out;
 
209
}
 
210
 
 
211
.control-panel-back {
 
212
        display: block;
 
213
        position: fixed;
 
214
        top: 0;
 
215
        z-index: 99;
 
216
        left: -48px;
 
217
        width: 45px;
 
218
        height: 45px;
 
219
        padding-right: 2px;
 
220
        background: #eee;
 
221
        border-right: 1px solid #ddd;
 
222
        cursor: pointer;
 
223
        -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 
224
        transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 
225
}
 
226
 
 
227
.collapsed .control-panel-back {
 
228
        display: none;
 
229
}
 
230
 
 
231
.customize-controls-close:focus,
 
232
.customize-controls-close:hover,
 
233
.control-panel-back:focus,
 
234
.control-panel-back:hover {
 
235
        background: #ddd;
 
236
        border-color: #ccc;
 
237
        color: #000;
 
238
        outline: none;
 
239
        -webkit-box-shadow: none;
 
240
        box-shadow: none;
 
241
}
 
242
 
 
243
.customize-controls-close:before {
 
244
        font: normal 22px/1 dashicons;
 
245
        content: "\f335";
 
246
        position: relative;
 
247
        top: 7px;
 
248
        left: 13px;
 
249
}
 
250
 
 
251
.control-panel-back:before {
 
252
        font: normal 20px/1 dashicons;
 
253
        content: "\f341";
 
254
        position: relative;
 
255
        top: 7px;
 
256
        left: 13px;
 
257
}
 
258
 
 
259
.rtl .control-panel-back:before {
 
260
        content: "\f344";
 
261
}
 
262
 
 
263
.in-sub-panel .control-panel-back {
 
264
        left: 0;
 
265
}
 
266
 
 
267
.current-panel > .accordion-section-title {
 
268
        height: 22px;
 
269
}
 
270
 
 
271
.wp-full-overlay-sidebar .wp-full-overlay-header {
 
272
        -webkit-transition: padding ease-in-out .18s;
 
273
        transition: padding ease-in-out .18s;
 
274
}
 
275
 
 
276
.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
 
277
        padding-left: 62px;
 
278
}
 
279
 
 
280
#customize-info,
 
281
#customize-theme-controls > ul > .accordion-section {
 
282
        position: relative;
 
283
        left: 0;
 
284
        -webkit-transition: left ease-in-out .18s;
 
285
        transition: left ease-in-out .18s;
 
286
}
 
287
 
 
288
.in-sub-panel #customize-info,
 
289
.in-sub-panel #customize-theme-controls > ul > .accordion-section {
 
290
        left: -300px;
 
291
        width: 300px;
 
292
}
 
293
 
 
294
.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
 
295
        width: 100%;
 
296
}
 
297
 
 
298
#customize-theme-controls .control-section.current-panel {
 
299
        padding: 0;
 
300
}
 
301
 
 
302
#customize-theme-controls .control-section > h3.accordion-section-title {
 
303
        position: relative;
 
304
        left: 0;
 
305
}
 
306
 
 
307
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
 
308
        left: -300px;
 
309
        -webkit-transition: left ease-in-out .18s;
 
310
        transition: left ease-in-out .18s;
 
311
}
 
312
 
 
313
.control-section.control-panel .accordion-section-title .panel-title {
 
314
        font-size: 20px;
 
315
        font-weight: 200;
 
316
        line-height: 24px;
 
317
        display: block;
 
318
        border: none;
 
319
}
 
320
 
 
321
.control-section.control-panel .preview-notice {
 
322
        font-size: 13px;
 
323
        line-height: 24px;
 
324
}
 
325
 
 
326
p.customize-section-description {
 
327
        font-style: normal;
 
328
}
 
329
 
 
330
.customize-control {
 
331
        width: 100%;
 
332
        float: left;
 
333
        clear: both;
 
334
        margin-bottom: 8px;
 
335
}
 
336
 
 
337
.customize-control select,
 
338
.customize-control input[type="radio"],
 
339
.customize-control input[type="checkbox"] {
 
340
        line-height: 28px;
 
341
}
 
342
 
 
343
.customize-control input[type="text"],
 
344
.customize-control input[type="password"],
 
345
.customize-control input[type="email"],
 
346
.customize-control input[type="number"],
 
347
.customize-control input[type="search"],
 
348
.customize-control input[type="tel"],
 
349
.customize-control input[type="url"] {
 
350
        width: 98%;
 
351
        line-height: 18px;
 
352
        margin: 0;
 
353
}
 
354
 
 
355
.customize-control-textarea textarea {
 
356
        width: 100%;
 
357
        resize: vertical;
 
358
}
 
359
 
 
360
.customize-control select {
 
361
        min-width: 50%;
 
362
        max-width: 100%;
 
363
        height: 28px;
 
364
        line-height: 28px;
 
365
}
 
366
 
 
367
.customize-control select[multiple] {
 
368
        height: auto;
 
369
}
 
370
 
 
371
.customize-control-title {
 
372
        display: block;
 
373
        font-size: 14px;
 
374
        line-height: 24px;
 
375
        font-weight: 600;
 
376
        margin-bottom: 5px;
 
377
}
 
378
 
 
379
.customize-control-description {
 
380
        display: block;
 
381
        font-style: italic;
 
382
        line-height: 18px;
 
383
        margin-bottom: 5px;
 
384
}
 
385
 
 
386
.customize-control-color .color-picker,
 
387
.customize-control-checkbox label,
 
388
.customize-control-upload div {
 
389
        line-height: 28px;
 
390
}
 
391
 
 
392
.customize-control-checkbox input {
 
393
        margin-right: 5px;
 
394
}
 
395
 
 
396
.customize-control-radio {
 
397
        padding: 5px 0 10px;
 
398
}
 
399
 
 
400
.customize-control-radio .customize-control-title {
 
401
        margin-bottom: 0;
 
402
        line-height: 22px;
 
403
}
 
404
 
 
405
.customize-control-radio .customize-control-title + .customize-control-description {
 
406
        margin-top: 7px;
 
407
}
 
408
 
 
409
.customize-control-radio label {
 
410
        line-height: 32px;
 
411
}
 
412
 
 
413
.customize-control-radio input {
 
414
        margin-right: 5px;
 
415
}
 
416
 
 
417
#customize-preview iframe {
 
418
        width: 100%;
 
419
        height: 100%;
 
420
}
 
421
 
 
422
.wp-full-overlay-sidebar {
 
423
        background: #eeeeee;
 
424
        border-right: 1px solid #ddd;
 
425
}
 
426
 
 
427
.collapse-sidebar {
 
428
        background-color: transparent !important;
 
429
        border: none !important;
 
430
        -webkit-box-shadow: none !important;
 
431
        box-shadow: none !important;
 
432
        -webkit-border-radius: 0 !important;
 
433
        border-radius: 0 !important;
 
434
}
 
435
 
 
436
 
 
437
.collapse-sidebar:active,
 
438
.collapse-sidebar:active .collapse-sidebar-label,
 
439
.collapse-sidebar:active .collapse-sidebar-arrow:before {
 
440
        text-shadow: none;
 
441
}
 
442
 
 
443
.collapsed .collapse-sidebar-arrow:before {
 
444
        color: #888;
 
445
}
 
446
 
 
447
/* Style for custom settings */
 
448
 
 
449
/*
 
450
 * Dropdowns
 
451
 */
 
452
.accordion-section .dropdown {
 
453
        float: left;
 
454
        display: block;
 
455
        position: relative;
 
456
        cursor: pointer;
 
457
}
 
458
 
 
459
.accordion-section .dropdown-content {
 
460
        overflow: hidden;
 
461
        float: left;
 
462
        min-width: 30px;
 
463
        height: 16px;
 
464
        line-height: 16px;
 
465
        margin-right: 16px;
 
466
        padding: 4px 5px;
 
467
        border: 2px solid #eeeeee;
 
468
        -webkit-user-select: none;
 
469
        -moz-user-select: none;
 
470
        -ms-user-select: none;
 
471
        user-select: none;
 
472
}
 
473
 
 
474
.customize-control .dropdown-arrow {
 
475
        position: absolute;
 
476
        top: 0;
 
477
        bottom: 0;
 
478
        right: 0;
 
479
        width: 20px;
 
480
        background: #eeeeee;
 
481
}
 
482
 
 
483
.customize-control .dropdown-arrow:after {
 
484
        content: "\f140";
 
485
        font: normal 20px/1 'dashicons';
 
486
        speak: none;
 
487
        display: block;
 
488
        padding: 0;
 
489
        text-indent: 0;
 
490
        text-align: center;
 
491
        position: relative;
 
492
        -webkit-font-smoothing: antialiased;
 
493
        -moz-osx-font-smoothing: grayscale;
 
494
        text-decoration: none !important;
 
495
        color: #333;
 
496
}
 
497
 
 
498
.customize-control .dropdown-status {
 
499
        color: #333;
 
500
        background: #eeeeee;
 
501
        display: none;
 
502
        max-width: 112px;
 
503
}
 
504
 
 
505
/* Color Picker */
 
506
.customize-control-color .color-picker-hex {
 
507
        display: none;
 
508
}
 
509
 
 
510
.customize-control-color.open .color-picker-hex {
 
511
        display: block;
 
512
}
 
513
 
 
514
.customize-control-color .dropdown {
 
515
        margin-right: 5px;
 
516
        margin-bottom: 5px;
 
517
}
 
518
 
 
519
.customize-control-color .dropdown .dropdown-content {
 
520
        background-color: #555555;
 
521
        border: 1px solid rgba(0, 0, 0, 0.15);
 
522
}
 
523
 
 
524
.customize-control-color .dropdown:hover .dropdown-content {
 
525
        border-color: rgba(0, 0, 0, 0.25);
 
526
}
 
527
 
 
528
/*
 
529
 * Image Picker
 
530
 */
 
531
.customize-control-image .library,
 
532
.customize-control-image .actions {
 
533
        display: none;
 
534
        float: left;
 
535
        width: 100%;
 
536
}
 
537
 
 
538
.customize-control-image.open .library,
 
539
.customize-control-image.open .actions {
 
540
        display: block;
 
541
}
 
542
 
 
543
.accordion-section .customize-control-image .dropdown-content {
 
544
        height: auto;
 
545
        min-height: 24px;
 
546
        min-width: 40px;
 
547
        padding: 0;
 
548
}
 
549
 
 
550
.accordion-section .customize-control-image .dropdown-status {
 
551
        padding: 4px 5px;
 
552
}
 
553
 
 
554
.accordion-section .customize-control-image .preview-thumbnail img {
 
555
        display: block;
 
556
        width: 100%;
 
557
        max-width: 122px;
 
558
        max-height: 98px;
 
559
        margin: 0 auto;
 
560
}
 
561
 
 
562
.accordion-section .customize-control-image .actions {
 
563
        text-align: right;
 
564
}
 
565
 
 
566
.accordion-section .customize-control-image .library ul {
 
567
        border-bottom: 1px solid #ddd;
 
568
        float: left;
 
569
        width: 100%;
 
570
        margin: 10px 0 0;
 
571
}
 
572
 
 
573
.accordion-section .customize-control-image .library li {
 
574
        color: #ccc;
 
575
        float: left;
 
576
        padding: 3px 15px;
 
577
        margin: 0;
 
578
        border: 1px solid transparent;
 
579
}
 
580
 
 
581
.accordion-section .customize-control-image .library li.library-selected {
 
582
        margin-bottom: -1px;
 
583
        padding-bottom: 4px;
 
584
        color: #666666;
 
585
        border-color: #ddd;
 
586
        border-bottom-color: #fff;
 
587
}
 
588
 
 
589
.accordion-section .customize-control-image .library .thumbnail {
 
590
        display: block;
 
591
        width: 100%;
 
592
}
 
593
 
 
594
.accordion-section .customize-control-image .library .thumbnail img {
 
595
        display: block;
 
596
        max-width: 90%;
 
597
        max-height: 80px;
 
598
        margin: 5px auto;
 
599
        padding: 2px;
 
600
        background: #666666;
 
601
}
 
602
 
 
603
.accordion-section .customize-control-image .library .thumbnail:hover img {
 
604
        background-color: #2ea2cc;
 
605
}
 
606
 
 
607
.accordion-section .customize-control-image .library-content {
 
608
        display: none;
 
609
        width: 100%;
 
610
        float: left;
 
611
        padding: 10px 0;
 
612
}
 
613
 
 
614
.accordion-section .customize-control-image .library-content.library-selected {
 
615
        display: block;
 
616
}
 
617
 
 
618
.accordion-section .customize-control-upload .upload-fallback,
 
619
.accordion-section .customize-control-image .upload-fallback {
 
620
        display: none;
 
621
}
 
622
 
 
623
.accordion-section .customize-control-upload .upload-dropzone,
 
624
.accordion-section .customize-control-image .upload-dropzone {
 
625
        display: none;
 
626
        padding: 15px 10px;
 
627
        border: 3px dashed #dfdfdf;
 
628
        margin: 5px auto;
 
629
        text-align: center;
 
630
        position: relative;
 
631
        cursor: default;
 
632
}
 
633
 
 
634
.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop,
 
635
.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop {
 
636
        display: block;
 
637
        -webkit-transition: border-color 0.1s;
 
638
        transition: border-color 0.1s;
 
639
}
 
640
 
 
641
.accordion-section .customize-control-upload .library ul li,
 
642
.accordion-section .customize-control-image .library ul li {
 
643
        cursor: pointer;
 
644
}
 
645
 
 
646
.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
 
647
.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
 
648
        border-color: #83b4d8;
 
649
}
 
650
 
 
651
/**
 
652
 * iOS can't scroll iframes,
 
653
 * instead it expands the iframe size to match the size of the content
 
654
 */
 
655
.ios .wp-full-overlay {
 
656
        position: relative;
 
657
}
 
658
 
 
659
.ios #customize-preview {
 
660
        position: relative;
 
661
}
 
662
 
 
663
.ios #customize-controls .wp-full-overlay-sidebar-content {
 
664
        -webkit-overflow-scrolling: touch;
 
665
}
 
666
 
 
667
/** Header control **/
 
668
 
 
669
#customize-control-header_image .current {
 
670
        margin-bottom: 8px;
 
671
}
 
672
 
 
673
#customize-control-header_image .uploaded {
 
674
        margin-bottom: 18px;
 
675
}
 
676
 
 
677
#customize-control-header_image .uploaded button:not(.random),
 
678
#customize-control-header_image .default button:not(.random) {
 
679
        width: 100%;
 
680
        padding: 0;
 
681
        margin: 0;
 
682
        background: none;
 
683
        border: none;
 
684
        color: inherit;
 
685
        cursor: pointer;
 
686
}
 
687
 
 
688
#customize-control-header_image button img {
 
689
        display: block;
 
690
}
 
691
 
 
692
#customize-control-header_image button.new,
 
693
#customize-control-header_image button.remove {
 
694
        white-space: normal;
 
695
        width: 48%;
 
696
        height: auto;
 
697
}
 
698
 
 
699
 
 
700
/* Header control: current image container */
 
701
 
 
702
#customize-control-header_image .current .container {
 
703
        overflow: hidden;
 
704
        -webkit-border-radius: 2px;
 
705
        border: 1px solid #eee;
 
706
        -webkit-border-radius: 2px;
 
707
        border-radius: 2px;
 
708
}
 
709
 
 
710
#customize-control-header_image .placeholder {
 
711
        width: 100%;
 
712
        position: relative;
 
713
        text-align: center;
 
714
        cursor: default;
 
715
}
 
716
 
 
717
#customize-control-header_image .inner {
 
718
        display: none;
 
719
        position: absolute;
 
720
        width: 100%;
 
721
        color: #555;
 
722
        white-space: nowrap;
 
723
        text-overflow: ellipsis;
 
724
        overflow: hidden;
 
725
}
 
726
 
 
727
#customize-control-header_image .inner,
 
728
#customize-control-header_image .inner .dashicons {
 
729
        line-height: 20px;
 
730
        top: 10px;
 
731
}
 
732
#customize-control-header_image .list .inner,
 
733
#customize-control-header_image .list .inner .dashicons {
 
734
        top: 9px;
 
735
}
 
736
 
 
737
#customize-control-header_image .header-view {
 
738
        position: relative;
 
739
        width: 100%;
 
740
        margin-bottom: 5px;
 
741
}
 
742
 
 
743
#customize-control-header_image .header-view:last-child {
 
744
        margin-bottom: 0px;
 
745
}
 
746
 
 
747
/* Convoluted, but 'outline' support isn't good enough yet */
 
748
#customize-control-header_image .header-view:after {
 
749
        border: 0;
 
750
}
 
751
#customize-control-header_image .header-view.selected:after {
 
752
        content: '';
 
753
        position: absolute;
 
754
        height: auto;
 
755
        top: 0; left: 0; bottom: 0; right: 0;
 
756
        border: 4px solid #2ea2cc;
 
757
        -webkit-border-radius: 2px;
 
758
        border-radius: 2px;
 
759
}
 
760
#customize-control-header_image .header-view.button.selected {
 
761
        border: 0;
 
762
}
 
763
 
 
764
/* Header control: overlay "close" button */
 
765
 
 
766
#customize-control-header_image .uploaded .header-view .close {
 
767
        font-size: 2em;
 
768
        color: grey;
 
769
        position: absolute;
 
770
        visibility: hidden;
 
771
        top: 10px;
 
772
        right: 10px;
 
773
        z-index: 1;
 
774
        width: 20px;
 
775
        height: 20px;
 
776
        cursor: pointer;
 
777
}
 
778
 
 
779
#customize-control-header_image .uploaded .header-view .close:hover {
 
780
 color: black;
 
781
 text-shadow:
 
782
    -1px -1px 0 #fff,
 
783
    1px -1px 0 #fff,
 
784
    -1px 1px 0 #fff,
 
785
    1px 1px 0 #fff;
 
786
}
 
787
 
 
788
#customize-control-header_image .header-view:hover .close {
 
789
        visibility: visible;
 
790
}
 
791
 
 
792
/* Header control: randomiz(s)er */
 
793
 
 
794
#customize-control-header_image .random.placeholder {
 
795
        cursor: pointer;
 
796
        -webkit-border-radius: 2px;
 
797
        border-radius: 2px;
 
798
        height: 40px;
 
799
}
 
800
 
 
801
#customize-control-header_image button.random {
 
802
        width: 100%;
 
803
        height: auto;
 
804
        min-height: 40px;
 
805
        white-space: normal;
 
806
}
 
807
 
 
808
#customize-control-header_image button.random .dice {
 
809
        margin-top: 4px;
 
810
}
 
811
 
 
812
#customize-control-header_image .placeholder:hover .dice,
 
813
#customize-control-header_image .header-view:hover > button.random .dice {
 
814
        -webkit-animation: dice-color-change 3s infinite;
 
815
        -ms-animation: dice-color-change 3s infinite;
 
816
        animation: dice-color-change 3s infinite;
 
817
}
 
818
 
 
819
@-webkit-keyframes dice-color-change {
 
820
        0% { color: #d4b146; }
 
821
        50% { color: #ef54b0; }
 
822
        75% { color: #7190d3; }
 
823
        100% { color: #d4b146; }
 
824
}
 
825
 
 
826
@-ms-keyframes dice-color-change {
 
827
        0% { color: #d4b146; }
 
828
        50% { color: #ef54b0; }
 
829
        75% { color: #7190d3; }
 
830
        100% { color: #d4b146; }
 
831
}
 
832
 
 
833
@keyframes dice-color-change {
 
834
        0% { color: #d4b146; }
 
835
        50% { color: #ef54b0; }
 
836
        75% { color: #7190d3; }
 
837
        100% { color: #d4b146; }
 
838
}
 
839
 
 
840
/* Header control: actions and choices */
 
841
 
 
842
#customize-control-header_image .actions {
 
843
        margin-bottom: 32px;
 
844
}
 
845
 
 
846
#customize-control-header_image .choice {
 
847
        position: relative;
 
848
        display: block;
 
849
        margin-bottom: 9px;
 
850
}
 
851
 
 
852
#customize-control-header_image .uploaded div:last-child > .choice {
 
853
        margin-bottom: 0;
 
854
}
 
855
 
 
856
#customize-control-header_image img {
 
857
        width: 100%;
 
858
        -webkit-border-radius: 2px;
 
859
        border-radius: 2px;
 
860
}
 
861
 
 
862
#customize-control-header_image .remove {
 
863
        float: left;
 
864
        margin-right: 3px;
 
865
}
 
866
 
 
867
#customize-control-header_image .new {
 
868
        float: right;
 
869
}
 
870
 
 
871
 
 
872
/** Handle cheaters. */
 
873
body.cheatin {
 
874
        font-size: medium;
 
875
        height: auto;
 
876
        background: #fff;
 
877
        margin: 50px auto 2em;
 
878
        padding: 1em 2em;
 
879
        max-width: 700px;
 
880
        min-width: 0;
 
881
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
 
882
        box-shadow: 0 1px 3px rgba(0,0,0,0.13);
 
883
}
 
884
 
 
885
body.cheatin p {
 
886
        font-size: 14px;
 
887
        line-height: 1.5;
 
888
        margin: 25px 0 20px;
 
889
}