~canonical-sysadmins/wordpress/4.7.4

« back to all changes in this revision

Viewing changes to wp-admin/css/media-rtl.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:
 
1
/*------------------------------------------------------------------------------
 
2
  14.0 - Media Screen
 
3
------------------------------------------------------------------------------*/
 
4
 
 
5
.media-item .describe {
 
6
        border-collapse: collapse;
 
7
        width: 100%;
 
8
        border-top: 1px solid #dfdfdf;
 
9
        clear: both;
 
10
        cursor: default;
 
11
}
 
12
 
 
13
.media-item.media-blank .describe {
 
14
        border: 0;
 
15
}
 
16
 
 
17
.media-item .describe th {
 
18
        vertical-align: top;
 
19
        text-align: right;
 
20
        padding: 5px 10px 10px;
 
21
        width: 140px;
 
22
}
 
23
 
 
24
.media-item .describe .align th {
 
25
        padding-top: 0;
 
26
}
 
27
 
 
28
.media-item .media-item-info tr {
 
29
        background-color: transparent;
 
30
}
 
31
 
 
32
.media-item .describe td {
 
33
        padding: 0 0 8px 8px;
 
34
        vertical-align: top;
 
35
}
 
36
 
 
37
.media-item thead.media-item-info td {
 
38
        padding: 4px 10px 0;
 
39
}
 
40
 
 
41
.media-item .media-item-info .A1B1 {
 
42
        padding: 0 10px 0 0;
 
43
}
 
44
 
 
45
.media-item td.savesend {
 
46
        padding-bottom: 15px;
 
47
}
 
48
 
 
49
.media-item .thumbnail {
 
50
        max-height: 128px;
 
51
        max-width: 128px;
 
52
}
 
53
 
 
54
#wpbody-content #async-upload-wrap a {
 
55
        display: none;
 
56
}
 
57
 
 
58
.media-upload-form {
 
59
        margin-top: 20px;
 
60
}
 
61
 
 
62
.media-upload-form td label {
 
63
        margin-left: 6px;
 
64
        margin-right: 2px;
 
65
}
 
66
 
 
67
.media-upload-form .align .field label {
 
68
        display: inline;
 
69
        padding: 0 23px 0 0;
 
70
        margin: 0 3px 0 1em;
 
71
        font-weight: 600;
 
72
}
 
73
 
 
74
.media-upload-form tr.image-size label {
 
75
        margin: 0 5px 0 0;
 
76
        font-weight: 600;
 
77
}
 
78
 
 
79
.media-upload-form th.label label {
 
80
        font-weight: 600;
 
81
        margin: 0.5em;
 
82
        font-size: 13px;
 
83
}
 
84
 
 
85
.media-upload-form th.label label span {
 
86
        padding: 0 5px;
 
87
}
 
88
 
 
89
.media-item .describe input[type="text"],
 
90
.media-item .describe textarea {
 
91
        width: 460px;
 
92
}
 
93
 
 
94
.media-item .describe p.help {
 
95
        margin: 0;
 
96
        padding: 0 5px 0 0;
 
97
}
 
98
 
 
99
.media-item .edit-attachment,
 
100
.describe-toggle-on,
 
101
.describe-toggle-off {
 
102
        display: block;
 
103
        line-height: 36px;
 
104
        float: left;
 
105
        margin-left: 10px;
 
106
}
 
107
 
 
108
.media-item .describe-toggle-off,
 
109
.media-item.open .describe-toggle-on {
 
110
        display: none;
 
111
}
 
112
 
 
113
.media-item.open .describe-toggle-off {
 
114
        display: block;
 
115
}
 
116
 
 
117
.media-upload-form .media-item {
 
118
        min-height: 36px;
 
119
        margin-bottom: 1px;
 
120
        position: relative;
 
121
        width: 100%;
 
122
        background: #fff;
 
123
}
 
124
 
 
125
.media-upload-form .media-item,
 
126
.media-upload-form .media-item .error {
 
127
        -webkit-box-shadow: 0 1px 0 #dfdfdf;
 
128
        box-shadow: 0 1px 0 #dfdfdf;
 
129
}
 
130
 
 
131
#media-items:empty {
 
132
        border: 0 none;
 
133
}
 
134
 
 
135
.media-item .filename {
 
136
        line-height: 36px;
 
137
        overflow: hidden;
 
138
        margin-right: 6px;
 
139
}
 
140
 
 
141
.media-item .pinkynail {
 
142
        float: right;
 
143
        margin: 2px 3px 0 10px;
 
144
        max-width: 40px;
 
145
        max-height: 32px;
 
146
}
 
147
 
 
148
.media-item .startopen,
 
149
.media-item .startclosed {
 
150
        display: none;
 
151
}
 
152
 
 
153
.media-item .original {
 
154
        position: relative;
 
155
        height: 34px;
 
156
}
 
