← Back to branch summary

~canonical-sysadmins/wordpress/4.5.2

« back to all changes in this revision

Viewing changes to wp-includes/css/media-views.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-includes/css/media-views.css
 
1
/**
 
2
 * Base Styles
 
3
 */
 
4
.media-modal * {
 
5
        -webkit-box-sizing: content-box;
 
6
        -moz-box-sizing: content-box;
 
7
        box-sizing: content-box;
 
8
}
 
9
 
 
10
.media-frame input,
 
11
.media-frame select,
 
12
.media-frame textarea {
 
13
    -webkit-box-sizing: border-box;
 
14
    -moz-box-sizing: border-box;
 
15
    box-sizing: border-box;
 
16
}
 
17
 
 
18
.media-modal,
 
19
.media-frame {
 
20
        font-family: "Open Sans", sans-serif;
 
21
        font-size: 12px;
 
22
}
 
23
 
 
24
.media-frame input,
 
25
.media-frame textarea {
 
26
        padding: 6px 8px;
 
27
}
 
28
 
 
29
.media-frame select,
 
30
.wp-admin .media-frame select {
 
31
        line-height: 28px;
 
32
        margin-top: 3px;
 
33
}
 
34
 
 
35
.media-frame a {
 
36
        border-bottom: none;
 
37
        color: #21759b;
 
38
}
 
39
 
 
40
.media-frame a:hover {
 
41
        color: #d54e21;
 
42
}
 
43
 
 
44
.media-frame a.button {
 
45
        color: #333;
 
46
}
 
47
 
 
48
.media-frame a.button:hover {
 
49
        color: #222;
 
50
}
 
51
 
 
52
.media-frame a.button-primary,
 
53
.media-frame a.button-primary:hover {
 
54
        color: #fff;
 
55
}
 
56
 
 
57
.media-frame input[type="text"],
 
58
.media-frame input[type="password"],
 
59
.media-frame input[type="number"],
 
60
.media-frame input[type="search"],
 
61
.media-frame input[type="email"],
 
62
.media-frame input[type="url"],
 
63
.media-frame textarea,
 
64
.media-frame select {
 
65
        font-family: "Open Sans", sans-serif;
 
66
        font-size: 12px;
 
67
        border-width: 1px;
 
68
        border-style: solid;
 
69
        border-color: #dfdfdf;
 
70
}
 
71
 
 
72
.media-frame input[type="text"]:focus,
 
73
.media-frame input[type="password"]:focus,
 
74
.media-frame input[type="number"]:focus,
 
75
.media-frame input[type="search"]:focus,
 
76
.media-frame input[type="email"]:focus,
 
77
.media-frame input[type="url"]:focus,
 
78
.media-frame textarea:focus,
 
79
.media-frame select:focus {
 
80
        border-color: #5b9dd9;
 
81
}
 
82
 
 
83
.media-frame select {
 
84
        height: 24px;
 
85
        padding: 2px;
 
86
}
 
87
 
 
88
.media-frame input:disabled,
 
89
.media-frame textarea:disabled,
 
90
.media-frame input[readonly],
 
91
.media-frame textarea[readonly] {
 
92
        background-color: #eee;
 
93
}
 
94
 
 
95
.media-frame input[type="search"] {
 
96
        -webkit-appearance: textfield;
 
97
}
 
98
 
 
99
.media-frame :-moz-placeholder {
 
100
   color: #a9a9a9;
 
101
}
 
102
 
 
103
.media-frame .hidden {
 
104
        display: none;
 
105
}
 
106
 
 
107
/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
 
108
.ui-sortable,
 
109
.ui-draggable {
 
110
        -ms-touch-action: none;
 
111
        touch-action: none;
 
112
}
 
113
 
 
114
.meta-box-sortables.ui-sortable {
 
115
        -ms-touch-action: auto;
 
116
        touch-action: auto;
 
117
}
 
118
 
 
119
.meta-box-sortables.ui-sortable .hndle {
 
120
        -ms-touch-action: none;
 
121
        touch-action: none;
 
122
}
 
123
 
 
124
/**
 
125
 * Modal
 
126
 */
 
127
.media-modal {
 
128
        position: fixed;
 
129
        top: 30px;
 
130
        left: 30px;
 
131
        right: 30px;
 
132
        bottom: 30px;
 
133
        z-index: 160000;
 
134
}
 
135
 
 
136
.wp-customizer .media-modal {
 
137
        z-index: 560000;
 
138
}
 
139
 
 
140
.media-modal-backdrop {
 
141
        position: fixed;
 
142
        top: 0;
 
143
        left: 0;
 
144
        right: 0;
 
145
        bottom: 0;
 
146
        min-height: 360px;
 
147
        background: #000;
 
148
        opacity: 0.7;
 
149
        z-index: 159900;
 
150
}
 
151
 
 
152
.wp-customizer .media-modal-backdrop {
 
153
        z-index: 559900;
 
154
}
 
155
 
 
156
.media-modal-close {
 
157
        position: absolute;
 
158
        text-decoration: none;
 
159
        top: 10px;
 
160
        right: 10px;
 
161
        width: 30px;
 
162
        height: 30px;
 
163
        z-index: 1000;
 
164
        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 
165
        transition: color .1s ease-in-out, background .1s ease-in-out;
 
166
}
 
167
 
 
168
.media-modal-close:active {
 
169
        -webkit-box-shadow: none;
 
170
        box-shadow: none;
 
171
}
 
172
 
 
173
.media-modal-close span.media-modal-icon {
 
174
        display: block;
 
175
        margin-top: 5px;
 
176
        width: 30px;
 
177
        height: 15px;
 
178
        background-image: none;
 
179
        text-align: center;
 
180
}
 
181
 
 
182
.media-modal-close .media-modal-icon:before {
 
183
        content: '\f158';
 
184
        font: normal 20px/1 'dashicons';
 
185
        speak: none;
 
186
        vertical-align: middle;
 
187
        -webkit-font-smoothing: antialiased;
 
188
        -moz-osx-font-smoothing: grayscale;
 
189
        color: #666;
 
190
}
 
191
 
 
192
.media-modal-close:hover .media-modal-icon:before {
 
193
        color: #2ea2cc;
 
194
}
 
195
 
 
196
.media-modal-close:active {
 
197
        outline: 0;
 
198
}
 
199
 
 
200
.media-modal-content {
 
201
        position: absolute;
 
202
        top: 0;
 
203
        left: 0;
 
204
        right: 0;
 
205
        bottom: 0;
 
206
        overflow: auto;
 
207
        min-height: 300px;
 
208
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
 
209
        box-shadow: 0 5px 15px rgba(0,0,0,0.7);
 
210
        background: #fcfcfc;
 
211
        -webkit-font-smoothing: subpixel-antialiased;
 
212
}
 
213
 
 
214
.media-modal-icon {
 
215
        background-image: url(../images/uploader-icons.png);
 
216
        background-repeat: no-repeat;
 
217
}
 
218
 
 
219
/**
 
220
 * Toolbar
 
221
 */
 
222
.media-toolbar {
 
223
        position: absolute;
 
224
        top: 0;
 
225
        left: 0;
 
226
        right: 0;
 
227
        z-index: 100;
 
228
        height: 60px;
 
229
        padding: 0 16px;
 
230
        border: 0 solid #dfdfdf;
 
231
        overflow: hidden;
 
232
}
 
233
 
 
234
.media-toolbar-primary {
 
235
        float: right;
 
236
        height: 100%;
 
237
}
 
238
 
 
239
.media-toolbar-secondary {
 
240
        float: left;
 
241
        height: 100%;
 
242
}
 
243
 
 
244
.media-toolbar-primary > .media-button,
 
245
.media-toolbar-primary > .media-button-group {
 
246
        margin-left: 10px;
 
247
        float: left;
 
248
        margin-top: 15px;
 
249
}
 
250
 
 
251
.media-toolbar-secondary > .media-button,
 
252
.media-toolbar-secondary > .media-button-group {
 
253
        margin-right: 10px;
 
254
        margin-top: 15px;
 
255
}
 
256
 
 
257
/**
 
258
 * Sidebar
 
259
 */
 
260
.media-sidebar {
 
261
        position: absolute;
 
262
        top: 0;
 
263
        right: 0;
 
264
        bottom: 0;
 
265
        width: 267px;
 
266
        padding: 0 16px 24px;
 
267
        z-index: 75;
 
268
        background: #f3f3f3;
 
269
        border-left: 1px solid #ddd;
 
270
        overflow: auto;
 
271
        -webkit-overflow-scrolling: touch;
 
272
}
 
273
 
 
274
.hide-toolbar .media-sidebar {
 
275
        bottom: 0;
 
276
}
 
277
 
 
278
.media-sidebar .sidebar-title {
 
279
        font-size: 20px;
 
280
        margin: 0;
 
281
        padding: 12px 10px 10px;
 
282
        line-height: 28px;
 
283
}
 
284
 
 
285
.media-sidebar .sidebar-content {
 
286
        padding: 0 10px;
 
287
        margin-bottom: 130px;
 
288
}
 
289
 
 
290
.media-sidebar .search {
 
291
        display: block;
 
292
        width: 100%;
 
293
}
 
294
 
 
295
.media-sidebar h3,
 
296
.image-details h3 {
 
297
        position: relative;
 
298
        font-weight: bold;
 
299
        text-transform: uppercase;
 
300
        font-size: 12px;
 
301
        color: #666;
 
302
        margin: 24px 0 8px;
 
303
}
 
304
 
 
305
.media-sidebar .setting,
 
306
.attachment-details .setting {
 
307
        display: block;
 
308
        float: left;
 
309
        width: 100%;
 
310
        margin: 1px 0;
 
311
}
 
312
 
 
313
.media-sidebar .setting label,
 
314
.attachment-details .setting label {
 
315
        display: block;
 
316
}
 
317
 
 
318
.media-sidebar .setting .link-to-custom,
 
319
.attachment-details .setting .link-to-custom {
 
320
        margin: 3px 2px 0;
 
321
}
 
322
 
 
323
.media-sidebar .setting span,
 
324
.attachment-details .setting span {
 
325
        min-width: 30%;
 
326
        margin-right: 4%;
 
327
        font-size: 12px;
 
328
        text-align: right;
 
329
}
 
330
 
 
331
.media-sidebar .setting select,
 
332
.attachment-details .setting select {
 
333
        max-width: 65%;
 
334
}
 
335
 
 
336
.media-sidebar .setting input[type="checkbox"],
 
337
.media-sidebar .field input[type="checkbox"],
 