157
 
 
158
.media-item .progress {
 
159
        float: left;
 
160
        height: 22px;
 
161
        margin: 7px 6px;
 
162
        width: 200px;
 
163
        line-height: 2em;
 
164
        padding: 0;
 
165
        overflow: hidden;
 
166
        -webkit-border-radius: 22px;
 
167
        border-radius: 22px;
 
168
        background: #ddd;
 
169
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
170
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
171
}
 
172
 
 
173
.media-item .bar {
 
174
        z-index: 9;
 
175
        width: 0;
 
176
        height: 100%;
 
177
        margin-top: -22px;
 
178
        -webkit-border-radius: 22px;
 
179
        border-radius: 22px;
 
180
        background-color: #0074a2;
 
181
        -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
 
182
        box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
 
183
}
 
184
 
 
185
.media-item .progress .percent {
 
186
        z-index: 10;
 
187
        position: relative;
 
188
        width: 200px;
 
189
        padding: 0;
 
190
        color: #fff;
 
191
        text-align: center;
 
192
        line-height: 22px;
 
193
        font-weight: 400;
 
194
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
 
195
}
 
196
 
 
197
.upload-php .fixed .column-parent {
 
198
        width: 15%;
 
199
}
 
200
 
 
201
.js .html-uploader #plupload-upload-ui {
 
202
        display: none;
 
203
}
 
204
 
 
205
.js .html-uploader #html-upload-ui {
 
206
        display: block;
 
207
}
 
208
 
 
209
.media-upload-form .media-item.error,
 
210
.media-upload-form .media-item .error {
 
211
        width: auto;
 
212
        margin: 0 0 1px 0;
 
213
}
 
214
 
 
215
.media-upload-form .media-item .error {
 
216
        padding: 10px 14px 10px 0;
 
217
}
 
218
 
 
219
.media-item .error-div a.dismiss {
 
220
        display: block;
 
221
        float: left;
 
222
        margin: 0 15px 0 10px;
 
223
}
 
224
 
 
225
/*------------------------------------------------------------------------------
 
226
  14.1 - Media Library
 
227
------------------------------------------------------------------------------*/
 
228
 
 
229
.find-box {
 
230
        background-color: #fff;
 
231
        -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
 
232
        box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
 
233
        width: 600px;
 
234
        overflow: hidden;
 
235
        margin-right: -300px;
 
236
        position: fixed;
 
237
        top: 30px;
 
238
        bottom: 30px;
 
239
        right: 50%;
 
240
        z-index: 100105;
 
241
}
 
242
 
 
243
.find-box-head {
 
244
        background: #fcfcfc;
 
245
        border-bottom: 1px solid #dfdfdf;
 
246
        height: 36px;
 
247
        font-size: 18px;
 
248
        font-weight: 600;
 
249
        line-height: 36px;
 
250
        padding: 0 16px 0 36px;
 
251
        position: absolute;
 
252
        top: 0;
 
253
        right: 0;
 
254
        left: 0;
 
255
}
 
256
 
 
257
.find-box-inside {
 
258
        overflow: auto;
 
259
        padding: 16px;
 
260
        background-color: #fff;
 
261
        position: absolute;
 
262
        top: 37px;
 
263
        bottom: 45px;
 
264
        overflow-y: scroll;
 
265
        width: 100%;
 
266
        -webkit-box-sizing: border-box;
 
267
        -moz-box-sizing: border-box;
 
268
        box-sizing: border-box;
 
269
}
 
270
 
 
271
.find-box-search {
 
272
        padding-bottom: 16px;
 
273
}
 
274
 
 
275
.find-box-search .spinner {
 
276
        float: none;
 
277
        right: 110px;
 
278
        position: absolute;
 
279
        top: 2px;
 
280
}
 
281
 
 
282
.find-box-search,
 
283
#find-posts-response {
 
284
        position: relative; /* RTL fix, #WP28010 */
 
285
}
 
286
 
 
287
#find-posts-input,
 
288
#find-posts-search {
 
289
        float: right;
 
290
}
 
291
 
 
292
#find-posts-input {
 
293
        width: 140px;
 
294
        height: 28px;
 
295
        margin: 0 0 0 4px;
 
296
}
 
297
 
 
298
.widefat .found-radio {
 
299
        padding-left: 0;
 
300
        width: 16px;
 
301
}
 
302
 
 
303
#find-posts-close {
 
304
        width: 36px;
 
305
        height: 36px;
 
306
        position: absolute;
 
307
        top: 0;
 
308
        left: 0;
 
309
        cursor: pointer;
 
310
        text-align: center;
 
311
        color: #666;
 
312
}
 
313
 
 
314
#find-posts-close:hover {
 
315
        color: #2ea2cc;
 
316
}
 
317
 
 
318
#find-posts-close:before {
 
319
        font: normal 20px/36px 'dashicons';
 
320
        vertical-align: top;
 
321
        speak: none;
 
322
        -webkit-font-smoothing: antialiased;
 
323
        -moz-osx-font-smoothing: grayscale;
 
324
        content: '\f158';
 
325
}
 
326
 
 
327
.find-box-buttons {
 
328
        padding: 8px 16px;
 
329
        background: #fcfcfc;
 
330
        border-top: 1px solid #dfdfdf;
 
331
        position: absolute;
 
332
        bottom: 0;
 
333
        right: 0;
 
334
        left: 0;
 
335
}
 
336
 
 
337
@media screen and ( max-width: 782px ) {
 
338
        .find-box-inside {
 
339
                bottom: 57px;
 
340
        }
 
341
}
 
342
 
 
343
@media screen and ( max-width: 660px ) {
 
344
 
 
345
        .find-box {
 
346
                top: 0;
 
347
                bottom: 0;
 
348
                right: 0;
 
349
                left: 0;
 
350
                margin: 0;
 
351
                width: 100%;
 
352
        }
 
353
 
 
354
}
 
355
 
 
356
.ui-find-overlay {
 
357
        position: fixed;
 
358
        top: 0;
 
359
        right: 0;
 
360
        left: 0;
 
361
        bottom: 0;
 
362
        background: #000;
 
363
        opacity: 0.7;
 
364
        filter: alpha(opacity=70);
 
365
        z-index: 100100;
 
366
}
 
367
 
 
368
ul#dismissed-updates {
 
369
        display: none;
 
370
}
 
371
 
 
372
form.upgrade {
 
373
        margin-top: 8px;
 
374
}
 
375
 
 
376
form.upgrade .hint {
 
377
        font-style: italic;
 
378
        font-size: 85%;
 
379
        margin: -0.5em 0 2em 0;
 
380
}
 
381
 
 
382
#poststuff .inside .the-tagcloud {
 
383
        margin: 5px 0 10px;
 
384
        padding: 8px;
 
385
        border: 1px solid #ddd;
 
386
        line-height: 1.8em;
 
387
        word-spacing: 3px;
 
388
        -webkit-border-radius: 6px;
 
389
        border-radius: 6px;
 
390
}
 
391
 
 
392
.drag-drop #drag-drop-area {
 
393
        border: 4px dashed #bbb;
 
394
        height: 200px;
 
395
}
 
396
 
 
397
.drag-drop .drag-drop-inside {
 
398
        margin: 70px auto 0;
 
399
        width: 250px;
 
400
}
 
401
 
 
402
.drag-drop-inside p {
 
403
        color: #aaa;
 
404
        font-size: 14px;
 
405
        margin: 5px 0;
 
406
        display: none;
 
407
}
 
408
 
 
409
.drag-drop .drag-drop-inside p {
 
410
        text-align: center;
 
411
}
 
412
 
 
413
.drag-drop-inside p.drag-drop-info {
 
414
        font-size: 20px;
 
415
}
 
416
 
 
417
.drag-drop .drag-drop-inside p,
 
418
.drag-drop-inside p.drag-drop-buttons {
 
419
        display: block;
 
420
}
 
421
 
 
422
/*
 
423
#drag-drop-area:-moz-drag-over {
 
424
        border-color: #83b4d8;
 
425
}
 
426
border color while dragging a file over the uploader drop area */
 
427
.drag-drop.drag-over #drag-drop-area {
 
428
        border-color: #83b4d8;
 
429
}
 
430
 
 
431
#plupload-upload-ui {
 
432
        position: relative;
 
433
}
 
434
 
 
435
/**
 
436
 * Media Library grid view
 
437
 */
 
438
 
 
439
.media-frame.mode-grid,
 
440
.media-frame.mode-grid .media-frame-content,
 
441
.media-frame.mode-grid .attachments-browser .attachments,
 
442
.media-frame.mode-grid .uploader-inline-content {
 
443
        position: static;
 
444
}
 
445
 
 
446
/* Regions we don't use at all */
 
447
.media-frame.mode-grid .media-frame-title,
 
448
.media-frame.mode-grid .media-frame-router,
 
449
.media-frame.mode-grid .media-frame-menu {
 
450
        display: none;
 
451
}
 
452
 
 
453
.media-frame.mode-grid .media-frame-content {
 
454
        background-color: transparent;
 
455
        border: none;
 
456
}
 
457
 
 
458
.upload-php .mode-grid .media-sidebar {
 
459
        position: relative;
 
460
        width: auto;
 
461
        margin-bottom: 16px;
 
462
        padding: 0 16px;
 
463
        border: 1px solid #c00;
 
464
        background-color: #feebe8;
 
465
}
 