338
.media-sidebar .setting input[type="radio"],
 
339
.media-sidebar .field input[type="radio"],
 
340
.attachment-details .setting input[type="checkbox"],
 
341
.attachment-details .field input[type="checkbox"],
 
342
.attachment-details .setting input[type="radio"],
 
343
.attachment-details .field input[type="radio"] {
 
344
        float: none;
 
345
        margin: 8px 3px 0;
 
346
        padding: 0;
 
347
}
 
348
 
 
349
.media-sidebar .setting span,
 
350
.attachment-details .setting span,
 
351
.compat-item label span {
 
352
        float: left;
 
353
        min-height: 22px;
 
354
        padding-top: 8px;
 
355
        line-height: 16px;
 
356
        font-weight: normal;
 
357
        color: #666;
 
358
}
 
359
 
 
360
.compat-item label span  {
 
361
        text-align: right;
 
362
}
 
363
 
 
364
.media-sidebar .setting input[type="text"],
 
365
.media-sidebar .setting input[type="password"],
 
366
.media-sidebar .setting input[type="email"],
 
367
.media-sidebar .setting input[type="number"],
 
368
.media-sidebar .setting input[type="search"],
 
369
.media-sidebar .setting input[type="tel"],
 
370
.media-sidebar .setting input[type="url"],
 
371
.media-sidebar .setting textarea,
 
372
.media-sidebar .setting .value,
 
373
.attachment-details .setting input[type="text"],
 
374
.attachment-details .setting input[type="password"],
 
375
.attachment-details .setting input[type="email"],
 
376
.attachment-details .setting input[type="number"],
 
377
.attachment-details .setting input[type="search"],
 
378
.attachment-details .setting input[type="tel"],
 
379
.attachment-details .setting input[type="url"],
 
380
.attachment-details .setting textarea,
 
381
.attachment-details .setting .value {
 
382
        -webkit-box-sizing: border-box;
 
383
        -moz-box-sizing: border-box;
 
384
        box-sizing: border-box;
 
385
        margin: 1px;
 
386
        width: 65%;
 
387
        float: right;
 
388
}
 
389
 
 
390
.media-sidebar .setting .value,
 
391
.attachment-details .setting .value {
 
392
        margin: 0 1px;
 
393
        text-align: left;
 
394
}
 
395
 
 
396
.media-sidebar .setting textarea,
 
397
.attachment-details .setting textarea,
 
398
.compat-item .field textarea {
 
399
        height: 62px;
 
400
        resize: vertical;
 
401
}
 
402
 
 
403
.media-sidebar select,
 
404
.attachment-details select {
 
405
        margin-top: 3px;
 
406
}
 
407
 
 
408
.compat-item {
 
409
        float: left;
 
410
        width: 100%;
 
411
        overflow: hidden;
 
412
}
 
413
 
 
414
.compat-item table {
 
415
        width: 100%;
 
416
        table-layout: fixed;
 
417
        border-spacing: 0;
 
418
        border: 0;
 
419
}
 
420
 
 
421
.compat-item tr {
 
422
        padding: 2px 0;
 
423
        display: block;
 
424
        overflow: hidden;
 
425
}
 
426
 
 
427
.compat-item .label,
 
428
.compat-item .field {
 
429
        display: block;
 
430
        margin: 0;
 
431
        padding: 0;
 
432
}
 
433
 
 
434
.compat-item .label {
 
435
        min-width: 30%;
 
436
        margin-right: 4%;
 
437
        float: left;
 
438
        text-align: right;
 
439
}
 
440
 
 
441
.compat-item .label span {
 
442
        display: block;
 
443
        width: 100%;
 
444
}
 
445
 
 
446
.compat-item .field {
 
447
        float: right;
 
448
        width: 66%;
 
449
}
 
450
 
 
451
.compat-item .field input[type="text"],
 
452
.compat-item .field input[type="password"],
 
453
.compat-item .field input[type="email"],
 
454
.compat-item .field input[type="number"],
 
455
.compat-item .field input[type="search"],
 
456
.compat-item .field input[type="tel"],
 
457
.compat-item .field input[type="url"] {
 
458
        width: 100%;
 
459
        margin: 0;
 
460
}
 
461
 
 
462
.sidebar-for-errors .attachment-details,
 
463
.sidebar-for-errors .compat-item,
 
464
.sidebar-for-errors .media-sidebar .media-progress-bar,
 
465
.sidebar-for-errors .upload-details {
 
466
        display: none !important;
 
467
}
 
468
 
 
469
/**
 
470
 * Menu
 
471
 */
 
472
.media-menu {
 
473
        position: absolute;
 
474
        top: 0;
 
475
        left: 0;
 
476
        right: 0;
 
477
        bottom: 0;
 
478
        margin: 0;
 
479
        padding: 10px 0;
 
480
        background: #f3f3f3;
 
481
        border-right-width: 1px;
 
482
        border-right-style: solid;
 
483
        border-right-color: #ccc;
 
484
        -webkit-user-select: none;
 
485
        -moz-user-select: none;
 
486
        -ms-user-select: none;
 
487
        user-select: none;
 
488
}
 
489
 
 
490
.media-menu > a {
 
491
        display: block;
 
492
        position: relative;
 
493
        padding: 8px 20px;
 
494
        margin: 0;
 
495
        line-height: 18px;
 
496
        font-size: 14px;
 
497
        color: #0074a2;
 
498
        text-decoration: none;
 
499
}
 
500
 
 
501
.media-menu > a:hover {
 
502
        color: #21759B;
 
503
        background: rgba( 0, 0, 0, 0.04 );
 
504
}
 
505
 
 
506
.media-menu > a:active {
 
507
        outline: none;
 
508
}
 
509
 
 
510
.media-menu .active,
 
511
.media-menu .active:hover {
 
512
        color: #222;
 
513
        font-weight: bold;
 
514
}
 
515
 
 
516
.media-menu .separator {
 
517
        height: 0;
 
518
        margin: 12px 20px;
 
519
        padding: 0;
 
520
        border-top: 1px solid #ddd;
 
521
}
 
522
 
 
523
/**
 
524
 * Menu
 
525
 */
 
526
.media-router {
 
527
        position: relative;
 
528
        padding: 0 6px;
 
529
        margin: 0;
 
530
        clear: both;
 
531
        -webkit-user-select: none;
 
532
        -moz-user-select: none;
 
533
        -ms-user-select: none;
 
534
        user-select: none;
 
535
}
 
536
 
 
537
.media-router a {
 
538
        -webkit-transition: none;
 
539
        transition: none;
 
540
}
 
541
 
 
542
.media-router > a {
 
543
        position: relative;
 
544
        float: left;
 
545
        padding: 8px 10px 9px;
 
546
        margin: 0;
 
547
        height: 18px;
 
548
        line-height: 18px;
 
549
        font-size: 14px;
 
550
        text-decoration: none;
 
551
}
 
552
 
 
553
.media-router > a:last-child {
 
554
        border-right: 0;
 
555
}
 
556
 
 
557
.media-router > a:active {
 
558
        outline: none;
 
559
}
 
560
 
 
561
.media-router .active,
 
562
.media-router .active:hover {
 
563
        color: #333;
 
564
}
 
565
 
 
566
.media-router .active,
 
567
.media-router > a.active:last-child {
 
568
        margin: -1px -1px 0;
 
569
        background: #fff;
 
570
        border: 1px solid #ddd;
 
571
        border-bottom: none;
 
572
}
 
573
 
 
574
.media-router .active:after {
 
575
        display: none;
 
576
}
 
577
 
 
578
/**
 
579
 * Frame
 
580
 */
 
581
.media-frame {
 
582
        overflow: hidden;
 
583
        position: absolute;
 
584
        top: 0;
 
585
        left: 0;
 
586
        right: 0;
 
587
        bottom: 0;
 
588
}
 
589
 
 
590
.media-frame-menu {
 
591
        position: absolute;
 
592
        top: 0;
 
593
        left: 0;
 
594
        bottom: 0;
 
595
        width: 200px;
 
596
        z-index: 150;
 
597
}
 
598
 
 
599
.media-frame-title {
 
600
        position: absolute;
 
601
        top: 0;
 
602
        left: 200px;
 
603
        right: 0;
 
604
        height: 50px;
 
605
        z-index: 200;
 
606
}
 
607
 
 
608
.media-frame-router {
 
609
        position: absolute;
 
610
        top: 50px;
 
611
        left: 200px;
 
612
        right: 0;
 
613
        height: 36px;
 
614
        z-index: 200;
 
615
}
 
616
 
 
617
.media-frame-content {
 
618
        position: absolute;
 
619
        top: 84px;
 
620
        left: 200px;
 
621
        right: 0;
 
622
        bottom: 61px;
 
623
        height: auto;
 
624
        width: auto;
 
625
        margin: 0;
 
626
        overflow: auto;
 
627
        background: #fff;
 
628
        border-top: 1px solid #ddd;
 
629
        border-bottom: 1px solid #ddd;
 
630
}
 
631
 
 
632
.media-frame-toolbar {
 
633
        position: absolute;
 
634
        left: 200px;
 
635
        right: 0;
 
636
        bottom: 0;
 
637
        height: 60px;
 
638
        z-index: 100;
 
639
}
 
640
 
 
641
.media-frame.hide-menu .media-frame-title,
 
642
.media-frame.hide-menu .media-frame-router,
 
643
.media-frame.hide-menu .media-frame-toolbar,
 
644
.media-frame.hide-menu .media-frame-content {
 
645
        left: 0;
 
646
}
 
647
 
 
648
.media-frame.hide-menu .media-frame-menu {
 
649
        left: -200px;
 
650
}
 
651
 
 
652
.media-frame.hide-toolbar .media-frame-content {
 
653
        bottom: 0;
 
654
}
 
655
 
 
656
.media-frame.hide-toolbar .media-frame-toolbar {
 
657
        bottom: -61px;
 
658
}
 
659
 
 
660
.media-frame.hide-router .media-frame-content {
 
661
        top: 50px;
 
662
}
 
663
 
 
664
.media-frame.hide-router .media-frame-router {
 
665
        display: none;
 
666
}
 
667
 
 
668
.media-frame.hide-router .media-frame-title {
 
669
        border-bottom: 1px solid #dfdfdf;
 
670
        -webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
 
671
        box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
 
672
}
 
673
 
 
674
.media-frame-title .dashicons {
 
675
        display: none;
 
676
}
 
677
 
 
678
.media-frame-title h1 {
 
679
        padding: 0 16px;
 
680
        font-size: 22px;
 
681
        line-height: 50px;
 
682
        margin: 0;
 
683
}
 