466
 
 
467
.upload-php .mode-grid .hide-sidebar .media-sidebar {
 
468
        display: none;
 
469
}
 
470
 
 
471
.upload-php .mode-grid .media-sidebar .media-uploader-status {
 
472
        border-bottom: none;
 
473
        padding-bottom: 0;
 
474
        max-width: 100%;
 
475
}
 
476
 
 
477
.upload-php .mode-grid .media-sidebar .upload-error {
 
478
        margin: 20px 0;
 
479
        padding: 0;
 
480
        border: none;
 
481
        background: none;
 
482
}
 
483
 
 
484
.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
 
485
        font-size: 0;
 
486
        top: -12px;
 
487
        left: -10px;
 
488
}
 
489
 
 
490
.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
 
491
        content: "\f158";
 
492
        font: normal 20px/1 dashicons;
 
493
        color: #666;
 
494
}
 
495
 
 
496
.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
 
497
.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
 
498
        color: #2ea2cc;
 
499
}
 
500
 
 
501
.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
 
502
        display: none;
 
503
}
 
504
 
 
505
.media-frame.mode-grid .uploader-inline {
 
506
        position: relative;
 
507
        top: auto;
 
508
        left: auto;
 
509
        right: auto;
 
510
        bottom: auto;
 
511
        padding-top: 0;
 
512
        margin-top: 0;
 
513
        border: 4px dashed #bbb;
 
514
}
 
515
 
 
516
.media-frame.mode-select .attachments-browser.fixed .attachments {
 
517
        position: relative;
 
518
        top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 
519
        padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 
520
}
 
521
 
 
522
.media-frame.mode-grid .attachment:focus,
 
523
.media-frame.mode-grid .selected.attachment:focus,
 
524
.media-frame.mode-grid .attachment.details:focus {
 
525
        -webkit-box-shadow:
 
526
                inset 0 0 2px 3px #f1f1f1,
 
527
                inset 0 0 0 7px #5b9dd9;
 
528
        box-shadow:
 
529
                inset 0 0 2px 3px #f1f1f1,
 
530
                inset 0 0 0 7px #5b9dd9;
 
531
        outline: none;
 
532
}
 
533
 
 
534
.media-frame.mode-grid .selected.attachment {
 
535
        -webkit-box-shadow:
 
536
                inset 0 0 0 5px #f1f1f1,
 
537
                inset 0 0 0 7px #ccc;
 
538
        box-shadow:
 
539
                inset 0 0 0 5px #f1f1f1,
 
540
                inset 0 0 0 7px #ccc;
 
541
}
 
542
 
 
543
.media-frame.mode-grid .attachment.details {
 
544
        -webkit-box-shadow:
 
545
                inset 0 0 0 3px #f1f1f1,
 
546
                inset 0 0 0 7px #1e8cbe;
 
547
        box-shadow:
 
548
                inset 0 0 0 3px #f1f1f1,
 
549
                inset 0 0 0 7px #1e8cbe;
 
550
}
 
551
 
 
552
.media-frame.mode-grid.mode-select .attachment .thumbnail {
 
553
        opacity: 0.65;
 
554
}
 
555
 
 
556
.media-frame.mode-select .attachment.selected .thumbnail {
 
557
        opacity: 1;
 
558
}
 
559
 
 
560
.media-frame.mode-grid .media-toolbar {
 
561
        margin-bottom: 15px;
 
562
        height: auto;
 
563
}
 
564
 
 
565
.media-frame.mode-grid .media-toolbar select {
 
566
        margin: 0 0 0 10px;
 
567
        font-size: 14px;
 
568
}
 
569
 
 
570
.media-frame.mode-grid .media-toolbar-secondary > .media-button {
 
571
        margin-top: 10px;
 
572
        margin-bottom: 10px;
 
573
}
 
574
 
 
575
.media-frame.mode-grid .attachments-browser .bulk-select {
 
576
        display: inline-block;
 
577
        margin: 0 0 0 10px;
 
578
}
 
579
 
 
580
.media-frame.mode-grid .search {
 
581
        margin-top: 0;
 
582
}
 
583
 
 
584
.media-frame.mode-grid .spinner {
 
585
        margin-top: 15px;
 
586
}
 
587
 
 
588
.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
 
589
        margin-left: 10px;
 
590
}
 
591
 
 
592
.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 
593
        position: fixed;
 
594
        top: 32px;
 
595
        right: auto;
 
596
        left: 20px;
 
597
        margin-top: 0;
 
598
}
 
599
 
 
600
.media-frame.mode-grid .attachments-browser {
 
601
        padding: 0;
 
602
}
 
603
 
 
604
.media-frame.mode-grid .attachments-browser .attachments {
 
605
        padding: 2px;
 
606
}
 
607
 
 
608
.media-frame.mode-grid .attachments-browser .no-media {
 
609
        color: #999;
 
610
        font-size: 18px;
 
611
        font-style: normal;
 
612
        margin: 0;
 
613
        padding: 100px 0 0;
 
614
        text-align: center;
 
615
}
 
616
 
 
617
/**
 
618
 * Attachment details modal
 
619
 */
 
620
 
 
621
.edit-attachment-frame {
 
622
        display: block;
 
623
        height: 100%;
 
624
        width: 100%;
 
625
}
 
626
 
 
627
.edit-attachment-frame .edit-media-header {
 
628
        overflow: hidden;
 
629
}
 
630
 
 
631
.upload-php .media-modal-close .media-modal-icon:before {
 
632
        content: '\f335';
 
633
        font-size: 22px;
 
634
}
 
635
 
 
636
.upload-php .media-modal-close .media-modal-icon {
 
637
        margin: 14px;
 
638
        width: 22px;
 
639
}
 
640
 
 
641
.upload-php .media-modal-close,
 
642
.edit-attachment-frame .edit-media-header .left,
 
643
.edit-attachment-frame .edit-media-header .right {
 
644
        cursor: pointer;
 
645
        color: #777;
 
646
        background-color: transparent;
 
647
        height: 50px;
 
648
        width: 50px;
 
649
        padding: 0;
 
650
        position: absolute;
 
651
        text-align: center;
 
652
        border: 0;
 
653
        border-right: 1px solid #ddd;
 
654
        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 
655
    transition: color .1s ease-in-out, background .1s ease-in-out;
 
656
}
 
657
 
 
658
.upload-php .media-modal-close {
 
659
        top: 0;
 
660
        left: 0;
 
661
}
 
662
 
 
663
.edit-attachment-frame .edit-media-header .left {
 
664
        left: 102px;
 
665
}
 
666
 
 
667
.edit-attachment-frame .edit-media-header .right {
 
668
        left: 51px;
 
669
}
 
670
 
 
671
.edit-attachment-frame .media-frame-title {
 
672
        right: 0;
 
673
        left: 150px; /* leave space for prev/next/close */
 
674
}
 
675
 
 
676
.edit-attachment-frame .edit-media-header .right:before,
 
677
.edit-attachment-frame .edit-media-header .left:before {
 
678
        font: normal 20px/50px 'dashicons' !important;
 
679
        display: inline;
 
680
        font-weight: 300;
 
681
}
 
682
 
 
683
.upload-php .media-modal-close:hover,
 
684
.upload-php .media-modal-close:focus,
 
685
.edit-attachment-frame .edit-media-header .left:hover,
 
686
.edit-attachment-frame .edit-media-header .right:hover,
 
687
.edit-attachment-frame .edit-media-header .left:focus,
 
688
.edit-attachment-frame .edit-media-header .right:focus {
 
689
        background: #ddd;
 
690
        border-color: #ccc;
 
691
        color: #000;
 
692
        outline: none;
 
693
}
 
694
 
 
695
.upload-php .media-modal-close:focus .media-modal-icon:before,
 
696
.upload-php .media-modal-close:hover .media-modal-icon:before {
 
697
        color: #000;
 
698
}
 
699
 
 
700
.edit-attachment-frame .edit-media-header .left:before,
 
701
.rtl .edit-attachment-frame .edit-media-header .right:before {
 
702
        content: '\f341';
 
703
}
 
704
 
 
705
.edit-attachment-frame .edit-media-header .right:before,
 
706
.rtl .edit-attachment-frame .edit-media-header .left:before {
 
707
        content: '\f345';
 
708
}
 
709
 
 
710
.edit-attachment-frame .edit-media-header .left.disabled,
 
711
.edit-attachment-frame .edit-media-header .right.disabled,
 
712
.edit-attachment-frame .edit-media-header .left.disabled:hover,
 
713
.edit-attachment-frame .edit-media-header .right.disabled:hover {
 
714
        color: #ccc;
 
715
        background: inherit;
 
716
        cursor: default;
 
717
        pointer-events: none;
 
718
}
 
719
 
 
720
.edit-attachment-frame .media-frame-content,
 
721
.edit-attachment-frame .media-frame-router {
 
722
        right: 0;
 
723
}
 
724
 
 
725
.edit-attachment-frame .media-frame-content {
 
726
        border-bottom: none;
 
727
        bottom: 0;
 
728
        top: 50px;
 
729
}
 
730
 
 
731
.edit-attachment-frame .attachment-details {
 
732
        position: absolute;
 
733
        overflow: auto;
 
734
        top: 0;
 
735
        bottom: 0;
 
736
        left: 0;
 
737
        right: 0;
 
738
        -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 
739
        box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 
740
}
 
741
 
 
742
.edit-attachment-frame .attachment-media-view {
 
743
        float: right;
 
744
        width: 65%;
 
745
        height: 100%;
 
746
}
 