684
 
 
685
.media-frame-title .suggested-dimensions {
 
686
        font-size: 14px;
 
687
        float: right;
 
688
        margin-right: 20px;
 
689
}
 
690
 
 
691
.media-frame-content .crop-content {
 
692
        height: 100%;
 
693
}
 
694
 
 
695
.media-frame-content .crop-content .crop-image {
 
696
        display: block;
 
697
        margin: auto;
 
698
        max-width: 100%;
 
699
        max-height: 100%;
 
700
}
 
701
 
 
702
.media-frame-content .crop-content .upload-errors
 
703
{
 
704
        position: absolute;
 
705
        width: 300px;
 
706
        top: 50%;
 
707
        left: 50%;
 
708
        margin-left: -150px;
 
709
        margin-right: -150px;
 
710
        z-index: 600000;
 
711
}
 
712
 
 
713
/**
 
714
 * Iframes
 
715
 */
 
716
.media-frame .media-iframe {
 
717
        overflow: hidden;
 
718
}
 
719
 
 
720
.media-frame .media-iframe,
 
721
.media-frame .media-iframe iframe {
 
722
        height: 100%;
 
723
        width: 100%;
 
724
        border: 0;
 
725
}
 
726
 
 
727
/**
 
728
 * Attachment Browser Filters
 
729
 */
 
730
.media-frame select.attachment-filters {
 
731
        margin-top: 11px;
 
732
        margin-right: 10px;
 
733
}
 
734
 
 
735
/**
 
736
 * Search
 
737
 */
 
738
.media-frame .search {
 
739
        margin-top: 11px;
 
740
        padding: 4px;
 
741
        font-size: 13px;
 
742
        color: #464646;
 
743
        font-family: "Open Sans", sans-serif;
 
744
        -webkit-appearance: none;
 
745
}
 
746
 
 
747
.media-toolbar-secondary .search {
 
748
        margin-right: 16px;
 
749
}
 
750
 
 
751
/**
 
752
 * Attachments
 
753
 */
 
754
.attachments {
 
755
        margin: 0;
 
756
        -webkit-overflow-scrolling: touch;
 
757
}
 
758
 
 
759
/**
 
760
 * Attachment
 
761
 */
 
762
.attachment {
 
763
        position: relative;
 
764
        float: left;
 
765
        padding: 8px;
 
766
        margin: 0;
 
767
        color: #464646;
 
768
        cursor: pointer;
 
769
        list-style: none;
 
770
        text-align: center;
 
771
        -webkit-user-select: none;
 
772
        -moz-user-select: none;
 
773
        -ms-user-select: none;
 
774
        user-select: none;
 
775
        width: 25%;
 
776
        -webkit-box-sizing: border-box;
 
777
        -moz-box-sizing: border-box;
 
778
        box-sizing: border-box;
 
779
}
 
780
 
 
781
.attachment:focus,
 
782
.selected.attachment:focus,
 
783
.attachment.details:focus {
 
784
        -webkit-box-shadow:
 
785
                inset 0 0 2px 3px #fff,
 
786
                inset 0 0 0 7px #5b9dd9;
 
787
        box-shadow:
 
788
                inset 0 0 2px 3px #fff,
 
789
                inset 0 0 0 7px #5b9dd9;
 
790
        outline: none;
 
791
}
 
792
 
 
793
.selected.attachment {
 
794
        -webkit-box-shadow:
 
795
                inset 0 0 0 5px #fff,
 
796
                inset 0 0 0 7px #ccc;
 
797
        box-shadow:
 
798
                inset 0 0 0 5px #fff,
 
799
                inset 0 0 0 7px #ccc;
 
800
}
 
801
 
 
802
.attachment.details {
 
803
        -webkit-box-shadow:
 
804
                inset 0 0 0 3px #fff,
 
805
                inset 0 0 0 7px #1e8cbe;
 
806
        box-shadow:
 
807
                inset 0 0 0 3px #fff,
 
808
                inset 0 0 0 7px #1e8cbe;
 
809
}
 
810
 
 
811
.attachment-preview {
 
812
        position: relative;
 
813
        -webkit-box-shadow:
 
814
                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
 
815
                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
 
816
        box-shadow:
 
817
                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
 
818
                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
 
819
        background: #eee;
 
820
        cursor: pointer;
 
821
}
 
822
 
 
823
.attachment-preview:before {
 
824
        content: '';
 
825
        display: block;
 
826
        padding-top: 100%;
 
827
}
 
828
 
 
829
.attachment .icon {
 
830
        margin: 0 auto;
 
831
        overflow: hidden;
 
832
}
 
833
 
 
834
.attachment .thumbnail {
 
835
        overflow: hidden;
 
836
        position: absolute;
 
837
        top: 0;
 
838
        right: 0;
 
839
        bottom: 0;
 
840
        left: 0;
 
841
        opacity: 1;
 
842
        -webkit-transition: opacity .1s;
 
843
        transition: opacity .1s;
 
844
}
 
845
 
 
846
.attachment .portrait img {
 
847
        max-width: 100%;
 
848
}
 
849
 
 
850
.attachment .landscape img {
 
851
        max-height: 100%;
 
852
}
 
853
 
 
854
.attachment .thumbnail:after {
 
855
        content: '';
 
856
        display: block;
 
857
        position: absolute;
 
858
        top: 0;
 
859
        left: 0;
 
860
        right: 0;
 
861
        bottom: 0;
 
862
        -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 
863
        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 
864
        overflow: hidden;
 
865
}
 
866
 
 
867
/* @noflip */
 
868
.attachment .thumbnail img {
 
869
        top: 0;
 
870
        left: 0;
 
871
}
 
872
 
 
873
/* @noflip */
 
874
.attachment .thumbnail .centered {
 
875
        position: absolute;
 
876
        top: 0;
 
877
        left: 0;
 
878
        width: 100%;
 
879
        height: 100%;
 
880
        -webkit-transform: translate( 50%, 50% );
 
881
        -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
 
882
        transform: translate( 50%, 50% );
 
883
}
 
884
 
 
885
.attachment .thumbnail .centered img {
 
886
        -webkit-transform: translate( -50%, -50% );
 
887
        -ms-transform: translate(-50%,-50%);
 
888
        transform: translate( -50%, -50% );
 
889
}
 
890
 
 
891
.attachment .thumbnail .centered img.icon {
 
892
        -webkit-transform: translate( -50%, -70% );
 
893
        -ms-transform: translate(-50%,-70%);
 
894
        transform: translate( -50%, -70% );
 
895
}
 
896
 
 
897
.ie8 .attachment img.icon {
 
898
        top: 20%;
 
899
        position: relative;
 
900
}
 
901
 
 
902
.attachment .filename {
 
903
        position: absolute;
 
904
        left: 0;
 
905
        right: 0;
 
906
        bottom: 0;
 
907
        overflow: hidden;
 
908
        max-height: 100%;
 
909
        word-wrap: break-word;
 
910
        text-align: center;
 
911
        font-weight: bold;
 
912
        background: rgba( 255, 255, 255, 0.8 );
 
913
        -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 
914
        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 
915
}
 
916
 
 
917
.attachment .filename div {
 
918
        padding: 5px 10px;
 
919
}
 
920
 
 
921
.attachment .thumbnail img {
 
922
        position: absolute;
 
923
}
 
924
 
 
925
.attachment .close {
 
926
        display: none;
 
927
        position: absolute;
 
928
        top: 5px;
 
929
        right: 5px;
 
930
        height: 22px;
 
931
        width: 22px;
 
932
        padding: 0;
 
933
        font-size: 20px;
 
934
        line-height: 20px;
 
935
        text-align: center;
 
936
        text-decoration: none;
 
937
        color: #464646;
 
938
        background-color: #fff;
 
939
        background-position: -96px 4px;
 
940
        border-width: 0;
 
941
        -webkit-border-radius: 3px;
 
942
        border-radius: 3px;
 
943
        -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
 
944
        box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
 
945
}
 
946
 
 
947
.attachment .close:hover {
 
948
        -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 
949
        box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 
950
}
 
951
 
 
952
.attachment:hover .close {
 
953
        display: block;
 
954
}
 
955
 
 
956
.attachment .check {
 
957
        display: none;
 
958
        height: 24px;
 
959
        width: 24px;
 
960
        position: absolute;
 
961
        z-index: 10;
 
962
        top: 0;
 
963
        right: 0;
 
964
        outline: none;
 
965
        background: #eee;
 
966
        -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
 
967
        box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
 
968
}
 
969
 
 
970
.attachment .check div {
 
971
        background-position: -1px 0;
 
972
        height: 15px;
 
973
        width: 15px;
 
974
        margin: 5px;
 
975
}
 
976
 
 
977
.attachment .check:hover div {
 
978
        background-position: -40px 0;
 
979
}
 
980
 
 
981
.attachment.selected .check {
 
982
        display: block;
 
983
}
 
984
 
 
985
.attachment.details .check,
 
986
.attachment.selected .check:focus,
 
987
.media-frame.mode-grid .attachment.selected .check {
 
988
        background-color: #1e8cbe;
 
989
        -webkit-box-shadow:
 
990
                0 0 0 1px #fff,
 
991
                0 0 0 2px #1e8cbe;
 
992
        box-shadow:
 
993
                0 0 0 1px #fff,
 
994
                0 0 0 2px #1e8cbe;
 
995
}
 
996
 
 
997
.attachment.details .check div,
 
998
.media-frame.mode-grid .attachment.selected .check div {
 
999
        background-position: -21px 0;
 
1000
}
 
1001
 
 
1002
.attachment.details .check:hover div,
 
1003
.attachment.selected .check:focus div,
 
1004
.media-frame.mode-grid .attachment.selected .check:hover div {
 
1005
        background-position: -60px 0;
 
1006
}
 
1007
 
 
1008
.media-frame .attachment .describe {
 
1009
        position: relative;
 
1010
        display: block;
 
1011
        width: 100%;
 
1012
        margin: 0;
 
1013
        padding: 8px;
 
1014
        font-size: 12px;
 
1015
        -webkit-border-radius: 0;
 
1016
        border-radius: 0;
 
1017
}
 
1018
 
 
1019
/**
 
1020
 * Attachments Browser
 
1021
 */
 
1022
.media-frame .attachments-browser {
 
1023
        position: relative;
 
1024
        width: 100%;
 
1025
        height: 100%;
 
1026
        overflow: hidden;
 
1027
}
 
1028
 
 
1029
.attachments-browser .media-toolbar {
 
1030
        right: 300px;
 
1031
        height: 50px;
 
1032
}
 
1033
 
 
1034
.attachments-browser.hide-sidebar .media-toolbar {
 
1035
        right: 0;
 
1036
}
 
1037
 
 
1038
.attachments-browser .media-toolbar-primary > .media-button,
 
1039
.attachments-browser .media-toolbar-primary > .media-button-group,
 
1040
.attachments-browser .media-toolbar-secondary > .media-button,
 
1041
.attachments-browser .media-toolbar-secondary > .media-button-group {
 
1042
        margin: 11px 0;
 
1043
}
 
1044
 
 
1045
.attachments-browser .attachments {
 
1046
        padding: 2px 8px 8px;
 
1047
}
 
1048
 
 
1049
.attachments-browser .attachments,
 
1050
.attachments-browser .uploader-inline {
 
1051
        position: absolute;
 
1052
        top: 50px;
 
1053
        left: 0;
 
1054
        right: 300px;
 
1055
        bottom: 0;
 
1056
        overflow: auto;
 
1057
        outline: none;
 
1058
}
 
1059
 
 
1060
.attachments-browser .uploader-inline.hidden {
 
1061
        display: none;
 
1062
}
 
1063
 
 
1064
.uploader-inline .close {
 
1065
        background-color: transparent;
 
1066
        border: 0;
 
1067
        cursor: pointer;
 
1068
        height: 48px;
 
1069
        position: absolute;
 
1070
        right: 0;
 
1071
        text-align: center;
 
1072
        top: 0;
 
1073
        width: 50px;
 
1074
        z-index: 1;
 
1075
}
 
1076
 
 
1077
.uploader-inline .close:before {
 
1078
        font: normal 30px/50px 'dashicons' !important;
 
1079
        color: #777;
 
1080
        display: inline-block;
 
1081
        content: '\f335';
 
1082
        font-weight: 300;
 
1083
}
 
1084
 
 
1085
.attachments-browser.hide-sidebar .attachments,
 
1086
.attachments-browser.hide-sidebar .uploader-inline {
 
1087
        right: 0;
 
1088
        margin-right: 0;
 
1089
}
 
1090
 
 
1091
.attachments-browser .instructions {
 
1092
        display: inline-block;
 
1093
        margin-top: 16px;
 
1094
        line-height: 18px;
 
1095
        font-size: 13px;
 
1096
        color: #666;
 
1097
        margin-right: 0.5em;
 
1098
}
 
1099
 
 
1100
.attachments-browser .no-media {
 
1101
        padding: 2em 0 0 2em;
 
1102
}
 
1103
 
 
1104
/**
 
1105
 * Progress Bar
 
1106
 */
 
1107
.media-progress-bar {
 
1108
        position: relative;
 
1109
        height: 10px;
 
1110
        width: 70%;
 
1111
        margin: 10px auto;
 
1112
        -webkit-border-radius: 10px;
 
1113
        border-radius: 10px;
 
1114
        background: #dfdfdf;
 
1115
        background: rgba( 0, 0, 0, 0.1 );
 
1116
}
 
1117
 
 
1118
.media-progress-bar div {
 
1119
        height: 10px;
 
1120
        min-width: 20px;
 
1121
        width: 0;
 
1122
        background: #1e8cbe;
 
1123
        -webkit-border-radius: 10px;
 
1124
        border-radius: 10px;
 
1125
        -webkit-transition: width 300ms;
 
1126
        transition: width 300ms;
 
1127
}
 
1128
 
 
1129
.media-uploader-status .media-progress-bar {
 
1130
        display: none;
 
1131
        width: 100%;
 
1132
}
 
1133
 
 
1134
.uploading.media-uploader-status .media-progress-bar {
 
1135
        display: block;
 
1136
}
 
1137
 
 
1138
.attachment-preview .media-progress-bar {
 
1139
        position: absolute;
 
1140
        top: 50%;
 
1141
        left: 15%;
 
1142
        width: 70%;
 
1143
        margin: -5px 0 0 0;
 
1144
}
 
1145
 
 
1146
.media-uploader-status {
 
1147
        position: relative;
 
1148
        margin: 0 auto;
 
1149
        padding-bottom: 10px;
 
1150
        max-width: 400px;
 
1151
}
 
1152
 
 
1153
.media-sidebar .media-uploader-status {
 
1154
        border-bottom: 1px solid #dfdfdf;
 
1155
}
 
1156
 
 
1157
.uploader-inline .media-uploader-status h3 {
 
1158
        display: none;
 
1159
}
 
1160
 
 
1161
.media-uploader-status .upload-details {
 
1162
        display: none;
 
1163
        font-size: 12px;
 
1164
        color: #666;
 
1165
}
 
1166
 
 
1167
.uploading.media-uploader-status .upload-details {
 
1168
        display: block;
 
1169
}
 
1170
 
 
1171
.media-uploader-status .upload-detail-separator {
 
1172
        padding: 0 4px;
 
1173
}
 
1174
 
 
1175
.media-uploader-status .upload-count {
 
1176
        color: #464646;
 
1177
}
 
1178
 
 
1179
.media-uploader-status .upload-dismiss-errors,
 
1180
.media-uploader-status .upload-errors {
 
1181
        display: none;
 
1182
}
 
1183
 
 
1184
.errors.media-uploader-status .upload-dismiss-errors,
 
1185
.errors.media-uploader-status .upload-errors {
 
1186
        display: block;
 
1187
}
 
1188
 
 
1189
.media-uploader-status .upload-dismiss-errors {
 
1190
        text-decoration: none;
 
1191
}
 
1192
 
 
1193
.media-sidebar .media-uploader-status .upload-dismiss-errors {
 
1194
        position: absolute;
 
1195
        top: 0;
 
1196
        right: 0;
 
1197
}
 
1198
 
 
1199
.upload-errors .upload-error {
 
1200
        margin: 8px auto 0 auto;
 
1201
        padding: 8px;
 
1202
        border: 1px #c00 solid;
 
1203
        background: #ffebe8;
 
1204
        -webkit-border-radius: 3px;
 
1205
        border-radius: 3px;
 
1206
}
 