747
 
 
748
.edit-attachment-frame .attachment-media-view .thumbnail {
 
749
        -webkit-box-sizing: border-box;
 
750
        -moz-box-sizing: border-box;
 
751
        box-sizing: border-box;
 
752
        padding: 16px;
 
753
        height: 100%;
 
754
}
 
755
 
 
756
.edit-attachment-frame .attachment-media-view .details-image {
 
757
        display: block;
 
758
        margin-bottom: 16px;
 
759
        max-width: 100%;
 
760
        max-height: 90%;
 
761
        max-height: -webkit-calc( 100% - 42px );
 
762
        max-height: calc( 100% - 42px ); /* leave space for actions underneath */
 
763
}
 
764
 
 
765
.edit-attachment-frame .wp-media-wrapper {
 
766
        margin-bottom: 12px;
 
767
}
 
768
 
 
769
.edit-attachment-frame input,
 
770
.edit-attachment-frame textarea {
 
771
        padding: 6px 8px;
 
772
        line-height: 16px;
 
773
}
 
774
 
 
775
.edit-attachment-frame .attachment-info {
 
776
        overflow: auto;
 
777
        -webkit-box-sizing: border-box;
 
778
        -moz-box-sizing: border-box;
 
779
        box-sizing: border-box;
 
780
        margin-bottom: 0;
 
781
        padding: 12px 16px 0;
 
782
        width: 35%;
 
783
        height: 100%;
 
784
        -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 
785
        box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 
786
        border-bottom: 0;
 
787
        border-right: 1px solid #ddd;
 
788
        background: #f3f3f3;
 
789
}
 
790
 
 
791
.edit-attachment-frame .attachment-info .details,
 
792
.edit-attachment-frame .attachment-info .settings {
 
793
        position: relative; /* RTL fix, #WP29352 */
 
794
        overflow: hidden;
 
795
        float: none;
 
796
        margin-bottom: 15px;
 
797
        padding-bottom: 15px;
 
798
        border-bottom: 1px solid #ddd;
 
799
}
 
800
 
 
801
.edit-attachment-frame .attachment-info .filename {
 
802
        font-weight: normal;
 
803
        color: #666;
 
804
}
 
805
 
 
806
.edit-attachment-frame .attachment-info .thumbnail {
 
807
        margin-bottom: 12px;
 
808
}
 
809
 
 
810
.attachment-info .actions {
 
811
        margin-bottom: 16px;
 
812
}
 
813
 
 
814
.attachment-info .actions a {
 
815
        display: inline;
 
816
        text-decoration: none;
 
817
}
 
818
 
 
819
 
 
820
/*------------------------------------------------------------------------------
 
821
  14.2 - Image Editor
 
822
------------------------------------------------------------------------------*/
 
823
 
 
824
.wp_attachment_details label[for="content"] {
 
825
        font-size: 13px;
 
826
        line-height: 1.5;
 
827
        margin: 1em 0;
 
828
}
 
829
 
 
830
.wp_attachment_details #attachment_caption {
 
831
        height: 4em;
 
832
}
 
833
 
 
834
.describe .image-editor {
 
835
        vertical-align: top;
 
836
}
 
837
 
 
838
.imgedit-wrap {
 
839
        position: relative;
 
840
}
 
841
 
 
842
.imgedit-settings p {
 
843
        margin: 8px 0 0;
 
844
}
 
845
 
 
846
.describe .imgedit-wrap .imgedit-settings {
 
847
        padding: 0 5px;
 
848
}
 
849
 
 
850
.wp_attachment_holder div.updated {
 
851
        margin-top: 0;
 
852
}
 
853
 
 
854
.wp_attachment_holder .imgedit-wrap > div {
 
855
        height: auto;
 
856
        overflow: hidden;
 
857
}
 
858
 
 
859
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
 
860
        padding-left: 16px;
 
861
        width: auto;
 
862
        overflow: hidden;
 
863
}
 
864
 
 
865
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
 
866
        float: left;
 
867
        width: 250px;
 
868
}
 
869
 
 
870
.imgedit-settings input {
 
871
        margin-top: 0;
 
872
        vertical-align: middle;
 
873
}
 
874
 
 
875
.imgedit-wait {
 
876
        position: absolute;
 
877
        top: 0;
 
878
        background: #fff url(../images/spinner.gif) no-repeat center;
 
879
        -webkit-background-size: 20px 20px;
 
880
        background-size: 20px 20px;
 
881
        opacity: 0.7;
 
882
        filter: alpha(opacity=70);
 
883
        width: 100%;
 
884
        height: 500px;
 
885
        display: none;
 
886
}
 
887
 
 
888
.no-float {
 
889
        float: none;
 
890
}
 