1207
 
 
1208
.upload-errors .upload-error-label {
 
1209
        padding: 2px 4px;
 
1210
        margin-right: 8px;
 
1211
        font-weight: bold;
 
1212
        color: #fff;
 
1213
        background: #e00;
 
1214
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
 
1215
        background-image: -webkit-linear-gradient(top, #e00, #a00);
 
1216
        background-image: linear-gradient(to bottom, #e00, #a00);
 
1217
        -webkit-border-radius: 3px;
 
1218
        border-radius: 3px;
 
1219
}
 
1220
 
 
1221
.upload-errors .upload-error-message {
 
1222
        display: block;
 
1223
        padding-top: 8px;
 
1224
        color: #b44;
 
1225
        word-wrap: break-word;
 
1226
}
 
1227
 
 
1228
.uploader-window {
 
1229
        position: fixed;
 
1230
        top: 0;
 
1231
        left: 0;
 
1232
        right: 0;
 
1233
        bottom: 0;
 
1234
        background: rgba( 0, 86, 132, 0.9 );
 
1235
        z-index: 250000;
 
1236
        display: none;
 
1237
        text-align: center;
 
1238
        opacity: 0;
 
1239
        -webkit-transition: opacity 250ms;
 
1240
        transition: opacity 250ms;
 
1241
}
 
1242
 
 
1243
.uploader-window-content {
 
1244
        position: absolute;
 
1245
        top: 10px;
 
1246
        left: 10px;
 
1247
        right: 10px;
 
1248
        bottom: 10px;
 
1249
        border: 1px dashed #fff;
 
1250
}
 
1251
 
 
1252
.uploader-window h3 {
 
1253
        margin: -0.5em 0 0;
 
1254
        position: absolute;
 
1255
        top: 50%;
 
1256
        left: 0;
 
1257
        right: 0;
 
1258
        -webkit-transform: translateY( -50% );
 
1259
        -ms-transform: translateY(-50%);
 
1260
        transform: translateY( -50% );
 
1261
        font-size: 40px;
 
1262
        color: #fff;
 
1263
        padding: 0;
 
1264
}
 
1265
 
 
1266
.uploader-window .media-progress-bar {
 
1267
        margin-top: 20px;
 
1268
        max-width: 300px;
 
1269
        background: transparent;
 
1270
        border-color: #fff;
 
1271
        display: none;
 
1272
}
 
1273
 
 
1274
.uploader-window .media-progress-bar div {
 
1275
        background: #fff;
 
1276
}
 
1277
 
 
1278
.uploading .uploader-window .media-progress-bar {
 
1279
        display: block;
 
1280
}
 
1281
 
 
1282
.media-frame .uploader-inline {
 
1283
        margin-bottom: 20px;
 
1284
        padding: 0;
 
1285
        text-align: center;
 
1286
}
 
1287
 
 
1288
.uploader-inline-content {
 
1289
        position: absolute;
 
1290
        top: 30%;
 
1291
        left: 0;
 
1292
        right: 0;
 
1293
}
 
1294
 
 
1295
.uploader-inline-content .upload-ui {
 
1296
        margin: 2em 0;
 
1297
}
 
1298
 
 
1299
.uploader-inline-content .post-upload-ui {
 
1300
        margin-bottom: 2em;
 
1301
}
 
1302
 
 
1303
.uploader-inline .has-upload-message .upload-ui {
 
1304
        margin: 0 0 4em;
 
1305
}
 
1306
 
 
1307
.uploader-inline h3 {
 
1308
        font-size: 20px;
 
1309
        line-height: 28px;
 
1310
        font-weight: 400;
 
1311
        margin: 0;
 
1312
}
 
1313
 
 
1314
.uploader-inline .has-upload-message .upload-instructions {
 
1315
        font-size: 14px;
 
1316
        color: #464646;
 
1317
        font-weight: normal;
 
1318
}
 
1319
 
 
1320
.uploader-inline .drop-instructions {
 
1321
        display: none;
 
1322
}
 
1323
 
 
1324
.supports-drag-drop .uploader-inline .drop-instructions {
 
1325
        display: block;
 
1326
}
 
1327
 
 
1328
.uploader-inline p {
 
1329
        font-size: 12px;
 
1330
        margin: 0.5em 0;
 
1331
}
 
1332
 
 
1333
.uploader-inline .media-progress-bar {
 
1334
        display: none;
 
1335
}
 
1336
 
 
1337
.uploading.uploader-inline .media-progress-bar {
 
1338
        display: block;
 
1339
}
 
1340
 
 
1341
.uploader-inline .browser {
 
1342
        display: inline-block !important;
 
1343
}
 
1344
 
 
1345
/**
 
1346
 * Selection
 
1347
 */
 
1348
.media-selection {
 
1349
        position: absolute;
 
1350
        top: 0;
 
1351
        left: 0;
 
1352
        right: 350px;
 
1353
        height: 60px;
 
1354
        padding: 0 0 0 16px;
 
1355
        overflow: hidden;
 
1356
        white-space: nowrap;
 
1357
}
 
1358
 
 
1359
.media-selection .selection-info {
 
1360
        display: inline-block;
 
1361
        font-size: 12px;
 
1362
        height: 60px;
 
1363
        margin-right: 10px;
 
1364
        vertical-align: top;
 
1365
}
 
1366
 
 
1367
.media-selection.empty,
 
1368
.media-selection.editing {
 
1369
        display: none;
 
1370
}
 
1371
 
 
1372
.media-selection.one .edit-selection {
 
1373
        display: none;
 
1374
}
 
1375
 
 
1376
.media-selection .count {
 
1377
        display: block;
 
1378
        padding-top: 12px;
 
1379
        font-size: 14px;
 
1380
        line-height: 20px;
 
1381
        font-weight: bold;
 
1382
}
 
1383
 
 
1384
.media-selection .selection-info a {
 
1385
        display: block;
 
1386
        float: left;
 
1387
        padding: 1px 8px;
 
1388
        margin: 1px 8px 1px -8px;
 
1389
        line-height: 16px;
 
1390
        text-decoration: none;
 
1391
        border-right: 1px solid #dfdfdf;
 
1392
        color: #21759B;
 
1393
}
 
1394
 
 
1395
.media-selection .selection-info a:hover {
 
1396
        background: #21759B;
 
1397
        color: #fff;
 
1398
        border-color: transparent;
 
1399
}
 
1400
 
 
1401
.media-selection .selection-info a:last-child {
 
1402
        border-right: 0;
 
1403
        margin-right: 0;
 
1404
}
 
1405
 
 
1406
.media-selection .selection-info .clear-selection {
 
1407
        color: red;
 
1408
}
 
1409
 
 
1410
.media-selection .selection-info .clear-selection:hover {
 
1411
        background: red;
 
1412
}
 
1413
 
 
1414
.media-selection .selection-view {
 
1415
        display: inline-block;
 
1416
        vertical-align: top;
 
1417
}
 
1418
 
 
1419
.media-selection .attachments {
 
1420
        display: inline-block;
 
1421
        height: 48px;
 
1422
        margin: 6px;
 
1423
        padding: 0;
 
1424
        overflow: hidden;
 
1425
        vertical-align: top;
 
1426
}
 
1427
 
 
1428
.media-selection .attachment {
 
1429
        width: 48px;
 
1430
        padding: 0;
 
1431
        margin: 0;
 
1432
        -webkit-box-shadow: none;
 
1433
        box-shadow: none;
 
1434
}
 
1435
 
 
1436
.media-selection .attachment .thumbnail {
 
1437
        top: 4px;
 
1438
        right: 4px;
 
1439
        bottom: 4px;
 
1440
        left: 4px;
 
1441
}
 
1442
 
 
1443
.media-selection .attachment .icon {
 
1444
        width: 50%;
 
1445
}
 
1446
 
 
1447
.media-selection .attachment-preview {
 
1448
        -webkit-box-shadow: none;
 
1449
        box-shadow: none;
 
1450
        background: none;
 
1451
}
 
1452
 
 
1453
.media-selection .attachment.selection.details .thumbnail {
 
1454
        -webkit-box-shadow:
 
1455
                0 0 0 1px #fff,
 
1456
                0 0 0 3px #1e8cbe;
 
1457
        box-shadow:
 
1458
                0 0 0 1px #fff,
 
1459
                0 0 0 3px #1e8cbe;
 
1460
}
 
1461
 
 
1462
.media-selection:after {
 
1463
        content: '';
 
1464
        display: block;
 
1465
        position: absolute;
 
1466
        top: 0;
 
1467
        right: 0;
 
1468
        bottom: 0;
 
1469
        width: 25px;
 
1470
        background-image: -webkit-gradient(linear, right top, left top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
 
1471
        background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
 
1472
        background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
 
1473
}
 
1474
 
 
1475
.media-selection .attachment .filename {
 
1476
        display: none;
 
1477
}
 
1478
 
 
1479
/**
 
1480
 * Spinner
 
1481
 */
 
1482
.media-frame .spinner {
 
1483
        background: url(../images/spinner.gif) no-repeat;
 
1484
        -webkit-background-size: 20px 20px;
 
1485
        background-size: 20px 20px;
 
1486
        display: none;
 
1487
        opacity: 0.7;
 
1488
        filter: alpha(opacity=70);
 
1489
        width: 20px;
 
1490
        height: 20px;
 
1491
        margin: 0;
 
1492
}
 
1493
 
 
1494
.media-toolbar .spinner {
 
1495
        margin-top: 14px;
 
1496
}
 
1497
 
 
1498
/**
 
1499
 * Attachment Details
 
1500
 */
 
1501
.attachment-details {
 
1502
        position: relative;
 
1503
        overflow: auto;
 
1504
}
 
1505
 
 
1506
.attachment-details .settings-save-status {
 
1507
        float: right;
 
1508
        text-transform: none;
 
1509
        z-index: 10;
 
1510
}
 
1511
 
 
1512
.attachment-details .settings-save-status .spinner {
 
1513
        margin: 0 5px 0;
 
1514
}
 
1515
 
 
1516
.attachment-details .settings-save-status .saved {
 
1517
        float: right;
 
1518
        display: none;
 
1519
}
 
1520
 
 
1521
.attachment-details.save-waiting .settings-save-status .spinner,
 
1522
.attachment-details.save-complete .settings-save-status .saved {
 
1523
        display: block;
 
1524
}
 
1525
 
 
1526
.attachment-info {
 
1527
        overflow: hidden;
 
1528
        min-height: 60px;
 
1529
        margin-bottom: 16px;
 
1530
        line-height: 18px;
 
1531
        color: #666;
 
1532
        border-bottom: 1px solid #ddd;
 
1533
        padding-bottom: 11px;
 
1534
}
 
1535
 
 
1536
.attachment-info .filename {
 
1537
        font-weight: bold;
 
1538
        color: #464646;
 
1539
        word-wrap: break-word;
 
1540
}
 
1541
 
 
1542
.attachment-info .thumbnail {
 
1543
        position: relative;
 
1544
        float: left;
 
1545
        max-width: 120px;
 
1546
        max-height: 120px;
 
1547
        margin-top: 5px;
 
1548
        margin-right: 10px;
 
1549
        margin-bottom: 5px;
 
1550
}
 
1551
 
 
1552
.uploading .attachment-info .thumbnail {
 
1553
        width: 120px;
 
1554
        height: 80px;
 
1555
        -webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
 
1556
        box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
 
1557
}
 
1558
 
 
1559
.uploading .attachment-info .media-progress-bar {
 
1560
        margin-top: 35px;
 
1561
}
 
1562
 
 
1563
.attachment-info .thumbnail-image:after {
 
1564
        content: '';
 
1565
        display: block;
 
1566
        position: absolute;
 
1567
        top: 0;
 
1568
        left: 0;
 
1569
        right: 0;
 
1570
        bottom: 0;
 
1571
        -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 
1572
        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 
1573
        overflow: hidden;
 
1574
}
 
1575
 
 
1576
.attachment-info .thumbnail img {
 
1577
        display: block;
 
1578
        max-width: 120px;
 
1579
        max-height: 120px;
 
1580
        margin: 0 auto;
 
1581
}
 
1582
 
 
1583
.attachment-info .details {
 
1584
        float: left;
 
1585
        font-size: 12px;
 
1586
        max-width: 100%;
 
1587
}
 
1588
 
 
1589
.attachment-info .edit-attachment,
 
1590
.attachment-info .refresh-attachment,
 
1591
.attachment-info .delete-attachment,
 
1592
.attachment-info .trash-attachment,
 
1593
.attachment-info .untrash-attachment {
 
1594
        display: block;
 
1595
        text-decoration: none;
 
1596
        white-space: nowrap;
 
1597
}
 
1598
 
 
1599
.attachment-info .refresh-attachment,
 
1600
.attachment-details.needs-refresh .attachment-info .edit-attachment {
 
1601
        display: none;
 
1602
}
 
1603
 
 
1604
.attachment-details.needs-refresh .attachment-info .refresh-attachment,
 
1605
.attachment-info .edit-attachment {
 
1606
        display: block;
 
1607
}
 
1608
 
 
1609
.media-modal .delete-attachment,
 
1610
.media-modal .trash-attachment,
 
1611
.media-modal .untrash-attachment {
 
1612
        color: #bc0b0b;
 
1613
}
 
1614
 
 
1615
.media-modal .delete-attachment:hover,
 
1616
.media-modal .trash-attachment:hover,
 
1617
.media-modal .untrash-attachment:hover {
 
1618
        color: red;
 
1619
}
 
1620
 
 
1621
/**
 
1622
 * Attachment Display Settings
 
1623
 */
 
1624
.attachment-display-settings {
 
1625
        width: 100%;
 
1626
        float: left;
 
1627
        overflow: hidden;
 
1628
}
 
1629
 
 
1630
.attachment-display-settings h4 {
 
1631
        margin: 1.4em 0 0.4em;
 
1632
}
 
1633
 
 
1634
.collection-settings {
 
1635
        overflow: hidden;
 
1636
}
 
1637
 
 
1638
.collection-settings .setting input[type="checkbox"] {
 
1639
        float: left;
 
1640
        margin-right: 8px;
 
1641
}
 
1642
 
 
1643
.collection-settings .setting span {
 
1644
        min-width: inherit;
 
1645
}
 
1646
 
 
1647
/**
 
1648
 * Image Editor
 
1649
 */
 
1650
.media-modal .imgedit-wrap {
 
1651
        position: static;
 
1652
}
 
1653
 
 
1654
.media-modal .imgedit-wait {
 
1655
        height: auto !important;
 
1656
        right: 0;
 
1657
        bottom: 0;
 
1658
        left: 0;
 
1659
}
 
1660
 
 
1661
.media-modal .imgedit-wrap .imgedit-panel-content {
 
1662
        padding: 16px;
 
1663
        position: absolute;
 
1664
        top: 0;
 
1665
        right: 282px;
 
1666
        bottom: 0;
 
1667
        left: 0;
 
1668
        overflow: auto;
 
1669
}
 
1670
 
 
1671
.media-modal .imgedit-wrap .imgedit-settings {
 
1672
        background: #f3f3f3;
 
1673
        border-left: 1px solid #ddd;
 
1674
        padding: 0 16px 16px;
 
1675
        position: absolute;
 
1676
        top: 0;
 
1677
        right: 0;
 
1678
        bottom: 0;
 
1679
        width: 250px;
 
1680
        overflow: auto;
 
1681
}
 
1682
 
 
1683
.media-modal .imgedit-group {
 
1684
        background: none;
 
1685
        border: none;
 
1686
        border-bottom: 1px solid #ddd;
 
1687
        -webkit-box-shadow: none;
 
1688
        box-shadow: none;
 
1689
        margin: 0;
 
1690
        margin-bottom: 16px;
 
1691
        padding: 0;
 
1692
        padding-bottom: 16px;
 
1693
        position: relative; /* RTL fix, #WP29352 */
 
1694
}
 
1695
 
 
1696
.media-modal .imgedit-group:last-of-type {
 
1697
        border: none;
 
1698
        margin: 0;
 
1699
        padding: 0;
 
1700
}
 
1701
 
 
1702
.media-modal .imgedit-group-top h3 {
 
1703
        text-transform: uppercase;
 
1704
        font-size: 12px;
 
1705
        color: #666;
 
1706
        margin: 0;
 
1707
        margin-top: 24px;
 
1708
}
 
1709
 
 
1710
.media-modal .imgedit-group-top h3 a {
 
1711
        text-decoration: none;
 
1712
        color: #666;
 
1713
}
 
1714
 
 
1715
.media-modal .imgedit-help-toggle {
 
1716
        margin-top: -2px;
 
1717
        cursor: pointer;
 
1718
        color: #666;
 
1719
}
 
1720
 
 
1721
.media-modal .imgedit-help-toggled span.dashicons:before {
 
1722
        content: '\f142';
 
1723
}
 
1724
 
 
1725
.media-modal .imgedit-group img {
 
1726
        margin-top: 5px;
 
1727
}
 
1728
 
 
1729
.media-modal .imgedit-wrap div.updated {
 
1730
        margin: 0;
 
1731
        margin-bottom: 16px;
 
1732
}
 
1733
 
 
1734
 
 
1735
/**
 
1736
 * Embed from URL and Image Details
 
1737
 */
 
1738
.embed-url {
 
1739
        display: block;
 
1740
        position: relative;
 
1741
        padding: 16px;
 
1742
        margin: 0;
 
1743
        z-index: 250;
 
1744
        background: #fff;
 
1745
        font-size: 18px;
 
1746
}
 
1747
 
 
1748
.media-frame .embed-url input {
 
1749
        font-size: 18px;
 
1750
        padding: 12px 14px;
 
1751
        width: 100%;
 
1752
        min-width: 200px;
 
1753
        -webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
 
1754
        box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
 
1755
}
 
1756
 
 
1757
.media-frame .embed-url .spinner {
 
1758
        position: absolute;
 
1759
        top: 32px;
 
1760
        right: 26px;
 
1761
}
 
1762
 
 
1763
.media-frame .embed-loading .embed-url .spinner {
 
1764
        display: block;
 
1765
}
 
1766
 
 
1767
.embed-link-settings,
 
1768
.embed-media-settings {
 
1769
        position: absolute;
 
1770
        top: 70px;
 
1771
        left: 0;
 
1772
        right: 0;
 
1773
        bottom: 0;
 
1774
        padding: 16px 16px 32px;
 
1775
        overflow: auto;
 
1776
}
 
1777
 
 
1778
.embed-preview img, .embed-preview iframe, .embed-preview embed {
 
1779
        max-width: 100%;
 
1780
}
 
1781
 
 
1782
.embed-preview img {
 
1783
        height: auto;
 
1784
}
 
1785
 
 
1786
.image-details .media-modal {
 
1787
        left: 140px;
 
1788
        right: 140px;
 
1789
}
 
1790
 
 
1791
.image-details .media-frame-title,
 
1792
.image-details .media-frame-content,
 
1793
.image-details .media-frame-router {
 
1794
        left: 0;
 
1795
}
 
1796
 
 
1797
.image-details .embed-media-settings {
 
1798
        top: 0;
 
1799
        overflow: visible;
 
1800
        padding: 0;
 
1801
}
 
1802
 
 
1803
.image-details .embed-media-settings,
 
1804
.image-details .embed-media-settings div {
 
1805
        -webkit-box-sizing: border-box;
 
1806
        -moz-box-sizing: border-box;
 
1807
        box-sizing: border-box;
 
1808
}
 
1809
 
 
1810
.image-details .column-settings {
 
1811
        background: #f3f3f3;
 
1812
        border-right: 1px solid #ddd;
 
1813
        min-height: 100%;
 
1814
        width: 55%;
 
1815
        position: absolute;
 
1816
        top: 0;
 
1817
        left: 0;
 
1818
}
 
1819
 
 
1820
.image-details .column-settings h3 {
 
1821
        margin: 20px;
 
1822
        padding-top: 20px;
 
1823
        border-top: 1px solid #ddd;
 
1824
}
 
1825
 
 
1826
.image-details .column-image {
 
1827
        width: 45%;
 
1828
        position: absolute;
 
1829
        left: 55%;
 
1830
        top: 0;
 
1831
}
 
1832
 
 
1833
.image-details .image {
 
1834
        margin: 20px;
 
1835
}
 
1836
 
 
1837
.image-details .image img {
 
1838
        max-width: 100%;
 
1839
        max-height: 500px;
 
1840
}
 
1841
 
 
1842
.image-details .advanced-toggle {
 
1843
        color: #666;
 
1844
        text-decoration: none;
 
1845
        display: block;
 
1846
}
 
1847
 
 
1848
.image-details .advanced-toggle:after {
 
1849
        font: normal 20px/1 'dashicons';
 
1850
        speak: none;
 
1851
        vertical-align: top;
 
1852
        -webkit-font-smoothing: antialiased;
 
1853
        -moz-osx-font-smoothing: grayscale;
 
1854
        content: '\f140';
 
1855
        display: inline-block;
 
1856
        margin-top: -2px;
 
1857
}
 
1858
 
 
1859
.image-details .advanced-visible .advanced-toggle:after {
 
1860
        content: '\f142';
 
1861
}
 
1862
 
 
1863
.image-details .embed-media-settings .size {
 
1864
        margin-bottom: 4px;
 
1865
}
 
1866
 
 
1867
.image-details .custom-size span {
 
1868
        display: block;
 
1869
}
 
1870
 
 
1871
.image-details .custom-size label {
 
1872
        display: block;
 
1873
        float: left;
 
1874
}
 
1875
 
 
1876
.image-details .custom-size span small {
 
1877
        color: #999;
 
1878
        font-size: inherit;
 
1879
}
 
1880
 
 
1881
.image-details .custom-size input {
 
1882
        width: 5em;
 
1883
}
 
1884
 
 
1885
.image-details .custom-size .sep {
 
1886
        float: left;
 
1887
        margin: 26px 6px 0 6px;
 
1888
}
 
1889
 
 
1890
.image-details .custom-size:after {
 
1891
        content: '';
 
1892
        display: table;
 
1893
        clear: both;
 
1894
}
 
1895
 
 
1896
.media-embed .thumbnail {
 
1897
        max-width: 100%;
 
1898
        max-height: 200px;
 
1899
        position: relative;
 
1900
        float: left;
 
1901
}
 
1902
 
 
1903
.media-embed .thumbnail img {
 
1904
        max-height: 200px;
 
1905
        display: block;
 
1906
}
 
1907
 
 
1908
.media-embed .thumbnail:after {
 
1909
        content: '';
 
1910
        display: block;
 
1911
        position: absolute;
 
1912
        top: 0;
 
1913
        left: 0;
 
1914
        right: 0;
 
1915
        bottom: 0;
 
1916
        -webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 
1917
        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 
1918
        overflow: hidden;
 
1919
}
 
1920
 
 
1921
.media-embed .setting {
 
1922
        width: 100%;
 
1923
        margin: 10px 0;
 
1924
        float: left;
 
1925
        display: block;
 
1926
        clear: both;
 
1927
}
 
1928
 
 
1929
.image-details .embed-media-settings .setting {
 
1930
        float: none;
 
1931
        width: auto;
 
1932
}
 
1933
 
 
1934
.image-details .actions {
 
1935
        margin: 10px 0;
 
1936
}
 
1937
 
 
1938
.image-details .hidden {
 
1939
        display: none;
 
1940
}
 
1941
 
 
1942
.media-embed .setting input[type="text"],
 
1943
.media-embed .setting textarea {
 
1944
        display: block;
 
1945
        width: 100%;
 
1946
        max-width: 400px;
 
1947
        margin: 1px 0;
 
1948
}
 
1949
 
 
1950
.image-details .embed-media-settings .setting input[type="text"],
 
1951
.image-details .embed-media-settings .setting textarea {
 
1952
        max-width: inherit;
 
1953
        width: 70%;
 
1954
}
 
1955
 
 
1956
.image-details .embed-media-settings .setting input.link-to-custom,
 
1957
.image-details .embed-media-settings .link-target,
 
1958
.image-details .embed-media-settings .custom-size {
 
1959
        margin-left: 27%;
 
1960
        width: 70%;
 
1961
}
 
1962
 
 
1963
.image-details .embed-media-settings .link-target {
 
1964
        margin-top: 24px;
 
1965
}
 
1966
 
 
1967
.media-embed .setting input.hidden,
 
1968
.media-embed .setting textarea.hidden {
 
1969
        display: none;
 
1970
}
 
1971
 
 
1972
.media-embed .setting span {
 
1973
        display: block;
 
1974
        width: 200px;
 
1975
        font-size: 13px;
 
1976
        line-height: 24px;
 
1977
        color: #666;
 
1978
}
 
1979
 
 
1980
.image-details .embed-media-settings .setting span {
 
1981
        float: left;
 
1982
        width: 25%;
 
1983
        text-align: right;
 
1984
        margin: 8px 1% 0 1%;
 
1985
        line-height: 1.1;
 
1986
}
 
1987
 
 
1988
.media-embed .setting .button-group {
 
1989
        margin: 2px 0;
 
1990
}
 
1991
 
 
1992
.media-embed-sidebar {
 
1993
        position: absolute;
 
1994
        top: 0;
 
1995
        left: 440px;
 
1996
}
 
1997
 
 
1998
.advanced-section,
 
1999
.link-settings {
 
2000
        margin-top: 10px;
 
2001
}
 
2002
 
 
2003
/* Drag & drop on the editor upload */
 
2004
#wp-fullscreen-body .uploader-editor,
 
2005
.wp-editor-wrap .uploader-editor {
 
2006
        background: rgba( 150, 150, 150, 0.9 );
 
2007
        position: absolute;
 
2008
        top: 0;
 
2009
        left: 0;
 
2010
        width: 100%;
 
2011
        height: 100%;
 
2012
        z-index: 99998; /* under the toolbar */
 
2013
        display: none;
 
2014
        text-align: center;
 
2015
}
 
2016
 
 
2017
#wp-fullscreen-body .uploader-editor {
 
2018
        background: rgba( 0, 86, 132, 0.9 );
 
2019
        position: fixed;
 
2020
        z-index: 100050; /* above the editor toolbar */
 
2021
}
 
2022
 
 
2023
.wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
 
2024
        opacity: 0;
 
2025
}
 
2026
 
 
2027
#wp-fullscreen-body .uploader-editor-content,
 
2028
.wp-editor-wrap .uploader-editor-content {
 
2029
        border: 1px dashed #fff;
 
2030
        position: absolute;
 
2031
        top: 10px;
 
2032
        left: 10px;
 
2033
        right: 10px;
 
2034
        bottom: 10px;
 
2035
}
 
2036
 
 
2037
#wp-fullscreen-body .uploader-editor .uploader-editor-title,
 
2038
.wp-editor-wrap .uploader-editor .uploader-editor-title {
 
2039
        position: absolute;
 
2040
        top: 50%;
 
2041
        left: 0;
 
2042
        right: 0;
 
2043
        -webkit-transform: translateY( -50% );
 
2044
        -ms-transform: translateY(-50%);
 
2045
        transform: translateY( -50% );
 
2046
        font-size: 3em;
 
2047
        line-height: 1.3;
 
2048
        font-weight: bold;
 
2049
        color: #fff;
 
2050
        padding: 0;
 
2051
        margin: 0;
 
2052
        display: none;
 
2053
}
 
2054
 
 
2055
.wp-editor-wrap .uploader-editor.droppable {
 
2056
        background: rgba( 0, 86, 132, 0.9 );
 
2057
}
 
2058
 
 
2059
#wp-fullscreen-body .uploader-editor .uploader-editor-title,
 
2060
.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
 
2061
        display: block;
 
2062
}
 
2063
 
 
2064
/**
 
2065
 * IE7 Fixes
 
2066
 */
 
2067
.ie7 .media-frame .attachments-browser {
 
2068
        position: static;
 
2069
}
 
2070
 
 
2071
.ie7 .media-frame .embed-url input {
 
2072
        margin-top: 4px;
 
2073
        width: 90%;
 
2074
}
 
2075
 
 
2076
.ie7 .compat-item {
 
2077
        width: 99%;
 
2078
}
 
2079
 
 
2080
.ie7 .attachment-display-settings {
 
2081
        width: auto;
 
2082
}
 
2083
 
 
2084
.ie7 .attachment-preview,
 
2085
.ie7 .attachment-preview .thumbnail {
 
2086
        width: 120px;
 
2087
        height: 120px;
 
2088
}
 
2089
 
 
2090
.ie7 .media-frame .attachment .describe {
 
2091
        width: 102px;
 
2092
}
 
2093
 
 
2094
.ie7 .media-sidebar .setting select {
 
2095
        max-width: 55%;
 
2096
}
 
2097
 
 
2098
.ie7 .media-sidebar .setting input[type="text"],
 
2099
.ie7 .media-sidebar .setting input[type="password"],
 
2100
.ie7 .media-sidebar .setting input[type="email"],
 