891
 
 
892
.media-disabled,
 
893
.imgedit-settings .disabled {
 
894
        color: grey;
 
895
}
 
896
 
 
897
.wp_attachment_image,
 
898
.A1B1 {
 
899
        overflow: hidden;
 
900
}
 
901
 
 
902
.wp_attachment_image .button,
 
903
.A1B1 .button {
 
904
        float: right;
 
905
}
 
906
 
 
907
.no-js .wp_attachment_image .button {
 
908
        display: none;
 
909
}
 
910
 
 
911
.wp_attachment_image .spinner,
 
912
.A1B1 .spinner {
 
913
        float: right;
 
914
        padding: 0 0 4px 0;
 
915
        vertical-align: bottom;
 
916
}
 
917
 
 
918
.imgedit-menu {
 
919
        margin: 0 0 12px;
 
920
        min-width: 300px;
 
921
}
 
922
 
 
923
.imgedit-menu div {
 
924
        float: right;
 
925
        width: 32px;
 
926
        border: 1px solid #d5d5d5;
 
927
        background: #f1f1f1;
 
928
        margin: 0 0 0 8px;
 
929
        height: 32px;
 
930
        -webkit-font-smoothing: antialiased;
 
931
        -moz-osx-font-smoothing: grayscale;
 
932
        text-align: center;
 
933
        line-height: 28px;
 
934
        color: #777;
 
935
        cursor: pointer;
 
936
}
 
937
 
 
938
.imgedit-menu div:before {
 
939
        font: normal 20px/1 'dashicons';
 
940
        speak: none;
 
941
        vertical-align: middle;
 
942
}
 
943
 
 
944
.imgedit-menu div:hover {
 
945
        border-color: #c1c1c1;
 
946
        background-color: #eaeaea;
 
947
        color: #333;
 
948
}
 
949
 
 
950
.imgedit-menu div.disabled {
 
951
        border-color: #ccc;
 
952
        background-color: #ddd;
 
953
        color: #777;
 
954
        filter: alpha(opacity=50);
 
955
        opacity: 0.5;
 
956
        cursor: default;
 
957
}
 
958
 
 
959
.imgedit-crop:before {
 
960
        content:'\f165';
 
961
}
 
962
 
 
963
.imgedit-rleft:before {
 
964
        content:'\f166';
 
965
}
 
966
 
 
967
.imgedit-rright:before {
 
968
        content:'\f167';
 
969
}
 
970
 
 
971
.imgedit-flipv:before {
 
972
        content:'\f168';
 
973
}
 
974
 
 
975
.imgedit-fliph:before {
 
976
        content:'\f169';
 
977
}
 
978
 
 
979
.imgedit-undo:before {
 
980
        content:'\f171';
 
981
}
 
982
 
 
983
.imgedit-redo:before {
 
984
        content:'\f172';
 
985
}
 
986
 
 
987
.imgedit-crop-wrap {
 
988
        position: relative;
 
989
}
 
990
 
 
991
.imgedit-crop {
 
992
        margin: 0 0 0 8px;
 
993
}
 
994
 
 
995
.imgedit-rleft {
 
996
        margin: 0 3px;
 
997
}
 
998
 
 
999
.imgedit-rright {
 
1000
        margin: 0 3px 0 8px;
 
1001
}
 
1002
 
 
1003
.imgedit-flipv {
 
1004
        margin: 0 3px;
 
1005
}
 
1006
 
 
1007
.imgedit-fliph {
 
1008
        margin: 0 3px 0 8px;
 
1009
}
 
1010
 
 
1011
.imgedit-undo {
 
1012
        margin: 0 3px;
 
1013
}
 
1014
 
 
1015
.imgedit-redo {
 
1016
        margin: 0 3px 0 8px;
 
1017
}
 
1018
 
 
1019
.imgedit-applyto img {
 
1020
        margin: 0 0 0 8px;
 
1021
}
 
1022
 
 
1023
.imgedit-group-top {
 
1024
        margin: 5px 0;
 
1025
}
 
1026
 
 
1027
#poststuff .imgedit-group-top h3 {
 
1028
        padding: 0;
 
1029
}
 
1030
 
 
1031
.imgedit-group-top h3 a {
 
1032
        text-decoration: none;
 
1033
}
 
1034
 
 
1035
.imgedit-applyto .imgedit-label {
 
1036
        padding: 2px 0 0;
 
1037
        display: block;
 
1038
}
 
1039
 
 
1040
.imgedit-help {
 
1041
        display: none;
 
1042
        font-style: italic;
 
1043
}
 
1044
 
 
1045
a.imgedit-help-toggle {
 
1046
        text-decoration: none;
 
1047
}
 
1048
 
 
1049
.form-table td.imgedit-response {
 
1050
        padding: 0;
 
1051
}
 
1052
 
 
1053
.imgedit-submit {
 
1054
        margin: 8px 0;
 
1055
}
 
1056
 
 
1057
.imgedit-submit-btn {
 
1058
        margin-right: 20px;
 
1059
}
 
1060
 
 
1061
.imgedit-wrap .nowrap {
 
1062
        white-space: nowrap;
 
1063
}
 
1064
 
 
1065
span.imgedit-scale-warn {
 
1066
        color: red;
 
1067
        font-size: 20px;
 
1068
        font-style: normal;
 
1069
        visibility: hidden;
 
1070
        vertical-align: middle;
 
1071
}
 
1072
 
 
1073
.imgedit-group {
 
1074
        margin-bottom: 8px;
 
1075
        padding: 2px 10px;
 
1076
}
 
1077
 
 
1078
audio, video {
 
1079
        display: inline-block;
 
1080
        max-width: 100%;
 
1081
}
 
1082
 
 
1083
.mejs-container {
 
1084
        width: 100%;
 
1085
        max-width: 100%;
 
1086
}
 
1087
 
 
1088
/* =Media Queries
 
1089
-------------------------------------------------------------- */
 
1090
 
 
1091
/**
 
1092
 * HiDPI Displays
 
1093
 */
 
1094
@media print,
 
1095
  (-o-min-device-pixel-ratio: 5/4),
 
1096
  (-webkit-min-device-pixel-ratio: 1.25),
 
1097
  (min-resolution: 120dpi) {
 
1098
        .imgedit-wait {
 
1099
                background-image: url(../images/spinner-2x.gif);
 
1100
        }
 
1101
}
 
1102
 
 
1103
@media screen and ( max-width: 782px ) {
 
1104
        .wp_attachment_details label[for="content"] {
 
1105
                font-size: 14px;
 
1106
                line-height: 1.5em;
 
1107
        }
 
1108
 
 
1109
        .media-upload-form .media-item.error,
 
1110
        .media-upload-form .media-item .error {
 
1111
                font-size: 13px;
 
1112
                line-height: 1.5;
 
1113
        }
 
1114
 
 
1115
        .media-upload-form .media-item.error {
 
1116
                padding: 1px 10px;
 
1117
        }
 
1118
 
 
1119
        .media-upload-form .media-item .error {
 
1120
                padding: 10px 12px 10px 0;
 
1121
        }
 
1122
}
 
1123
 
 
1124
/**
 
1125
 * Media queries for media grid.
 
1126
 */
 
1127
 
 
1128
@media only screen and (max-width: 1120px) {
 
1129
        .media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
 
1130
                float: none;
 
1131
        }
 
1132
}
 
1133
 
 
1134
@media only screen and ( max-width: 782px ) {
 
1135
        .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 
1136
                top: 46px;
 
1137
                left: 10px;
 
1138
        }
 
1139
}
 
1140
 
 
1141
@media only screen and (max-width: 600px) {
 
1142
        .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 
1143
                top: 0;
 
1144
        }
 
1145
}
 
1146
 
 
1147
@media only screen and (max-width: 480px) {
 
1148
        .edit-attachment-frame .media-frame-title {
 
1149
                left: 110px;
 
1150
        }
 
1151
 
 
1152
        .upload-php .media-modal-close,
 
1153
        .edit-attachment-frame .edit-media-header .left,
 
1154
        .edit-attachment-frame .edit-media-header .right {
 
1155
                width: 40px;
 
1156
                height: 40px;
 
1157
        }
 
1158
 
 
1159
        .upload-php .media-modal-close .media-modal-icon {
 
1160
                margin: 9px 10px;
 
1161
        }
 
1162
 
 
1163
        .edit-attachment-frame .edit-media-header .right:before,
 
1164
        .edit-attachment-frame .edit-media-header .left:before {
 
1165
                line-height: 40px !important;
 
1166
        }
 
1167
 
 
1168
        .edit-attachment-frame .edit-media-header .left {
 
1169
                left: 82px;
 
1170
        }
 
1171
 
 
1172
        .edit-attachment-frame .edit-media-header .right {
 
1173
                left: 41px;
 
1174
        }
 
1175
 
 
1176
        .edit-attachment-frame .media-frame-content {
 
1177
                top: 40px;
 
1178
        }
 
1179
 
 
1180
        .edit-attachment-frame .attachment-media-view {
 
1181
                float: none;
 
1182
                height: auto;
 
1183
                width: 100%;
 
1184
        }
 
1185
 
 
1186
        .edit-attachment-frame .attachment-info {
 
1187
                height: auto;
 
1188
                width: 100%;
 
1189
        }
 
1190
}
 
1191
 
 
1192
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
 
1193
        .upload-php .mode-grid .media-sidebar{
 
1194
                max-width: 100%;
 
1195
        }
 
1196
}