2101
.ie7 .media-sidebar .setting input[type="number"],
 
2102
.ie7 .media-sidebar .setting input[type="search"],
 
2103
.ie7 .media-sidebar .setting input[type="tel"],
 
2104
.ie7 .media-sidebar .setting input[type="url"],
 
2105
.ie7 .media-sidebar .setting textarea {
 
2106
        width: 55%;
 
2107
}
 
2108
 
 
2109
.ie7 .media-sidebar .setting .link-to-custom {
 
2110
        float: left;
 
2111
}
 
2112
 
 
2113
/**
 
2114
 * Localization
 
2115
 */
 
2116
.rtl .media-modal,
 
2117
.rtl .media-frame,
 
2118
.rtl .media-frame .search,
 
2119
.rtl .media-frame input[type="text"],
 
2120
.rtl .media-frame input[type="password"],
 
2121
.rtl .media-frame input[type="number"],
 
2122
.rtl .media-frame input[type="search"],
 
2123
.rtl .media-frame input[type="email"],
 
2124
.rtl .media-frame input[type="url"],
 
2125
.rtl .media-frame input[type="tel"],
 
2126
.rtl .media-frame textarea,
 
2127
.rtl .media-frame select {
 
2128
        font-family: Tahoma, sans-serif;
 
2129
}
 
2130
 
 
2131
:lang(he-il) .rtl .media-modal,
 
2132
:lang(he-il) .rtl .media-frame,
 
2133
:lang(he-il) .rtl .media-frame .search,
 
2134
:lang(he-il) .rtl .media-frame input[type="text"],
 
2135
:lang(he-il) .rtl .media-frame input[type="password"],
 
2136
:lang(he-il) .rtl .media-frame input[type="number"],
 
2137
:lang(he-il) .rtl .media-frame input[type="search"],
 
2138
:lang(he-il) .rtl .media-frame input[type="email"],
 
2139
:lang(he-il) .rtl .media-frame input[type="url"],
 
2140
:lang(he-il) .rtl .media-frame textarea,
 
2141
:lang(he-il) .rtl .media-frame select {
 
2142
        font-family: Arial, sans-serif;
 
2143
}
 
2144
 
 
2145
@media only screen and (max-width: 940px) {
 
2146
        .media-frame-content .media-toolbar-primary .search,
 
2147
        .media-frame-content .media-toolbar-secondary .attachment-filters {
 
2148
                max-width: 134px;
 
2149
        }
 
2150
}
 
2151
 
 
2152
/**
 
2153
 * Responsive layout
 
2154
 */
 
2155
@media only screen and (max-width: 900px) {
 
2156
 
 
2157
        /* Drop-down menu */
 
2158
        .media-frame:not(.hide-menu) .media-frame-title,
 
2159
        .media-frame:not(.hide-menu) .media-frame-router,
 
2160
        .media-frame:not(.hide-menu) .media-frame-content,
 
2161
        .media-frame:not(.hide-menu) .media-frame-toolbar {
 
2162
                left: 0;
 
2163
        }
 
2164
 
 
2165
        .media-frame:not(.hide-menu) .media-frame-menu {
 
2166
                position: static;
 
2167
                width: 0;
 
2168
        }
 
2169
 
 
2170
        .media-frame:not(.hide-menu) .media-menu {
 
2171
                width: auto;
 
2172
                max-width: 80%;
 
2173
                overflow: auto;
 
2174
                z-index: 2000;
 
2175
                top: 50px;
 
2176
                left: -300px;
 
2177
                right: auto;
 
2178
                bottom: auto;
 
2179
                padding: 5px 0;
 
2180
                border: 1px solid #ccc;
 
2181
        }
 
2182
 
 
2183
        .media-frame:not(.hide-menu) .media-menu.visible {
 
2184
                left: 0;
 
2185
        }
 
2186
 
 
2187
        .media-frame:not(.hide-menu) .media-menu > a {
 
2188
                padding: 12px 16px;
 
2189
                font-size: 16px;
 
2190
        }
 
2191
 
 
2192
        .media-frame:not(.hide-menu) .media-menu > a.active {
 
2193
                display: none;
 
2194
        }
 
2195
 
 
2196
        .media-frame:not(.hide-menu) .media-menu .separator {
 
2197
                margin: 5px 10px;
 
2198
        }
 
2199
 
 
2200
        .media-frame:not(.hide-menu) .media-frame-title {
 
2201
                left: 0;
 
2202
                color: #21759b;
 
2203
        }
 
2204
 
 
2205
        .media-frame:not(.hide-menu) .media-frame-title .dashicons {
 
2206
                display: inline-block;
 
2207
                line-height: 50px;
 
2208
        }
 
2209
 
 
2210
        .media-frame:not(.hide-menu) .media-frame-title h1 {
 
2211
                line-height: 3;
 
2212
                font-size: 18px;
 
2213
                float: left;
 
2214
                cursor: pointer;
 
2215
        }
 
2216
        /* End drop-down menu */
 
2217
 
 
2218
        .media-sidebar {
 
2219
                width: 230px;
 
2220
        }
 
2221
 
 
2222
        .attachments-browser .attachments,
 
2223
        .attachments-browser .uploader-inline,
 
2224
        .attachments-browser .media-toolbar {
 
2225
                right: 262px;
 
2226
        }
 
2227
 
 
2228
        .media-sidebar .setting,
 
2229
        .attachment-details .setting {
 
2230
                margin: 6px 0px;
 
2231
        }
 
2232
 
 
2233
        .media-sidebar .setting input,
 
2234
        .media-sidebar .setting textarea,
 
2235
        .media-sidebar .setting span,
 
2236
        .attachment-details .setting input,
 
2237
        .attachment-details .setting textarea,
 
2238
        .attachment-details .setting span,
 
2239
        .compat-item label span {
 
2240
                float: none;
 
2241
        }
 
2242
 
 
2243
        .media-sidebar .setting span,
 
2244
        .attachment-details .setting span,
 
2245
        .compat-item label span {
 
2246
                text-align: inherit;
 
2247
                min-height: 16px;
 
2248
                margin: 0;
 
2249
                padding: 8px 2px 0;
 
2250
        }
 
2251
 
 
2252
        .media-sidebar .setting .value,
 
2253
        .attachment-details .setting .value {
 
2254
                float: none;
 
2255
                width: auto;
 
2256
        }
 
2257
 
 
2258
        .media-sidebar .setting input[type="text"],
 
2259
        .media-sidebar .setting input[type="password"],
 
2260
        .media-sidebar .setting input[type="email"],
 
2261
        .media-sidebar .setting input[type="number"],
 
2262
        .media-sidebar .setting input[type="search"],
 
2263
        .media-sidebar .setting input[type="tel"],
 
2264
        .media-sidebar .setting input[type="url"],
 
2265
        .media-sidebar .setting textarea,
 
2266
        .media-sidebar .setting select,
 
2267
        .attachment-details .setting input[type="text"],
 
2268
        .attachment-details .setting input[type="password"],
 
2269
        .attachment-details .setting input[type="email"],
 
2270
        .attachment-details .setting input[type="number"],
 
2271
        .attachment-details .setting input[type="search"],
 
2272
        .attachment-details .setting input[type="tel"],
 
2273
        .attachment-details .setting input[type="url"],
 
2274
        .attachment-details .setting textarea,
 
2275
        .attachment-details .setting select {
 
2276
                float: none;
 
2277
                width: 98%;
 
2278
                max-width: none;
 
2279
                height: auto;
 
2280
        }
 
2281
 
 
2282
        .media-sidebar .setting select.columns,
 
2283
        .attachment-details .setting select.columns {
 
2284
                width: auto;
 
2285
        }
 
2286
 
 
2287
        .media-frame input,
 
2288
        .media-frame textarea,
 
2289
        .media-frame .search {
 
2290
                padding: 3px 6px;
 
2291
        }
 
2292
 
 
2293
        .image-details .column-image {
 
2294
                width: 30%;
 
2295
                left: 70%;
 
2296
        }
 
2297
 
 
2298
        .image-details .column-settings {
 
2299
                width: 70%;
 
2300
        }
 
2301
 
 
2302
        .image-details .media-modal {
 
2303
                left: 30px;
 
2304
                right: 30px;
 
2305
        }
 
2306
 
 
2307
        .image-details .embed-media-settings .setting {
 
2308
                margin: 20px;
 
2309
        }
 
2310
 
 
2311
        .image-details .embed-media-settings .setting span {
 
2312
                float: none;
 
2313
                text-align: left;
 
2314
                width: 100%;
 
2315
                margin-bottom: 4px;
 
2316
        }
 
2317
 
 
2318
        .image-details .embed-media-settings .setting input.link-to-custom,
 
2319
        .image-details .embed-media-settings .setting input[type="text"],
 
2320
        .image-details .embed-media-settings .setting textarea {
 
2321
                width: 100%;
 
2322
                margin-left: 0;
 
2323
        }
 
2324
 
 
2325
        .image-details .embed-media-settings .custom-size {
 
2326
                margin-left: 20px;
 
2327
        }
 
2328
 
 
2329
        .collection-settings .setting input[type="checkbox"] {
 
2330
                margin-top: 0;
 
2331
        }
 
2332
 
 
2333
        .media-selection {
 
2334
                min-width: 120px;
 
2335
        }
 
2336
 
 
2337
        .media-selection:after {
 
2338
                background: none;
 
2339
        }
 
2340
 
 
2341
        .media-selection .attachments {
 
2342
                display: none;
 
2343
        }
 
2344
 
 
2345
        .media-modal .attachments-browser .media-toolbar-primary,
 
2346
        .media-modal .attachments-browser .media-toolbar-secondary {
 
2347
                width: 50%;
 
2348
        }
 
2349
 
 
2350
        .media-modal .attachments-browser .media-toolbar .search {
 
2351
                max-width: 100%;
 
2352
                height: auto;
 
2353
                float: right;
 
2354
        }
 
2355
 
 
2356
        .media-modal .attachments-browser .media-toolbar .attachment-filters {
 
2357
                margin: 11px 0 0;
 
2358
                height: auto;
 
2359
                max-width: 65%;
 
2360
                max-width: -webkit-calc(100% - 38px);
 
2361
                max-width: calc(100% - 38px);
 
2362
        }
 
2363
 
 
2364
        .media-modal .attachments-browser .media-toolbar .spinner {
 
2365
                margin: 14px 8px 0;
 
2366
        }
 
2367
 
 
2368
        /* Text inputs need to be 16px, or they force zooming on iOS */
 
2369
        .media-frame input[type="text"],
 
2370
        .media-frame input[type="password"],
 
2371
        .media-frame input[type="number"],
 
2372
        .media-frame input[type="search"],
 
2373
        .media-frame input[type="email"],
 
2374
        .media-frame input[type="url"],
 
2375
        .media-frame textarea,
 
2376
        .media-frame select {
 
2377
                font-size: 16px;
 
2378
        }
 
2379
}
 
2380
 
 
2381
/* Responsive on portrait and landscape */
 
2382
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
 
2383
        /* Full-bleed modal */
 
2384
        .media-modal,
 
2385
        .image-details .media-modal {
 
2386
                position: fixed;
 
2387
                top: 0;
 
2388
                left: 0;
 
2389
                right: 0;
 
2390
                bottom: 0;
 
2391
        }
 
2392
 
 
2393
        .media-modal-backdrop {
 
2394
                position: fixed;
 
2395
        }
 
2396
 
 
2397
        .media-sidebar {
 
2398
                z-index: 1900;
 
2399
                max-width: 70%;
 
2400
                bottom: 120%;
 
2401
                -webkit-box-sizing: border-box;
 
2402
                -moz-box-sizing: border-box;
 
2403
                box-sizing: border-box;
 
2404
                padding-bottom: 0;
 
2405
        }
 
2406
 
 
2407
        .media-sidebar.visible {
 
2408
                bottom: 0;
 
2409
        }
 
2410
 
 
2411
        .attachments-browser .attachments,
 
2412
        .attachments-browser .uploader-inline,
 
2413
        .attachments-browser .media-toolbar {
 
2414
                right: 0;
 
2415
        }
 
2416
 
 
2417
        .image-details .media-frame-title {
 
2418
                display: block;
 
2419
                top: 0;
 
2420
                font-size: 14px;
 
2421
        }
 
2422
 
 
2423
        .image-details .column-image,
 
2424
        .image-details .column-settings {
 
2425
                width: 100%;
 
2426
                position: relative;
 
2427
                left: 0;
 
2428
        }
 
2429
 
 
2430
        .image-details .column-settings {
 
2431
                padding: 4px 0;
 
2432
        }
 
2433
 
 
2434
        /* Media tabs on the top */
 
2435
        .media-frame-content .media-toolbar .instructions {
 
2436
                display: none;
 
2437
        }
 
2438
}
 
2439
 
 
2440
/* Landscape specific header override */
 
2441
@media screen and (max-height: 400px) {
 
2442
        .media-menu {
 
2443
                padding: 0;
 
2444
        }
 
2445
 
 
2446
        .media-frame-router {
 
2447
                top: 44px;
 
2448
        }
 
2449
 
 
2450
        .media-frame-content {
 
2451
                top: 78px;
 
2452
        }
 
2453
 
 
2454
        .attachments-browser .attachments {
 
2455
                top: 40px;
 
2456
        }
 
2457
 
 
2458
        /* Prevent unnecessary scrolling on title input */
 
2459
        .embed-link-settings {
 
2460
                overflow: visible;
 
2461
        }
 
2462
}
 
2463
 
 
2464
@media only screen and (max-width: 480px) {
 
2465
        .media-frame-content .media-toolbar .search,
 
2466
        .media-frame-content .media-toolbar .attachment-filters {
 
2467
                max-width: 90px;
 
2468
        }
 
2469
 
 
2470
        .media-modal-close {
 
2471
                top: 5px;
 
2472
                right: 5px;
 
2473
        }
 
2474
 
 
2475
        .media-modal .media-frame-title {
 
2476
                height: 40px;
 
2477
        }
 
2478
 
 
2479
        .media-modal .media-frame-title h1,
 
2480
        .media-frame:not(.hide-menu) .media-frame-title h1 {
 
2481
                font-size: 18px;
 
2482
                line-height: 40px;
 
2483
        }
 
2484
 
 
2485
        .media-frame:not(.hide-menu) .media-frame-title .dashicons {
 
2486
                line-height: 40px;
 
2487
        }
 
2488
 
 
2489
        .media-frame-router,
 
2490
        .media-frame:not(.hide-menu) .media-menu {
 
2491
                top: 40px;
 
2492
        }
 
2493
 
 
2494
        .media-frame-content {
 
2495
                top: 74px;
 
2496
        }
 
2497
 
 
2498
        .media-frame.hide-router .media-frame-content {
 
2499
                top: 40px;
 
2500
        }
 
2501
}
 
2502
 
 
2503
/**
 
2504
 * HiDPI Displays
 
2505
 */
 
2506
@media print,
 
2507
  (-o-min-device-pixel-ratio: 5/4),
 
2508
  (-webkit-min-device-pixel-ratio: 1.25),
 
2509
  (min-resolution: 120dpi) {
 
2510
 
 
2511
        .media-modal-icon {
 
2512
                background-image: url(../images/uploader-icons-2x.png);
 
2513
                -webkit-background-size: 134px 15px;
 
2514
                background-size: 134px 15px;
 
2515
        }
 
2516
 
 
2517
        .media-frame .spinner {
 
2518
                background-image: url(../images/spinner-2x.gif);
 
2519
        }
 
2520
}
 
2521
 
 
2522
.media-frame-content[data-columns="1"] .attachment {
 
2523
        width: 100%;
 
2524
}
 
2525
 
 
2526
.media-frame-content[data-columns="2"] .attachment {
 
2527
        width: 50%;
 
2528
}
 
2529
 
 
2530
.media-frame-content[data-columns="3"] .attachment {
 
2531
        width: 33.33%;
 
2532
}
 
2533
 
 
2534
.media-frame-content[data-columns="4"] .attachment {
 
2535
        width: 25%;
 
2536
}
 
2537
 
 
2538
.media-frame-content[data-columns="5"] .attachment {
 
2539
        width: 20%;
 
2540
}
 
2541
 
 
2542
.media-frame-content[data-columns="6"] .attachment {
 
2543
        width: 16.66%;
 
2544
}
 
2545
 
 
2546
.media-frame-content[data-columns="7"] .attachment {
 
2547
        width: 14.28%;
 
2548
}
 
2549
 
 
2550
.media-frame-content[data-columns="8"] .attachment {
 
2551
        width: 12.5%;
 
2552
}
 
2553
 
 
2554
.media-frame-content[data-columns="9"] .attachment {
 
2555
        width: 11.11%;
 
2556
}
 
2557
 
 
2558
.media-frame-content[data-columns="10"] .attachment {
 
2559
        width: 10%;
 
2560
}
 
2561
 
 
2562
.media-frame-content[data-columns="11"] .attachment {
 
2563
        width: 9.09%;
 
2564
}
 
2565
 
 
2566
.media-frame-content[data-columns="12"] .attachment {
 
2567
        width: 8.33%;
 
2568
}